/* Shared curved motion for Story's pictures and its page transition. */
html.story-page{
  --pour-cover:620ms;
  --pour-hold:240ms;
  --pour-reveal:680ms;
  --pour-stagger:65ms;
  --story-motion-ease:cubic-bezier(.22,1,.36,1);
}

html.story-page .pour__layer{
  --curve:clamp(100px,18vh,220px);
  height:calc(100% + var(--curve) * 2);
  bottom:calc(var(--curve) * -1);
  border-radius:50% / var(--curve);
}

html.story-page .pour__layer::before{
  display:none
}

.story-portrait-frame{
  width:265px;
  height:265px;
  margin:0 0 44px;
  flex-shrink:0;
  border-radius:28%;
  overflow:hidden;
  background:var(--peach);
}

.story-portrait-frame .story-portrait{
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:cover
}

.story-label-frame{
  overflow:hidden;
  border-radius:36% 36% 8% 8%;
  background:var(--peach)
}

.story-label-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:0
}

.story-way-intro__art figcaption{
  text-align:center;
  margin-top:18px;
  font-size:12px
}

/* The courtyard becomes a framed illustration on a honey-colored page. */
.story-courtyard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  height:auto;
  min-height:0;
  padding:76px clamp(24px,4vw,64px) 48px;
  background:var(--honey);
  color:var(--cocoa);
  overflow:hidden;
}

.story-courtyard::before{
  display:none
}

.story-courtyard__caption{
  padding:0 0 42px;
  text-align:center;
  width:100%;
  position:relative;
  z-index:1
}

.story-courtyard .story-kicker{
  margin-bottom:24px
}

.story-courtyard h2{
  max-width:none;
  margin:0 auto;
  color:var(--cocoa);
  font-size:clamp(48px,6.8vw,96px);
  line-height:.94
}

.story-courtyard h2 span{
  color:var(--teal)
}

.story-courtyard__scene{
  width:min(1160px,100%);
  margin:0
}

.story-courtyard__frame{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:8/5;
  border-radius:clamp(36px,6vw,90px);
  background:var(--teal)
}

.story-courtyard__image{
  position:static;
  z-index:auto;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 25%
}

.story-courtyard__scene figcaption{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px 8px 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em
}

/* Content is visible by default; only a working script prepares reveal masks. */
[data-story-reveal]{
  position:relative;
  isolation:isolate;
  overflow:hidden
}

[data-story-reveal] img{
  transform-origin:center
}

[data-story-reveal="iris"][data-reveal-state="pending"]{
  clip-path:inset(50% round 24px)
}

[data-story-reveal="iris"][data-reveal-state="pending"] img{
  transform:scale(1.18)
}

.story-image-curtain{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  overflow:hidden
}

.story-image-curtain span{
  position:absolute;
  left:-15%;
  width:130%;
  top:-35%;
  height:170%;
  border-radius:0 0 50% 50% / 0 0 22% 22%;
  background:var(--honey);
}

.story-image-curtain span:nth-child(2){
  background:var(--teal)
}

.story-image-curtain span:nth-child(3){
  background:var(--cocoa)
}

.story-courtyard__frame .story-image-curtain span:nth-child(3){
  background:var(--honey)
}

.story-split--hopper .story-image-curtain span:nth-child(3){
  background:var(--cocoa)
}

@media(max-width:820px){
  .story-portrait-frame{
    width:220px;
    height:220px;
    margin-bottom:32px;
    border-radius:26%
  }
  .story-courtyard{
    padding:54px 20px 32px
  }
  .story-courtyard__caption{
    padding-bottom:30px
  }
  .story-courtyard .story-kicker{
    margin-bottom:18px
  }
  .story-courtyard h2{
    font-size:clamp(30px,8.6vw,62px);
    line-height:.94
  }
  .story-courtyard__frame{
    aspect-ratio:4/5;
    border-radius:42px
  }
  .story-courtyard__image{
    object-position:55% center
  }
  .story-courtyard__scene figcaption{
    flex-direction:column;
    gap:4px;
    text-align:center;
    font-size:11px
  }
  .story-label-frame{
    border-radius:32% 32% 8% 8%
  }
}

@media(prefers-reduced-motion:reduce){
  [data-story-reveal]{
    clip-path:none!important
  }
  [data-story-reveal] img{
    transform:none!important
  }
  .story-image-curtain{
    display:none!important
  }
}