/* Hero copy and moon hint. Loaded last.
   The copy sits in real pixels (readable at every size) but is anchored to the
   native scene: its bottom edge stays just above the monitor tops (native y 470),
   its left edge at native x 1090, clear of the moon, ring and arrow. */
.scene-copy {position:absolute;z-index:14;left:calc(var(--stage-x,24px) + var(--scene-unit,.5px)*1090);bottom:calc(100% - var(--stage-y,0px) - var(--scene-unit,.5px)*470);width:min(calc(100% - var(--stage-x,24px) - var(--scene-unit,.5px)*1090 - 24px),640px);color:#f7fff5;pointer-events:auto;text-shadow:0 1px 14px #02040acc;container-type:inline-size;}
/* Browser zoom: when the larger text no longer fits above the monitors, scene.js
   anchors the copy to the hero top instead of letting it leave the hero. */
.scene-copy.scene-copy--top {bottom:auto;top:16px;}
.scene-copy .scene-title {font:780 min(clamp(28px,calc(var(--scene-unit,.5px)*38 + 1.8rem),4.5rem),11cqi)/.98 Archivo,sans-serif;letter-spacing:-.065em;margin:0;color:#f7fff5;white-space:nowrap;}
.scene-copy .scene-title b {color:#19e50f;font-weight:500;}
.scene-copy .scene-title .outline {-webkit-text-stroke:1.6px #23d92a;color:transparent;text-shadow:none;}
.scene-copy .scene-title:focus {outline:none;}
.scene-claim {font:700 clamp(19px,calc(var(--scene-unit,.5px)*23 + 1.1rem),2.25rem)/1.15 Archivo,sans-serif;letter-spacing:-.03em;margin:.65em 0 0;}
.scene-claim em {font-style:normal;color:#39ff14;}
.scene-sub {font:500 clamp(13px,calc(var(--scene-unit,.5px)*26),17px)/1.55 Manrope,sans-serif;color:#bfcbc5;margin:.75em 0 0;max-width:34em;}
.scene-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,calc(var(--scene-unit,.5px)*40),26px);}
.scene-cta {display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid #19e50f;border-radius:999px;background:#19e50f;color:#02040a;font:700 13px/1 Manrope,sans-serif;letter-spacing:.01em;text-decoration:none;text-shadow:none;transition:background-color .2s,border-color .2s,color .2s,transform .2s;}
.scene-cta:hover {background:#39ff14;border-color:#39ff14;transform:translateY(-1px);}
.scene-cta:active {transform:translateY(0);}
.scene-cta-ghost {background:#02040a8c;color:#e9f5ec;border-color:#ffffff47;}
.scene-cta-ghost:hover {background:#ffffff14;border-color:#ffffffa0;color:#fff;}

/* Moon: brighter at night, green neon ring and a green neon block arrow on its
   right pointing at it. Neon tube look: light core, green tube, soft bloom. */
.hero[data-power=night] .celestial-orbit .scene-moon {opacity:.9;}
.moon-neon-ring,.moon-hint-arrow {overflow:visible;fill:none;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px #19e50f) drop-shadow(0 0 10px #19e50fa6);}
.neon-glow {stroke:#19e50f;stroke-width:9;opacity:.22;}
.neon-tube {stroke:#39ff14;stroke-width:4;}
.neon-core {stroke:#e4ffdf;stroke-width:1.5;}
.moon-neon-ring {position:absolute;inset:-12%;width:124%;height:124%;pointer-events:none;opacity:0;animation:moonHintIn .8s 1s ease forwards,neonBreathe 3.6s 1.8s ease-in-out infinite;}
.moon-trigger:hover .neon-glow,.moon-trigger:focus-visible .neon-glow {opacity:.42;}
.moon-hint {position:absolute;left:calc(100% + clamp(18px,calc(var(--body-size,160px)*.24),48px));top:50%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transform:translateY(-50%);opacity:0;animation:moonHintIn .8s 1.2s ease forwards;pointer-events:none;}
.moon-hint-arrow {display:block;width:clamp(48px,calc(var(--body-size,160px)*.42),78px);height:auto;animation:moonArrowNudge 1.6s 2s ease-in-out infinite;}
.moon-hint-label {font:500 11px/1.35 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#e4ffdf;white-space:nowrap;text-align:left;text-shadow:0 0 6px #19e50f,0 0 12px #19e50f80;}
@keyframes moonHintIn {to{opacity:1}}
@keyframes neonBreathe {0%,100%{opacity:1}50%{opacity:.78}}
@keyframes moonArrowNudge {0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
.hero:not([data-power=night]) .moon-neon-ring,.hero:not([data-power=night]) .moon-hint {animation:none;opacity:0;transition:opacity .4s;}
@media(prefers-reduced-motion:reduce){
 .moon-neon-ring,.moon-hint {animation:none;opacity:1;}
 .moon-hint-arrow {animation:none;}
}

/* Accessibility repairs. */
.skip-link {color:#02040a;font-weight:700;}
.scene-project-slide:focus-visible {outline-offset:-10px;outline-width:6px!important;}
.engine-trigger {min-width:44px;min-height:44px;}

@media(max-width:760px){
 .scene-copy {left:24px;right:24px;width:auto;bottom:auto;top:max(84px,11svh);}
 .scene-copy .scene-title {font-size:clamp(28px,8vw,40px);}
 .scene-claim {font-size:clamp(20px,5.6vw,28px);}
 .scene-sub {font-size:14px;}
 .footer h2 {font-size:clamp(44px,15vw,70px);}
}

/* Coffee mug lettering: camera-projected neon mask from the 3D render.
   Off at night; ignites like a neon tube on power-on, then a slow light
   sweep runs along the letters. Bright core, tight glow only. */
.mug-neon {position:absolute;z-index:6;pointer-events:none;opacity:0;contain:strict;}
.mug-neon > span {position:absolute;inset:0;-webkit-mask:url('../scene/seated/mug-lettering.webp') 0 0/100% 100% no-repeat;mask:url('../scene/seated/mug-lettering.webp') 0 0/100% 100% no-repeat;}
.mug-neon-glow {background:#39ff14;filter:blur(2px);opacity:.55;}
.mug-neon-core {background:linear-gradient(100deg,#23d92a 0 36%,#e4ffdf 47%,#39ff14 55%,#23d92a 66% 100%);background-size:320% 100%;background-position:100% 0;}
.hero[data-power=on] .mug-neon {opacity:1;animation:mugIgnite 1.9s linear .35s both;}
.hero[data-power=on] .mug-neon-core {animation:mugSweep 7s ease-in-out 2.4s infinite;}
.hero[data-power=on] .mug-neon-glow {animation:mugBreath 3.4s ease-in-out 2.2s infinite alternate;}
@keyframes mugIgnite {0%{opacity:0}7%{opacity:.85}10%{opacity:.08}18%{opacity:1}22%{opacity:.25}31%{opacity:.95}35%{opacity:.55}44%,100%{opacity:1}}
@keyframes mugSweep {0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes mugBreath {from{opacity:.42}to{opacity:.72}}
html.scene-light-paused .mug-neon,html.scene-light-paused .mug-neon > span,html.studio-tab-hidden .mug-neon,html.studio-tab-hidden .mug-neon > span {animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.hero .mug-neon,.hero .mug-neon > span{animation:none!important;}}

/* Steam above the hot coffee: three baked soft wisps rise, sway, widen and
   dissolve, staggered so the column never repeats visibly. Only transform and
   opacity animate; paused with the scene, still for reduced motion. */
.mug-steam {position:absolute;z-index:6;pointer-events:none;contain:strict;opacity:.2;transition:opacity 2s ease;}
.hero[data-power=on] .mug-steam {opacity:1;}
.mug-steam > span {position:absolute;left:0;bottom:0;width:100%;height:100%;background:url('../scene/seated/mug-steam.webp') 0 0/300% 100% no-repeat;mix-blend-mode:screen;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;animation:mugSteam 6.2s linear infinite;}
.mug-steam > span:nth-child(2) {background-position:50% 0;animation-duration:7.1s;animation-delay:-2.4s;}
.mug-steam > span:nth-child(3) {background-position:100% 0;animation-duration:6.6s;animation-delay:-4.7s;}
@keyframes mugSteam {
 0% {opacity:0;transform:translate(0,14%) scale(.7,.6);}
 18% {opacity:.42;}
 45% {transform:translate(-6%,-8%) scale(.95,.85);}
 70% {opacity:.26;transform:translate(5%,-22%) scale(1.15,1);}
 100% {opacity:0;transform:translate(-3%,-38%) scale(1.35,1.12);}
}
html.scene-light-paused .mug-steam > span,html.studio-tab-hidden .mug-steam > span {animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.mug-steam > span{animation:none;opacity:.24;transform:none;}}

/* The two hero buttons wait for daylight: hidden (and not focusable) at
   night, they fade in while the scene brightens after the moon click. */
.hero[data-power=night] .scene-actions {opacity:0;visibility:hidden;transform:translateY(8px);}
.hero:not([data-power=night]) .scene-actions {opacity:1;visibility:visible;transform:none;transition:opacity .9s ease 1.6s,transform .9s ease 1.6s,visibility 0s 1.6s;}
@media (prefers-reduced-motion:reduce){.hero:not([data-power=night]) .scene-actions{transition:none;}}