/* 2474 / AFTER RESET — visible reconstruction, without changing the ledger.
   Ambient layers are inert. HTML stays visible until the observer is ready. */
:root{--motion-ease:cubic-bezier(.2,.65,.25,1);--motion-signal:#ff673d}

/* The frame follows the pointer; the image breathes on its own layer. */
.hero-art{isolation:isolate;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:50% 50%;transition:transform 320ms var(--motion-ease),border-color 300ms ease}
.hero-art>img{z-index:0;transform-origin:50% 48%;animation:memory-image-breathe 7.2s ease-in-out infinite;backface-visibility:hidden}
.hero-art::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:.8;background:radial-gradient(ellipse 55% 65% at var(--mx,50%) var(--my,45%),rgba(255,190,147,.12),rgba(255,103,61,.035) 40%,transparent 76%);transition:opacity 350ms ease}
.hero-art::after,.hero-art .image-registration,.hero-art figcaption{pointer-events:none}
.hero-art .image-registration,.hero-art figcaption{z-index:3}
.memory-scene,#memoryScene{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;background:transparent}
.hero-core-glow{position:absolute;z-index:2;left:var(--core-x,50%);top:var(--core-y,52%);width:46%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:.7;transform:translate3d(-50%,-50%,0) scale(.9);background:radial-gradient(ellipse,rgba(255,164,101,.28),rgba(255,103,61,.15) 28%,rgba(255,103,61,.035) 52%,transparent 73%);animation:memory-core-pulse 3s ease-in-out infinite}
.hero-core-glow::before,.hero-core-glow::after{content:"";position:absolute;inset:16%;border-radius:50%;pointer-events:none;opacity:0;border:1px solid rgba(255,154,99,.62);transform:scale(.7);animation:memory-core-ring 3s var(--motion-ease) infinite}
.hero-core-glow::after{inset:5%;border-color:rgba(255,111,66,.34);animation-delay:-1.5s}
.hero-fragments{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit}
.hero-fragments *{pointer-events:none}
.fragment-orbit{--fragment-turn:-9deg;position:absolute;display:block;left:12%;top:31%;width:43px;height:auto;opacity:.68;transform-origin:50% 50%;animation:memory-fragment-drift calc(6s + var(--index,0)*.55s) ease-in-out infinite;animation-delay:calc(var(--index,0)*-1.8s)}
.fragment-orbit:nth-child(1){left:9%;top:29%;width:48px;opacity:.78}
.fragment-orbit:nth-child(2){--fragment-turn:12deg;left:79%;top:22%;width:35px;opacity:.6}
.fragment-orbit:nth-child(3){--fragment-turn:-16deg;left:13%;top:65%;width:31px;opacity:.55}
.fragment-orbit:nth-child(4){--fragment-turn:9deg;left:82%;top:68%;width:40px;opacity:.65}
.fragment-orbit:nth-child(5){--fragment-turn:-5deg;left:36%;top:15%;width:25px;opacity:.5}
.fragment-orbit:nth-child(6){--fragment-turn:18deg;left:60%;top:78%;width:28px;opacity:.5}
.hero-art.scene-active .fragment-orbit:nth-child(n+4){display:none}
.hero-art.scene-active .fragment-orbit:nth-child(1){opacity:.62}
.hero-art.scene-active .fragment-orbit:nth-child(2),.hero-art.scene-active .fragment-orbit:nth-child(3){opacity:.5}
/* Optional scan/halo nodes complement the canvas, rather than replacing it. */
.hero-scan{position:absolute;inset:-40% 0;z-index:2;pointer-events:none;opacity:.5;background:linear-gradient(180deg,transparent 43%,rgba(255,135,82,.015) 47%,rgba(255,135,82,.16) 50%,rgba(255,135,82,.02) 53%,transparent 57%);transform:translate3d(0,-45%,0);animation:memory-scan-pass 7.6s ease-in-out infinite}
.hero-halo{position:absolute;z-index:2;left:var(--core-x,50%);top:var(--core-y,52%);width:67%;aspect-ratio:1;border:1px solid rgba(255,135,82,.14);border-top-color:rgba(255,170,114,.42);border-radius:50%;pointer-events:none;transform:translate3d(-50%,-50%,0) rotate(-25deg) scaleY(.72);animation:memory-halo-orbit 17s linear infinite}
@keyframes memory-image-breathe{0%,100%{transform:translate3d(calc(var(--image-pan-x,0px) - 2px),calc(var(--image-pan-y,0px) + 7px),0) rotate(-.6deg) scale(1.025)}50%{transform:translate3d(calc(var(--image-pan-x,0px) + 2px),calc(var(--image-pan-y,0px) - 10px),0) rotate(.65deg) scale(1.065)}}
@keyframes memory-core-pulse{0%,100%{opacity:.45;transform:translate3d(-50%,-50%,0) scale(.88)}50%{opacity:.98;transform:translate3d(-50%,-50%,0) scale(1.16)}}
@keyframes memory-core-ring{0%{opacity:0;transform:scale(.65)}22%{opacity:.65}78%{opacity:.15}100%{opacity:0;transform:scale(1.28)}}
@keyframes memory-fragment-drift{0%,100%{transform:translate3d(-7px,9px,0) rotate(var(--fragment-turn))}50%{transform:translate3d(11px,-20px,0) rotate(calc(var(--fragment-turn) + 17deg))}}
@keyframes memory-scan-pass{0%,12%{opacity:0;transform:translate3d(0,-45%,0)}25%{opacity:.5}68%{opacity:.4}82%,100%{opacity:0;transform:translate3d(0,45%,0)}}
@keyframes memory-halo-orbit{from{transform:translate3d(-50%,-50%,0) rotate(-25deg) scaleY(.72)}to{transform:translate3d(-50%,-50%,0) rotate(335deg) scaleY(.72)}}

/* No observer/ready flag means fully visible content. */
.motion-reveal{opacity:1}
html.motion-ready .motion-reveal{transition:opacity 650ms var(--motion-ease),transform 650ms var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
html.motion-ready .motion-reveal:not(.is-visible){opacity:0;transform:translate3d(0,22px,0)}
html.motion-ready .motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
html.motion-ready .hero-entrance{animation:archive-entrance 800ms var(--motion-ease) both;animation-delay:var(--reveal-delay,0ms)}
html.motion-ready #heroTitle.hero-entrance{animation:archive-title-reveal 850ms var(--motion-ease) both;animation-delay:var(--reveal-delay,0ms)}
html.motion-ready #heroTitle.hero-entrance>span{display:inline-block;max-width:100%;animation:archive-title-line 850ms var(--motion-ease) both;animation-delay:calc(var(--reveal-delay,0ms) + 50ms)}
html.motion-ready #heroTitle.hero-entrance>span:not(.hero-title-first){animation-delay:calc(var(--reveal-delay,0ms) + 170ms)}
@keyframes archive-entrance{from{opacity:0;transform:translate3d(0,19px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes archive-title-reveal{from{opacity:0;clip-path:inset(0 0 65% 0);transform:translate3d(0,17px,0)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}}
@keyframes archive-title-line{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Decorative one-pixel journeys, not a fabricated activity indicator. */
.scroll-progress{position:fixed;left:0;top:0;right:0;height:1px;z-index:190;background:var(--motion-signal);pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--scroll-progress,0));opacity:1}
.site-header{overflow:hidden;overflow:clip}
.site-header::after{content:"";position:absolute;left:0;bottom:-1px;width:45%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,103,61,.65),transparent);opacity:.6;transform:translate3d(-110%,0,0);animation:archive-header-current 10s linear infinite}
.protocol-metrics{position:relative;overflow:hidden}
.protocol-metrics::after{content:"";position:absolute;left:0;top:0;width:44%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,150,97,.8),transparent);opacity:.6;transform:translate3d(-110%,0,0);animation:archive-header-current 8.8s ease-in-out infinite;animation-delay:-3s}
@keyframes archive-header-current{0%,12%{opacity:0;transform:translate3d(-110%,0,0)}24%{opacity:.65}80%{opacity:.5}100%{opacity:0;transform:translate3d(325%,0,0)}}
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--motion-signal);pointer-events:none;transform:scaleX(0);transform-origin:0 50%;transition:transform 260ms var(--motion-ease),opacity 260ms ease;opacity:.35}
.main-nav a.is-current::after,.main-nav a[aria-current="location"]::after{transform:scaleX(1);opacity:1}

/* Tactile actions and a visible warm edge; disabled actions stay completely still. */
.btn{transition:transform 190ms var(--motion-ease),background 190ms ease,border-color 190ms ease,color 190ms ease,box-shadow 220ms ease}
.btn-orange:not(:disabled){position:relative;overflow:hidden;isolation:isolate}
.btn-orange:not(:disabled)::after{content:"";position:absolute;top:-35%;bottom:-35%;left:-45%;width:40%;background:linear-gradient(110deg,transparent,rgba(255,233,192,.35),transparent);transform:translate3d(-110%,0,0) skewX(-15deg);pointer-events:none;opacity:0}
.hero-actions .btn-orange:not(:disabled)::after{animation:archive-cta-energy 5.8s ease-in-out infinite;animation-delay:1s}
@keyframes archive-cta-energy{0%,52%{opacity:0;transform:translate3d(-110%,0,0) skewX(-15deg)}59%{opacity:.8}79%{opacity:.65}88%,100%{opacity:0;transform:translate3d(540%,0,0) skewX(-15deg)}}
.btn:active:not(:disabled){transform:translate3d(0,1px,0) scale(.98)}
.quantity-control button,.mode-switch button,.market-filters button,.wallet-option{transition:transform 170ms var(--motion-ease),background 180ms ease,border-color 180ms ease,color 180ms ease}
.quantity-control button:active:not(:disabled),.mode-switch button:active:not(:disabled),.market-filters button:active:not(:disabled),.wallet-option:active:not(:disabled){transform:scale(.97)}
.panel{position:relative;transition:border-color 250ms ease,box-shadow 250ms ease}
.panel::after{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 8%,rgba(255,171,124,.15) 28%,rgba(255,103,61,.95) 51%,transparent 83%);transform:translate3d(-110%,0,0);opacity:0;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .btn:hover:not(:disabled){transform:translate3d(0,-3px,0)}
 .btn-orange:hover:not(:disabled){box-shadow:0 4px 23px rgba(255,103,61,.24)}
 .btn-orange:not(:disabled):not(.hero-actions .btn):hover::after{animation:archive-cta-energy 1.1s ease-out;animation-delay:-.45s}
 .btn:active:hover:not(:disabled){transform:translate3d(0,-1px,0) scale(.98)}
 .panel:hover{border-color:#77533f;box-shadow:0 0 0 1px rgba(255,103,61,.07),0 12px 28px rgba(0,0,0,.16)}
 .panel:hover::after{animation:archive-panel-edge 1.25s var(--motion-ease)}
 .hero-art:hover{border-color:#8a5f46}
 .hero-art:hover::before{opacity:1}
 .main-nav a:hover::after{transform:scaleX(1);opacity:.65}
}
@keyframes archive-panel-edge{0%{opacity:0;transform:translate3d(-110%,0,0)}15%{opacity:1}85%{opacity:.8}100%{opacity:0;transform:translate3d(110%,0,0)}}

/* Modal readiness and application values retain their actual, existing semantics. */
.modal-back.open{animation:archive-modal-backdrop 220ms ease-out both}
.modal-back.open .modal{animation:archive-modal-enter 350ms var(--motion-ease) both}
@keyframes archive-modal-backdrop{from{opacity:0}to{opacity:1}}
@keyframes archive-modal-enter{from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.value-flash{animation:memory-value-flash 800ms ease-out}
@keyframes memory-value-flash{0%{color:#ffd1a3;background-color:rgba(255,103,61,.19)}100%{background-color:transparent}}

/* The scene layer is placed over the preview only, never over its controls. */
.forge-layout{position:relative}
#forgeScene{display:block;position:absolute;z-index:3;pointer-events:none;background:transparent;max-width:none}
#forgePreview::before,#forgePreview::after{content:"";position:absolute;z-index:2;inset:1px;border-radius:inherit;pointer-events:none;opacity:0}
#forgePreview::before{border:1px solid rgba(255,162,96,.95);background:radial-gradient(ellipse at 50% 46%,rgba(255,122,67,.1),transparent 65%)}
#forgePreview::after{inset:0;background:linear-gradient(110deg,transparent 21%,rgba(255,185,120,.04) 37%,rgba(255,139,77,.32) 49%,rgba(255,103,61,.06) 57%,transparent 72%);transform:translate3d(-105%,0,0)}
.forge-layout.is-reconstructing #forgePreview::before{animation:archive-reconstruct-frame 2400ms ease-out}
.forge-layout.is-reconstructing #forgePreview::after{animation:archive-reconstruct-sweep 2400ms var(--motion-ease)}
@keyframes archive-reconstruct-frame{0%,100%{opacity:0}12%{opacity:1}35%{opacity:.5}62%{opacity:.85}84%{opacity:.25}}
@keyframes archive-reconstruct-sweep{0%{opacity:0;transform:translate3d(-105%,0,0)}15%{opacity:.95}55%{opacity:.85}85%{opacity:.4}100%{opacity:0;transform:translate3d(105%,0,0)}}
/* Optional standalone energy node remains supported without being required. */
.forge-energy{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at 50% 45%,rgba(255,103,61,.22),transparent 65%)}
.forge-energy.active{animation:archive-forge-aura 2400ms ease-out}
@keyframes archive-forge-aura{0%,100%{opacity:0}24%{opacity:.95}70%{opacity:.35}}

/* Off-screen hero pause is local; hidden-tab pause is global. */
.hero-art.hero-paused>img,.hero-art.hero-paused .hero-core-glow,.hero-art.hero-paused .hero-core-glow::before,.hero-art.hero-paused .hero-core-glow::after,.hero-art.hero-paused .fragment-orbit,.hero-art.hero-paused .hero-scan,.hero-art.hero-paused .hero-halo{animation-play-state:paused}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}

/* Touch retains obvious breathing/orbits; only pointer tilt and heavy hover drop. */
@media(max-width:600px),(hover:none),(pointer:coarse){
 .hero-art{transform:none!important;transition:border-color 250ms ease;box-shadow:none}
 .hero-art::before{opacity:.6;background:radial-gradient(ellipse at 48% 45%,rgba(255,143,90,.07),transparent 70%)}
 .hero-art>img{animation-name:memory-image-breathe-touch;animation-duration:8s}
 .hero-core-glow{width:51%;animation-duration:3.2s}
 .hero-core-glow::before,.hero-core-glow::after{animation-duration:3.2s}
 .fragment-orbit:nth-child(n+4){display:none}
 .fragment-orbit:nth-child(1){left:8%;top:27%;width:38px;opacity:.72}
 .fragment-orbit:nth-child(2){left:81%;top:26%;width:29px;opacity:.58}
 .fragment-orbit:nth-child(3){left:12%;top:69%;width:25px;opacity:.5}
 .hero-art.scene-active .fragment-orbit:nth-child(n+3){display:none}
 .hero-art.scene-active .fragment-orbit:nth-child(1){opacity:.6}
 .hero-art.scene-active .fragment-orbit:nth-child(2){opacity:.5}
 .hero-scan{animation-duration:8.5s;opacity:.4}
 .panel:hover{box-shadow:none}
 .panel::after{height:1px}
 .hero-actions .btn-orange:not(:disabled)::after{animation-duration:5.8s}
}
@keyframes memory-image-breathe-touch{0%,100%{transform:translate3d(0,6px,0) rotate(-.4deg) scale(1.03)}50%{transform:translate3d(0,-8px,0) rotate(.45deg) scale(1.065)}}
@media(max-width:380px){.fragment-orbit:nth-child(n+3){display:none}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .motion-reveal,html.motion-ready .motion-reveal,html.motion-ready .motion-reveal:not(.is-visible),html.motion-ready .motion-reveal.is-visible,html.motion-ready .hero-entrance,html.motion-ready #heroTitle.hero-entrance,html.motion-ready #heroTitle.hero-entrance>span,.modal-back.open,.modal-back.open .modal{opacity:1!important;transform:none!important;clip-path:none!important}
 .hero-art,.hero-art>img{transform:none!important}
 .hero-core-glow{opacity:.3;transform:translate3d(-50%,-50%,0) scale(1)}
 .hero-core-glow::before,.hero-core-glow::after,.hero-scan,.hero-halo,.site-header::after,.protocol-metrics::after,.panel::after,.btn-orange::after,#forgePreview::before,#forgePreview::after,.forge-energy,.forge-energy.active{opacity:0!important;animation:none!important}
 .fragment-orbit{transform:none;opacity:.25}
 .memory-scene,#memoryScene,#forgeScene{display:none!important}
 .value-flash{background-color:transparent}
 .btn:hover:not(:disabled),.btn:active:not(:disabled),.btn:active:hover:not(:disabled),.quantity-control button:active:not(:disabled),.mode-switch button:active:not(:disabled),.market-filters button:active:not(:disabled),.wallet-option:active:not(:disabled){transform:none!important}
}
