/* The app's own primaryGreen / plusGoldLight / lightCream / highlightGold. */
html{scrollbar-gutter:stable}
html.intro-pending{background:#080b09}
html.intro-pending body{visibility:hidden}
html.intro-active{overflow:hidden;background:#080b09}
html.intro-revealing{background:var(--paper);transition:background 1.2s ease .45s}
.cinematic-intro{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f8f0e5;overflow:hidden;isolation:isolate}
.cinematic-intro:not([open]){display:none}
.cinematic-intro::backdrop{background:transparent}
.intro-veil{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.intro-aura{position:absolute;left:50%;top:58%;width:min(660px,90vw);height:200px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#f2bc5e19, #59787020 38%,transparent 70%);filter:blur(32px);opacity:0;pointer-events:none}
.cinematic-intro.intro-building .intro-aura{animation:intro-aura 3.5s ease-out .9s both}
.intro-title{position:absolute;left:50%;top:47%;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,-50%);font:500 clamp(42px,7.5vw,108px)/1.11 Lora,Georgia,serif;letter-spacing:-.045em;text-align:center;color:#f8f0e5}
.intro-line{display:block;white-space:nowrap}.intro-line+.intro-line{margin-top:.09em}
.intro-word{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(16px)}.cinematic-intro.intro-building .intro-word{animation:intro-word .8s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay)}
.intro-word:nth-child(1){--delay:.18s}.intro-word:nth-child(2){--delay:.37s}.intro-word:nth-child(3){--delay:.57s}
.intro-line:nth-child(2) .intro-word:first-child{--delay:.86s}.intro-line:nth-child(2) .intro-word:last-child{--delay:1.02s}
.intro-power{display:block;opacity:0;transform:translateY(18px) scale(.96);margin-top:.07em}.cinematic-intro.intro-building .intro-power{animation:intro-power 1s cubic-bezier(.16,1,.3,1) 1.35s both}
.intro-power>em{color:transparent;background:linear-gradient(105deg,#91aaa0 0%,#597870 20%,#f2bc5e 39%,#f8f0e5 48%,#ec9a29 60%,#597870 78%,#a8beb2 100%);background-size:240% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text}.cinematic-intro.intro-building .intro-power>em{animation:intro-shimmer 1.45s ease-in-out 1.75s both}
.intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));z-index:5;min-height:44px;min-width:76px;border:1px solid #f8f0e52e;border-radius:25px;background:#080b0970;color:#e3e5dc;font-size:12px;letter-spacing:.025em;padding:10px 20px}
.intro-skip:focus-visible{outline:2px solid #f2bc5e;outline-offset:4px}
.intro-signature{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));width:100%;text-align:center;font:400 9px Inter,sans-serif;letter-spacing:.3em;color:#bcc9bf;opacity:0}.cinematic-intro.intro-building .intro-signature{animation:intro-word 1s ease-out .4s both}
.intro-active .site-header,.intro-active main,.intro-active .site-footer{opacity:0}
.intro-active.intro-revealing .site-header,.intro-active.intro-revealing main,.intro-active.intro-revealing .site-footer{opacity:1;transition:opacity 1.35s ease-out}
.intro-active .hero-product *{animation-play-state:paused!important}
.intro-revealing .intro-title{animation:intro-title-out .85s ease-in both}
.intro-revealing .intro-skip,.intro-revealing .cinematic-intro .intro-signature{opacity:0;transition:opacity .3s;animation:none;pointer-events:none}
.intro-replay{background:none;border:0;font-size:11px;min-height:44px;padding:10px 0;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
@keyframes intro-word{to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes intro-power{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes intro-shimmer{from{background-position:100% 50%}to{background-position:0% 50%}}
@keyframes intro-aura{0%{opacity:0}45%,80%{opacity:1}100%{opacity:0}}
@keyframes intro-title-out{to{opacity:0;filter:blur(5px);transform:translate(-50%,-50%) scale(1.035)}}
@media(max-width:600px){.intro-title{font-size:clamp(32px,8.6vw,51px);letter-spacing:-.035em;top:45%}.intro-line+.intro-line{margin-top:.18em}.intro-power{font-size:1.16em;margin-top:.16em}.intro-aura{top:55%}.intro-skip{right:18px;top:18px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.cinematic-intro,.intro-replay{display:none!important}html.intro-pending body{visibility:visible}.intro-active .site-header,.intro-active main,.intro-active .site-footer{opacity:1}}
/* The intro hands focus to this static heading for assistive technology. */
.story-intro h1[tabindex="-1"]:focus{outline:none}