/* ===== ETH-HALVION ANIMATION LAYER (load after style.css / theme.css) ===== */
:root{--an-e:cubic-bezier(.2,.8,.2,1);--an-pop:cubic-bezier(.34,1.56,.64,1)}
@property --ra{syntax:"<number>";inherits:false;initial-value:0}

/* ---------- scroll progress bar ---------- */
.an-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--eg),var(--eg2))}

/* ---------- 1. PAGE LOAD: curtain + hero entrance ---------- */
.an-pre{display:none;position:fixed;inset:0;z-index:200;place-items:center}
html.an-load .an-pre{display:grid}
.an-pre i{position:absolute;top:0;bottom:0;width:50.3%;background:#0A0906;transition:transform .95s cubic-bezier(.7,0,.2,1)}
.an-pre .a{left:0}.an-pre .b{right:0}
.an-pre .ln{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(#F3DFA2,#C8932B,#F3DFA2);box-shadow:0 0 26px 4px rgba(243,223,162,.5);transform:scaleY(0);transform-origin:top;animation:an-line 1s var(--an-e) forwards;transition:opacity .4s}
.an-pre .nm{position:relative;font:700 clamp(18px,3vw,30px)/1 var(--h);letter-spacing:.42em;padding-left:.42em;color:#F3DFA2;opacity:0;animation:an-fade .8s .35s forwards;transition:opacity .4s,letter-spacing .9s}
.an-pre.out .a{transform:translateX(-101%)}.an-pre.out .b{transform:translateX(101%)}
.an-pre.out .ln{opacity:0}.an-pre.out .nm{animation:none;opacity:0;letter-spacing:.9em}
@keyframes an-line{to{transform:scaleY(1)}}
@keyframes an-fade{to{opacity:1}}

html.js .hero h1{perspective:900px}
html.js .hero h1 span{transform-origin:50% 100%;transition:transform 1.2s var(--an-e),opacity 1s,filter 1s,color .5s}
html.js:not(.an-ready) .hero h1 span{opacity:0;transform:translateY(46px) rotateX(-75deg);filter:blur(8px)}
html.js .hero h1 span:nth-child(2){transition-delay:.14s,.14s,.14s,0s}
html.js .hero h1 span:nth-child(3){transition-delay:.28s,.28s,.28s,0s}
html.js .meta-top,html.js .hbar{transition:opacity 1s .6s var(--an-e),translate 1s .6s var(--an-e)}
html.js:not(.an-ready) .meta-top{opacity:0;translate:0 -20px}
html.js:not(.an-ready) .hbar{opacity:0;translate:0 30px}
html.js .scroll{transition:opacity 1s .9s}
html.js:not(.an-ready) .scroll{opacity:0}
html.js .art,html.js .rbv{transition:opacity 1.4s .2s,scale 1.6s .2s var(--an-e)}
html.js:not(.an-ready) .art,html.js:not(.an-ready) .rbv{opacity:0;scale:.86}
.hero h1 .o:hover{color:var(--tx)}

/* ---------- 2. HOVER EFFECTS ---------- */
.btn{transition:color .5s var(--e),translate .35s var(--an-e)}
.logo-img{transition:rotate .6s var(--an-pop),scale .6s var(--an-pop)}
.logo:hover .logo-img{rotate:-14deg;scale:1.12}
.vals li{transition:translate .45s var(--an-pop),background .3s,color .3s,border-color .3s,box-shadow .4s}
.vals li:hover{translate:0 -6px;background:linear-gradient(135deg,#F3DFA2,#C8932B);color:#0A0906;border-color:transparent;box-shadow:0 14px 28px -10px rgba(200,147,43,.6)}
.mono{transform-style:preserve-3d;will-change:transform}

/* ---------- 3. POP-UP / ENTRANCE ANIMATIONS (scroll-triggered) ---------- */
html.js [data-an]:not(.an-in){opacity:0}
[data-an].an-in{animation:an-pop .95s var(--an-pop) backwards;animation-delay:var(--d,0s)}
[data-an=left].an-in{animation-name:an-left;animation-timing-function:var(--an-e)}
[data-an=rise].an-in{animation-name:an-rise}
@keyframes an-pop{from{opacity:0;scale:.78;filter:blur(6px)}}
@keyframes an-left{from{opacity:0;translate:-60px 0}}
@keyframes an-rise{from{opacity:0;translate:0 26px;scale:.9}}

/* ---------- 4. FOUNDER: 3D card + storytelling ---------- */
.an-f{position:relative}
.an-fwb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.an-fw{position:absolute;left:0;top:50%;transform:translateY(-50%);font:700 clamp(120px,24vw,380px)/1 var(--h);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--eln);white-space:nowrap;user-select:none}
.an-f .wrap{position:relative;z-index:1}
.an-fg{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,7vw,120px);align-items:start;margin-top:64px}
.an-fs{position:sticky;top:110px;align-self:start;padding:18px}
.an-fc{position:relative;margin:0 auto;width:min(100%,440px);aspect-ratio:4/5;transform-style:preserve-3d;cursor:zoom-in;transition:transform .6s var(--an-e)}
.an-ring{position:absolute;inset:-14px;border-radius:32px;background:conic-gradient(from calc(var(--ra)*1deg),#F3DFA2,#C8932B,#7A4D08,#F3DFA2);transform:translateZ(-40px);opacity:.85;transition:--ra 1.1s var(--an-e)}
.an-fc[data-ch="1"]{--ra:90}.an-fc[data-ch="2"]{--ra:180}.an-fc[data-ch="3"]{--ra:270}
.an-fc::before,.an-fc::after{content:"";position:absolute;width:26px;height:26px;z-index:3;transform:translateZ(30px);pointer-events:none;transition:translate .6s var(--an-e)}
.an-fc::before{left:-26px;top:-26px;border-left:1px solid var(--eg2);border-top:1px solid var(--eg2)}
.an-fc::after{right:-26px;bottom:-26px;border-right:1px solid var(--eg2);border-bottom:1px solid var(--eg2)}
.an-fc:hover::before{translate:-8px -8px}.an-fc:hover::after{translate:8px 8px}
.an-fr{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3a2f15,#0c0a07);border:1px solid var(--eln)}
.an-fr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(10,9,6,.75))}
.an-img{position:absolute;inset:-8% 0}
.an-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;transition:scale 1.4s var(--an-e),filter 1s,object-position 1.4s var(--an-e)}
.an-img .ph{display:grid;place-items:center;width:100%;height:100%;font:700 90px/1 var(--h);color:var(--eg2)}
.an-fc[data-ch="1"] .an-img img{scale:1.1;filter:saturate(1.15)}
.an-fc[data-ch="2"] .an-img img{scale:1.2;object-position:50% 12%;filter:contrast(1.06)}
.an-fc[data-ch="3"] .an-img img{scale:1.06;filter:saturate(1.2) brightness(1.05)}
.an-fc:hover .an-img img{scale:1.12}
.an-chip{position:absolute;left:-22px;bottom:34px;z-index:4;display:grid;gap:4px;padding:12px 18px;border-radius:14px;color:#F3DFA2;background:rgba(10,9,6,.72);border:1px solid rgba(243,223,162,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(70px);box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
.an-chip b{font:700 15px/1 var(--h);letter-spacing:.14em;text-transform:uppercase}
.an-chip span{font:400 11px/1.3 var(--m);letter-spacing:.12em;color:rgba(247,242,231,.75)}
.an-chip span.sw{animation:an-sw .6s var(--an-e)}
@keyframes an-sw{from{opacity:0;translate:0 8px}}
.an-zoom{position:absolute;right:14px;top:14px;z-index:4;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(243,223,162,.4);background:rgba(10,9,6,.55);color:#F3DFA2;cursor:pointer;transform:translateZ(60px);transition:background .3s,color .3s,scale .4s var(--an-pop)}
.an-zoom:hover,.an-zoom:focus-visible{background:#F3DFA2;color:#0A0906;scale:1.1}
.an-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.an-story{position:relative;--sp:0;padding-left:clamp(28px,4vw,56px)}
.an-story::before,.an-story::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--eln)}
.an-story::after{background:linear-gradient(var(--eg2),var(--eg));transform-origin:top;transform:scaleY(var(--sp));box-shadow:0 0 12px rgba(243,223,162,.6)}
.an-st{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:18px;opacity:.2;filter:blur(1.5px);translate:0 24px;transition:opacity .7s,filter .7s,translate .9s var(--an-e)}
.an-st::before{content:"";position:absolute;left:calc(clamp(28px,4vw,56px)*-1 - 5px);top:50%;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--eg2);transition:background .5s,box-shadow .5s,scale .5s var(--an-pop)}
.an-st.on{opacity:1;filter:none;translate:none}
.an-st.on::before{background:var(--eg2);box-shadow:0 0 16px 3px rgba(243,223,162,.7);scale:1.5}
.an-st .k{font:400 12px/1 var(--m);letter-spacing:.2em;color:var(--eg)}
.an-st h3{font-size:clamp(30px,4.2vw,60px);line-height:1;color:var(--etx)}
.an-st h3 .w{display:inline-block;opacity:0;translate:0 .7em;rotate:x -50deg;transition:opacity .7s,translate .8s var(--an-e),rotate .8s var(--an-e);transition-delay:calc(var(--i)*70ms)}
.an-st.on h3 .w{opacity:1;translate:none;rotate:none}
.an-st p{margin:0;max-width:46ch;font-size:18px;color:var(--emut)}
.an-st .btn{align-self:flex-start;margin-top:10px}

/* ---------- 5. POP-UP DIALOG (founder photo) ---------- */
.an-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;perspective:1200px}
.an-modal[hidden]{display:none}
.an-bk{position:absolute;inset:0;background:rgba(5,4,2,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s}
.an-mc{position:relative;width:min(92vw,500px);max-height:92svh;overflow:auto;border-radius:26px;background:var(--surf);border:1px solid var(--eln);box-shadow:0 50px 120px -20px rgba(0,0,0,.8),0 0 80px rgba(200,147,43,.2);opacity:0;transform:translateY(70px) rotateX(-28deg) scale(.6);transition:transform .75s var(--an-pop),opacity .4s}
.an-modal.o .an-bk{opacity:1}
.an-modal.o .an-mc{opacity:1;transform:none}
.an-mimg{aspect-ratio:4/5;background:#15120b}
.an-mimg img,.an-mimg .ph{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:grid;place-items:center;font:700 110px/1 var(--h);color:var(--eg2)}
.an-mcap{display:grid;gap:6px;padding:18px 24px 22px;color:var(--etx)}
.an-mcap b{font:700 16px/1 var(--h);letter-spacing:.14em;text-transform:uppercase}
.an-mcap span{font:400 12px/1.4 var(--m);letter-spacing:.1em;color:var(--emut)}
.an-x{position:absolute;right:10px;top:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,223,162,.4);background:rgba(10,9,6,.6);color:#F3DFA2;font-size:16px;cursor:pointer;transition:background .3s,color .3s,rotate .5s var(--an-pop)}
.an-x:hover,.an-x:focus-visible{background:#F3DFA2;color:#0A0906;rotate:90deg}

/* ---------- 3D hero (mouse driven, set from anim.js) ---------- */
.rbv-video,.rbv-fb{transform:perspective(900px) rotateY(calc(var(--hx,0)*12deg)) rotateX(calc(var(--hy,0)*-9deg));transition:transform .5s var(--an-e)}
.art svg{transform:perspective(1000px) rotateY(calc(var(--hx,0)*-7deg)) rotateX(calc(var(--hy,0)*5deg));transition:transform .6s var(--an-e)}

/* ---------- responsive ---------- */
@media(max-width:900px){
.an-fg{grid-template-columns:1fr;margin-top:40px}
.an-fs{position:relative;top:auto;padding:14px}
.an-fc{width:min(78vw,360px)}
.an-chip{left:-8px}
.an-st{min-height:auto;padding:36px 0;opacity:1;filter:none;translate:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
.an-pre{display:none!important}
html.js [data-an]:not(.an-in){opacity:1}
[data-an].an-in{animation:none}
.an-st{opacity:1;filter:none;translate:none}
.an-st h3 .w{opacity:1;translate:none;rotate:none;transition:none}
.an-st::before{transition:none}
.an-mc,.an-bk,.an-fc,.an-ring,.an-img img{transition:none}
.an-fc{transform:none!important}
.an-bar{display:none}
}