/* ================= revision 9: living offer panels ================= */
.act{--e:1}
.act-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.22}
.act-lines line,.act-lines path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease)}
.act.live .act-lines line,.act.live .act-lines path{stroke-dashoffset:0}
.act.live .act-lines line:nth-child(2){transition-delay:.25s}
.act.live .act-lines line:nth-child(3){transition-delay:.45s}
.act.live .act-lines path{transition-delay:.6s}
.act-inner{position:relative}
.act-title{transform:translateX(calc((1 - var(--e)) * -10vw));will-change:transform}

/* text comes into focus, one piece after another */
.act-text>.eyebrow,.act-lead,.act-body,.act-list li,.act-text>.cta{opacity:0;filter:blur(10px);transform:translateY(34px);transition:opacity .9s var(--ease),filter .9s var(--ease),transform 1.1s var(--ease),color .45s,background-color .45s,outline-offset .45s}
.act.live .act-text>.eyebrow,.act.live .act-lead,.act.live .act-body,.act.live .act-list li,.act.live .act-text>.cta{opacity:1;filter:none;transform:none}
.act.live .act-lead{transition-delay:.12s}
.act.live .act-body{transition-delay:.22s}
.act.live .act-list li:nth-child(1){transition-delay:.34s}
.act.live .act-list li:nth-child(2){transition-delay:.44s}
.act.live .act-list li:nth-child(3){transition-delay:.54s}
.act.live .act-text>.cta{transition-delay:.68s,.68s,.68s,0s,0s,0s}
.act-list{border-top:0;position:relative}
.act-list::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.4s .3s var(--ease)}
.act.live .act-list::before{transform:scaleX(1)}

/* the painting rises into its arch and leans towards the cursor */
.arch{--rx:0deg;--ry:0deg;transform:perspective(1100px) translateY(calc((1 - var(--e)) * 22vh)) rotateX(var(--rx)) rotateY(var(--ry));clip-path:inset(calc((1 - var(--e)) * 46%) 0 0 0 round 999px 999px 0 0);will-change:transform,clip-path}
.arch-lens{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;-webkit-mask:radial-gradient(circle 120px at var(--mx,50%) var(--my,50%),#000 62%,transparent 100%);mask:radial-gradient(circle 120px at var(--mx,50%) var(--my,50%),#000 62%,transparent 100%)}
.arch:hover .arch-lens.ready{opacity:1}
.arch-lens canvas{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.arch figcaption{z-index:2}

/* closing link: reads as clickable */
.hello-link{transition:transform .7s var(--ease);cursor:pointer}
.hello-link:hover{transform:scale(1.07)}
.hello-rule{animation:beckon 2.8s ease-in-out infinite}
.hello-link:hover .hello-rule{animation:none}
@keyframes beckon{0%,100%{width:34%;opacity:.7}50%{width:58%;opacity:1}}

/* ================= About: arrives in sequence ================= */
.with-head .eyebrow,.with-title,.bio-a,.bio-b{opacity:0;filter:blur(12px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.3s var(--ease)}
.with-head .eyebrow{transform:translateY(20px)}
.with-title{transform:translateY(40px) scale(.96)}
.bio-a{transform:translateX(-70px)}
.bio-b{transform:translateX(70px)}
.with-head.live .eyebrow,.with-head.live .with-title,.with-head.live .bio-a,.with-head.live .bio-b{opacity:1;filter:none;transform:none}
.with-head.live .with-title{transition-delay:.1s}
.with-head.live .bio-a{transition-delay:.75s}
.with-head.live .bio-b{transition-delay:.95s}
.trip p[data-reveal]{opacity:0}
.with-head.live .trip p[data-reveal]{opacity:1}

/* portrait: the arch opens from the floor up, the grove settles, then she steps in */
.portrait{perspective:1100px}
.portrait-arch{--rx:0deg;--ry:0deg;--px:0px;--py:0px;clip-path:inset(100% 0 0 0 round 999px 999px 0 0);transform:translateY(60px) rotateX(var(--rx)) rotateY(var(--ry));transition:clip-path 1.5s .3s var(--ease),transform 1.5s .3s var(--ease)}
.with-head.live .portrait-arch{clip-path:inset(-12px -12px -12px -12px round 999px 999px 0 0);transform:rotateX(var(--rx)) rotateY(var(--ry))}
.portrait-bg{transform:scale(2.15) translate(var(--px),var(--py))!important;transition:transform 2.4s .3s var(--ease)}
.with-head.live .portrait-bg{transform:scale(1.75) translate(var(--px),var(--py))!important}
.portrait-me{opacity:0;transform:translateX(-50%) translateY(9%) scale(1.03);transition:opacity 1.1s .85s var(--ease),transform 1.5s .85s var(--ease)}
.with-head.live .portrait-me{opacity:1;transform:translateX(-50%)}

/* the signature writes itself */
.with-head .sign{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1.9s 1.5s cubic-bezier(.6,.1,.3,1)}
.with-head.live .sign{clip-path:inset(-30% -6% -30% 0)}

@media (max-width:900px){
  .act-title{transform:none}
  .arch{transform:translateY(calc((1 - var(--e)) * 8vh));clip-path:none}
  .act-lines{display:none}
  .toast{font-size:16px}
  .act-text>.eyebrow,.act-lead,.act-body,.act-list li,.act-text>.cta{opacity:1;filter:none;transform:none}
  .act-list::before{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .act-text>*,.act-list li{opacity:1!important;filter:none!important;transform:none!important}
  .arch{transform:none!important;clip-path:none!important}
  .act-title{transform:none!important}
}

/* portrait background: a millefleurs field, no figures */
.portrait-bg{object-position:50% 50%!important;transform-origin:50% 50%!important;transform:scale(1.8) translate(var(--px),var(--py))!important;filter:brightness(.74) saturate(.95)!important}
.with-head.live .portrait-bg{transform:scale(1.45) translate(var(--px),var(--py))!important}
.portrait-arch::after{background:radial-gradient(75% 60% at 50% 42%,rgba(5,6,12,0),rgba(5,6,12,.55))}

/* signature written letter by letter, after the bio has landed */
.with-head .sign,.with-head.live .sign{clip-path:none;transition:none}
.pen{display:inline-block;clip-path:inset(-45% 105% -45% -25%);transition:clip-path 0s}
.with-head.live .pen{clip-path:inset(-45% -70% -45% -25%);transition:clip-path var(--t) cubic-bezier(.45,.05,.4,1) calc(2.35s + var(--d))}

/* portrait: the bouquet grows up from behind her */
@property --g{syntax:"<percentage>";inherits:false;initial-value:0%}
.portrait-arch{background:#0b0c10}
.portrait-arch::after{background:radial-gradient(80% 62% at 50% 40%,rgba(5,6,12,0),rgba(5,6,12,.5))}
.portrait-bg{--g:0%;object-position:50% 30%!important;transform-origin:50% 78%!important;transform:scale(.72) translate(var(--px),var(--py))!important;filter:brightness(.86) saturate(1.02) blur(6px)!important;
  -webkit-mask:radial-gradient(ellipse 70% 62% at 50% 72%,#000 calc(var(--g) - 26%),transparent var(--g));mask:radial-gradient(ellipse 70% 62% at 50% 72%,#000 calc(var(--g) - 26%),transparent var(--g));
  transition:transform 3.2s 1.25s cubic-bezier(.2,.7,.2,1),--g 3s 1.25s cubic-bezier(.3,.6,.3,1),filter 2.4s 1.4s var(--ease)!important}
.with-head.live .portrait-bg{--g:230%;transform:scale(1.22) translate(var(--px),var(--py))!important;filter:brightness(.86) saturate(1.02) blur(0)!important}
.portrait-me{transition:opacity 1.1s .6s var(--ease),transform 1.5s .6s var(--ease)}
.with-head.live .bio-a{transition-delay:1.6s}
.with-head.live .bio-b{transition-delay:1.8s}
.with-head.live .pen{transition-delay:calc(3.3s + var(--d))}