/* A continuous transformation loop. The official mark is the final frame. */
.hero-showcase{position:relative;min-width:0;align-self:center;isolation:isolate;margin-left:20px}
.showcase-top{display:flex;align-items:center;justify-content:flex-end;gap:16px;position:relative;z-index:2}
.showcase-top{min-height:44px;color:#a4aa98;font:10px/1.5 'Courier New',monospace;letter-spacing:1.8px}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;padding:10px 0 10px 12px;min-height:44px;border:0;background:none;color:#a4aa98;font:14px/1.5 Arial,sans-serif;cursor:pointer}
.motion-toggle[hidden]{display:none}.motion-toggle .icon{width:12px;height:12px}.motion-toggle:hover{color:var(--accent)}
.transform-stage{position:relative;isolation:isolate;padding-bottom:64px}
.transform-visual{position:relative;display:block;width:100%;aspect-ratio:1;background:none;border:0;padding:0;border-radius:45%;z-index:1}
.transform-fallback{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.transform-art{display:none;width:100%;height:auto;overflow:visible}
.transform-ready .transform-fallback{display:none}.transform-ready .transform-art{display:block}
.character-rig{transform-origin:51% 57%;transform-box:view-box}
.moving-fringe{transform-origin:62% 26%;transform-box:view-box;opacity:0}
.bare-face{opacity:0}.bare-eye{transform-origin:36% 47%;transform-box:view-box}.bare-pupil{transform-box:fill-box}
.finished-face{opacity:1}
.sweep-trail,.fringe-shine{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
.transform-word{position:absolute;left:50%;top:4%;transform:translateX(-50%) rotate(-9deg);font:clamp(80px,13.9vw,208px)/1 Anton,Impact,sans-serif;letter-spacing:-3px;color:transparent;-webkit-text-stroke:1px #ccff0038;opacity:.5;z-index:-1;user-select:none;pointer-events:none}
.transform-aura{position:absolute;inset:14% -9% 6%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,#ccff002b,transparent 61%);opacity:.7;pointer-events:none}
.transform-captions{position:absolute;bottom:15px;left:0;width:100%;height:56px;text-align:center;font:clamp(25px,3.15vw,47px)/1.1 Anton,Impact,sans-serif;letter-spacing:-.5px;pointer-events:none}
.transform-captions>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.2em;white-space:nowrap}
.caption-before,.caption-during{opacity:0}.caption-after{opacity:1}.caption-after em{font-style:normal;color:var(--accent)}
@media(min-width:1500px){.hero-showcase{margin-left:32px}}
@media(max-width:1000px){.hero-showcase{margin-left:10px}.showcase-top{font-size:9px;letter-spacing:1px}.transform-stage{padding-bottom:52px}.transform-captions{bottom:7px;font-size:31px}}
@media(max-width:760px){.hero-showcase{width:min(100%,470px);margin:14px auto 12px}.transform-word{font-size:clamp(100px,31vw,166px);top:5%}.transform-stage{padding-bottom:54px}.transform-captions{font-size:35px;bottom:7px}.showcase-top{font-size:9px}.hero{overflow:clip}.hero-bottom{bottom:20px}}
@media(max-width:360px){.transform-captions{font-size:30px}.showcase-top{font-size:8px;letter-spacing:.8px}}
/* Export first, then take the PNG to X. No photo leaves this page automatically. */
.share-panel{margin-top:17px;padding:17px;border:1px solid #15171325;border-radius:6px;background:#f3f8dc;color:#151713}
.share-panel h3{font:25px/1.15 Anton,Impact,sans-serif;letter-spacing:0;margin:0 0 9px}
.share-panel>p{font-size:13px;line-height:1.6;margin:0 0 13px;color:#566044}
.share-actions{display:flex;flex-wrap:wrap;gap:8px}.share-actions a,.share-actions button{font:inherit;font-size:13px;min-height:44px;padding:11px 13px;border:1px solid #15171330;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;gap:15px;cursor:pointer}
.share-actions .share-x{background:#151713;color:#fff;border-color:#151713}.share-actions button{background:transparent;color:#151713}.share-actions a:hover{background:#354127}.share-actions button:hover{background:#e4ecca}
.share-panel .share-hint{font-size:12px;line-height:1.6;margin:12px 0 0}.share-status{display:block;font-size:12px;line-height:1.6;margin-top:8px;color:#526600}.share-status:empty{display:none}
#share-caption{resize:vertical;width:100%;min-height:112px;border:1px solid #52660050;border-radius:4px;padding:10px;font:13px/1.6 Arial,sans-serif;margin-top:12px;background:#fff;color:#151713}
@media(max-width:760px){.share-actions a,.share-actions button{font-size:14px;flex:1}.share-panel h3{font-size:28px}}

/* Keep the full desktop composition, including the caption, above the fold. */
@media(min-width:761px){
  :root{--hero-header:clamp(76px,10svh,104px);--hero-top:clamp(16px,3svh,32px)}
  .header{height:var(--hero-header)}
  .hero{min-height:calc(100svh - var(--hero-header));padding-top:var(--hero-top);padding-bottom:64px;overflow:clip}
  .hero h1{font-size:clamp(64px,min(9.6vw,14svh),138px);margin-bottom:20px}
  .hero .eyebrow{margin-bottom:18px}
  .hero-description{margin-bottom:20px}
  .hero-actions .button{min-height:54px;padding:16px 24px}
  .hero .launch-note{margin-top:16px}
  .hero-contract{margin-top:12px;padding:10px 12px}
  .hero-copy .copy-status:empty{display:none}
  .hero-showcase{width:min(100%,calc(100svh - var(--hero-header) - var(--hero-top) - 176px));max-width:570px;justify-self:end;margin:0}
  .transform-stage{padding-bottom:64px}
  .transform-captions{font-size:clamp(28px,4.6svh,44px);bottom:8px}
  .transform-word{font-size:clamp(80px,19svh,180px)}
  .hero-bottom{bottom:24px}
}
@media(min-width:761px) and (max-height:620px){
  .hero{padding-bottom:48px}
  .hero .eyebrow{margin-bottom:12px}.hero h1{font-size:clamp(58px,12svh,78px);margin-bottom:12px}
  .hero-description{margin-bottom:14px}.hero .launch-note{margin-top:12px}
  .hero-showcase{width:min(100%,calc(100svh - var(--hero-header) - var(--hero-top) - 160px))}
  .hero-bottom{bottom:16px}
}