/* Concept 3's still, sculpted wordmark over Concept 4's celestial stage. */
.lockup-wrap{transform:translateY(-50%)}
#hero-title{position:relative;display:flex;align-items:center;justify-content:center;gap:.16em;width:max-content;max-width:96%;margin:0 auto;font:400 clamp(72px,16.5vw,262px)/1.08 var(--logo);letter-spacing:-.045em;white-space:nowrap;color:var(--cream)}
#hero-title:focus{outline:none}
#hero-title span{text-shadow:none}
.hero-logo-surface{position:relative;display:flex;align-items:center;justify-content:center;gap:inherit}
.hero-emblem{position:relative;display:block;flex:0 0 .4em;transform:translateY(.045em)}
.hero-star{display:block;width:100%;height:auto;filter:drop-shadow(.009em .012em 0 #c9b8b5) drop-shadow(.018em .026em 0 #6b607d) drop-shadow(0 .05em .08em #0005)}
.hero-title-graphic{position:relative;display:block;isolation:isolate;word-spacing:.035em}
#hero-title .hero-title-depth{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:-1;color:#b5a6b1;text-shadow:.004em .005em 0 #e1d3cc,.009em .011em 0 #b6a6b8,.014em .017em 0 #97899f,.019em .023em 0 #80738e,.024em .029em 0 #6b607d,.029em .035em 0 #534c68,.035em .042em .025em #11122299,.02em .07em .09em #0007}
#hero-title .hero-title-depth .intro-word{text-shadow:inherit}
.hero-title-face{position:relative;display:block;color:var(--cream)}
.hero-emblem::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff 3%,#f0edf8 18%,#bcc2da 34%,#fff9ea 46%,#ffffff 49%,#a5aec9 51%,#e4dfee 58%,#fffdf5 75%,#ddd9ee 98%);mask:url('../assets/logo.png') center/contain no-repeat;-webkit-mask:url('../assets/logo.png') center/contain no-repeat}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero-title-face .intro-word{background:linear-gradient(180deg,#ffffff 3%,#f0edf8 18%,#bcc2da 34%,#fff9ea 46%,#ffffff 49%,#a5aec9 51%,#e4dfee 58%,#fffdf5 75%,#ddd9ee 98%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:clamp(.35px,.004em,1.1px) #fff7e866}
}
.small-brand-star{display:block;flex:none;width:.5em;height:auto;margin-right:.3em;object-fit:contain}
.nav-brand,.footer .brand,.review-brand{gap:0;letter-spacing:-.02em;white-space:nowrap}
.nav-brand{transform:translateY(-6px)}
.nav.show-brand .nav-brand,.footer .brand{transform:none}
@media(max-width:760px){
  #hero-title{gap:.15em;font-size:18.4vw}
  .hero-emblem{flex-basis:.38em}
}

/* The glint opens into the layered star, then each word settles into place. */
.intro-word{display:inline-block}
.intro-spark{position:absolute;z-index:3;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#f5f1e5;box-shadow:0 0 7px 2px #f1e6ce5c,0 0 28px 10px #bad3f01c;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
html:is(.c5-intro-pending,.c5-intro-playing) .intro-word{will-change:opacity,transform}
html:is(.c5-intro-pending,.c5-intro-playing) .intro-first{opacity:var(--intro-first,0);transform:translateY(calc((1 - var(--intro-first,0))*5px))}
html:is(.c5-intro-pending,.c5-intro-playing) .intro-last{opacity:var(--intro-last,0);transform:translateY(calc((1 - var(--intro-last,0))*5px))}
html:is(.c5-intro-pending,.c5-intro-playing) .hero-star,html:is(.c5-intro-pending,.c5-intro-playing) .hero-emblem::after{opacity:var(--intro-mark,0);transform:scale(calc(.3 + var(--intro-mark,0)*.7));will-change:opacity,transform}
html:is(.c5-intro-pending,.c5-intro-playing) .intro-spark{opacity:var(--intro-spark,0);transform:translate(-50%,-50%) scale(calc(.65 + var(--intro-spark,0)*.5))}
/* The scroll loop owns opacity on the cue; the intro uses its independent filter. */
html:is(.c5-intro-pending,.c5-intro-playing) .scroll-cue{filter:opacity(var(--intro-support,0))}
html:is(.c5-intro-pending,.c5-intro-playing) .orbit{opacity:var(--intro-support,0)}

/* One bright reflection crosses the complete metal wordmark on arrival. */
.intro-metal-sheen{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;user-select:none;filter:drop-shadow(0 0 .012em #fff) drop-shadow(0 0 .055em #c4d9ffcc)}
.hero-title-intro-shine,.hero-emblem-intro-shine::before{background-image:linear-gradient(110deg,transparent 0%,#dce9ff99 16%,#fff4d9e6 28%,#ffffff 40%,#ffffff 62%,#fff9e9f2 73%,#e0eaffb3 84%,transparent 100%);background-repeat:no-repeat;background-size:var(--intro-sheen-width,220px) var(--intro-sheen-height,200px);background-position:calc(var(--intro-sheen-x,-400px) - var(--sheen-offset-x,0px)) calc(0px - var(--sheen-offset-y,0px))}
.hero-title-intro-shine{background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-emblem-intro-shine{z-index:2}
.hero-emblem-intro-shine::before{content:"";position:absolute;inset:0;mask:url('../assets/logo.png') center/contain no-repeat;-webkit-mask:url('../assets/logo.png') center/contain no-repeat}
html:is(.c5-intro-pending,.c5-intro-playing,.c5-intro-shimmer-only) .intro-metal-sheen{opacity:var(--intro-sheen-opacity,0)}
html:is(.c5-intro-pending,.c5-intro-playing) .hero-title-face{filter:brightness(calc(.96 + var(--intro-finish,0)*.04))}

/* A delayed script can still sweep an already visible logo once. */
html.c5-intro-shimmer-only .intro-word,html.c5-intro-shimmer-only .hero-star,html.c5-intro-shimmer-only .hero-emblem::after{opacity:1;transform:none}
html.c5-intro-shimmer-only .intro-spark{display:none}
html.c5-intro-shimmer-only .hero-title-face{filter:none}
@media(prefers-reduced-motion:reduce){
  html:is(.c5-intro-pending,.c5-intro-playing) :is(.intro-word,.hero-star){opacity:1;transform:none}
  html:is(.c5-intro-pending,.c5-intro-playing) .hero-emblem::after{opacity:1;transform:none}
  html:is(.c5-intro-pending,.c5-intro-playing) .scroll-cue{filter:none}
  html:is(.c5-intro-pending,.c5-intro-playing) .orbit{opacity:1}
  .intro-spark{display:none}
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.intro-metal-sheen{display:none!important}.hero-title-face{filter:none!important}}
@media(forced-colors:active){
  .hero-title-face .intro-word{background:none;color:CanvasText;-webkit-text-stroke:0}
  .hero-title-depth,.hero-emblem::after{display:none}
}
