/* ==========================================================================
   Cinematic intros — one per page. Code-only animation of the owner's logo art.
   ========================================================================== */
html.intro-pending body{overflow:hidden}
html.intro-pending body::before{content:"";position:fixed;inset:0;background:#070605;z-index:990}

.intro{position:fixed;inset:0;z-index:1000;background:#070605;overflow:hidden;display:grid;place-items:center;color:var(--ivory);cursor:pointer}
.intro canvas.intro-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.intro .stage{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center}
.intro-skip{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);z-index:5;background:transparent;border:1px solid rgba(201,162,92,.45);color:var(--ivory-dim);font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;padding:.8rem 1.2rem;cursor:pointer;transition:color .3s,border-color .3s,background .3s;opacity:0;animation:i-fade .8s .5s forwards}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--black);background:var(--gold);border-color:var(--gold)}
.intro-chapter{position:absolute;left:clamp(1rem,3vw,2.5rem);top:clamp(1rem,3vw,2.5rem);z-index:5;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);opacity:0;animation:i-fade 1s .3s forwards}
.intro-chapter b{font-family:var(--f-head);font-weight:400;color:var(--gold);letter-spacing:.2em;margin-right:.8em}
.intro-progress{position:absolute;left:0;bottom:0;height:1px;width:100%;z-index:5;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));transform:scaleX(0);transform-origin:left;animation:i-progress var(--dur,4.5s) linear forwards}
.intro.is-leaving{pointer-events:none}
.intro.is-leaving .intro-skip,.intro.is-leaving .intro-chapter,.intro.is-leaving .intro-progress{opacity:0!important;transition:opacity .3s}

.i-bust{position:relative;-webkit-user-select:none;user-select:none}
.i-bust img{width:100%;display:block}
.i-sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:url(../img/bust.webp);mask-image:url(../img/bust.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(100deg,transparent 30%,rgba(255,240,200,.85) 47%,rgba(255,226,160,.25) 52%,transparent 66%);background-size:320% 100%;background-position:130% 0;mix-blend-mode:overlay}
.i-letters span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px)}
.i-letters.go span{animation:i-letter .9s var(--ease) forwards}
.i-hair{height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-light) 50%,var(--gold) 70%,transparent);transform:scaleX(0)}

@keyframes i-fade{to{opacity:1}}
@keyframes i-progress{to{transform:scaleX(1)}}
@keyframes i-letter{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes i-sheen{0%{background-position:130% 0}100%{background-position:-40% 0}}
@keyframes i-draw{to{transform:scaleX(1)}}
@keyframes i-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- I. HOME — The Unveiling ---------- */
.intro--home .i-bust{width:min(56vw,620px);margin-top:-8vh;opacity:0;transform:scale(1.22);filter:brightness(.15) blur(10px);animation:home-bust 4.6s cubic-bezier(.2,.7,.2,1) forwards}
.intro--home .i-sheen{animation:i-sheen 1.8s 1.7s var(--ease) forwards}
.intro--home .i-glow{position:absolute;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle,rgba(214,160,80,.32),transparent 65%);opacity:0;animation:i-fade 2s .4s forwards;margin-top:-14vh}
.intro--home .i-title{position:absolute;left:0;right:0;bottom:15vh;text-align:center}
.intro--home .i-title .i-hair{width:min(70vw,720px);margin:0 auto 1.6rem;animation:i-draw 1.4s 2s var(--ease-lux) forwards}
.intro--home .i-title h2{font-family:var(--f-logo);font-weight:500;font-size:clamp(2.2rem,6vw,5.2rem);letter-spacing:.24em;padding-left:.24em;line-height:1}
.intro--home .i-title p{margin:1.2rem 0 0;font-family:var(--f-logo);font-style:italic;font-size:clamp(1rem,1.6vw,1.3rem);color:var(--gold-light);opacity:0;animation:i-rise 1s 3.4s var(--ease) forwards}
@keyframes home-bust{0%{opacity:0;transform:scale(1.22);filter:brightness(.15) blur(10px)}45%{opacity:1;filter:brightness(1.05) blur(0)}100%{opacity:1;transform:scale(1.02);filter:brightness(1) blur(0)}}
.intro--home.is-leaving{animation:home-out 1s var(--ease-lux) forwards}
@keyframes home-out{to{clip-path:inset(0 0 100% 0)}}
.intro--home{clip-path:inset(0 0 0 0)}

/* ---------- II. BIOGRAPHY — The Inscription ---------- */
.intro--about{background:radial-gradient(120% 80% at 30% 50%,#1b1814,#090807 70%)}
.intro--about::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
.intro--about .rake{position:absolute;inset:-20%;z-index:3;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,226,170,.12) 48%,rgba(255,240,210,.22) 50%,rgba(255,226,170,.12) 52%,transparent 65%);transform:translateX(-70%);animation:rake 3.4s .4s cubic-bezier(.45,.05,.3,1) forwards;mix-blend-mode:screen}
@keyframes rake{to{transform:translateX(70%)}}
.intro--about .i-bust{position:absolute;right:-4vw;bottom:-2vh;width:min(62vw,760px);opacity:0;filter:brightness(.25) sepia(.2);animation:about-bust 4.5s ease-out forwards}
@keyframes about-bust{0%{opacity:0;transform:translateX(4%)}35%{opacity:.75;filter:brightness(.5)}60%{filter:brightness(1.05)}100%{opacity:.85;transform:none;filter:brightness(.8)}}
.intro--about .i-sheen{animation:i-sheen 2.2s 1s var(--ease) forwards}
.intro--about .tablet{position:relative;z-index:4;text-align:left;width:min(88vw,1100px);padding-left:clamp(0rem,4vw,4rem)}
.intro--about .place{font-family:var(--f-deco);font-size:clamp(.9rem,1.5vw,1.2rem);letter-spacing:.42em;color:var(--gold);opacity:0;animation:i-rise 1s .5s forwards}
.intro--about .numeral{font-family:var(--f-deco);font-size:clamp(5rem,15vw,13rem);line-height:.95;letter-spacing:.06em;color:#2a241c;text-shadow:-1px -1px 0 rgba(0,0,0,.85),1px 1px 0 rgba(255,225,170,.28);clip-path:inset(0 100% 0 0);animation:chisel 1.6s .9s steps(24) forwards}
@keyframes chisel{to{clip-path:inset(0 0 0 0)}}
.intro--about .motto{font-family:var(--f-head);font-size:clamp(1.6rem,4vw,3.4rem);letter-spacing:.14em;margin-top:1.2rem}
.intro--about .caption{margin-top:1.4rem;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);opacity:0;animation:i-rise 1s 3.3s forwards}
.intro--about.is-leaving{animation:about-out .9s ease forwards}
@keyframes about-out{to{opacity:0;transform:scale(1.04)}}

/* ---------- III. SERVICES — The Atelier ---------- */
.intro--services{background:radial-gradient(90% 90% at 50% 50%,#12110f,#060505 75%)}
.intro--services .grid{position:absolute;inset:0;z-index:0;opacity:0;background-image:linear-gradient(rgba(201,162,92,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,92,.07) 1px,transparent 1px);background-size:48px 48px;animation:i-fade 1.2s .1s forwards;mask-image:radial-gradient(circle,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 75%)}
.intro--services svg.arch{width:min(78vw,620px);height:auto;color:var(--gold);overflow:visible;margin-top:-10vh}
.intro--services svg.arch .s{fill:none;stroke:currentColor;stroke-width:1.1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:svg-draw 2.4s var(--ease-lux) forwards}
.intro--services svg.arch .t{stroke-width:.6;opacity:.6}
@keyframes svg-draw{to{stroke-dashoffset:0}}
.intro--services .i-bust{position:absolute;width:min(30vw,300px);left:50%;top:50%;transform:translate(-50%,-78%);opacity:0;animation:svc-bust 2.2s 2s ease forwards;mask-image:radial-gradient(ellipse 60% 70% at 50% 45%,#000 55%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 45%,#000 55%,transparent 75%)}
@keyframes svc-bust{to{opacity:.95}}
.intro--services .label{position:absolute;bottom:13vh;left:0;right:0;text-align:center}
.intro--services .label h2{font-family:var(--f-head);font-size:clamp(1.8rem,4.6vw,3.8rem);letter-spacing:.08em}
.intro--services .numerals{display:flex;justify-content:center;gap:3rem;margin-top:1rem;font-family:var(--f-deco);color:var(--gold);letter-spacing:.2em}
.intro--services .numerals span{opacity:0;animation:i-rise .8s forwards}
.intro--services .numerals span:nth-child(1){animation-delay:3s}.intro--services .numerals span:nth-child(2){animation-delay:3.25s}.intro--services .numerals span:nth-child(3){animation-delay:3.5s}
.intro--services.is-leaving{animation:svc-out .9s var(--ease-lux) forwards}
@keyframes svc-out{to{opacity:0;filter:blur(6px);transform:scale(1.15)}}

/* ---------- IV. COLLECTIONS — The Aureus ---------- */
.intro--collections{background:radial-gradient(60% 60% at 50% 45%,#1c160d,#060504 75%);perspective:1200px}
.intro--collections .coin-wrap{position:relative;width:min(62vmin,460px);aspect-ratio:1;margin-top:-6vh;transform-style:preserve-3d;animation:coin-in 2.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes coin-in{0%{transform:rotateY(-540deg) scale(.4);opacity:0;filter:brightness(2.4)}60%{opacity:1}100%{transform:rotateY(0) scale(1);opacity:1;filter:brightness(1)}}
.intro--collections .coin{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e2a6,#c9a25c 30%,#8a6328 62%,#5a3d16 100%);box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 6px rgba(90,61,22,.6),inset 0 0 30px rgba(0,0,0,.45)}
.intro--collections .coin-field{position:absolute;inset:13%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#3d2a10,#120d06 80%);box-shadow:inset 0 0 0 1px rgba(255,230,170,.5),inset 0 6px 20px rgba(0,0,0,.6)}
.intro--collections .coin-field img{position:absolute;width:122%;max-width:none;left:-11%;bottom:-6%}
.intro--collections svg.legend{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.intro--collections svg.legend text{font-family:var(--f-deco);font-size:6.2px;letter-spacing:1.6px;fill:#3a2508}
.intro--collections svg.legend .beads circle{fill:#6b4a1a}
.intro--collections .coin-glint{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,250,230,.75) 48%,transparent 60%);background-size:300% 100%;background-position:130% 0;mix-blend-mode:overlay;animation:i-sheen 1.4s 2.3s ease forwards}
.intro--collections .placards{position:absolute;left:0;right:0;bottom:9vh;display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2.6rem;padding:0 1rem}
.intro--collections .placards span{font-family:var(--f-head);font-size:clamp(.85rem,1.4vw,1.1rem);letter-spacing:.14em;opacity:0;animation:i-rise .8s forwards}
.intro--collections .placards b{font-family:var(--f-deco);font-weight:400;color:var(--gold);margin-right:.6em}
.intro--collections .placards span:nth-child(1){animation-delay:2.6s}.intro--collections .placards span:nth-child(2){animation-delay:2.85s}.intro--collections .placards span:nth-child(3){animation-delay:3.1s}.intro--collections .placards span:nth-child(4){animation-delay:3.35s}
.intro--collections .heading{position:absolute;top:12vh;left:0;right:0;text-align:center;font-family:var(--f-head);font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.3em;padding-left:.3em}
.intro--collections.is-leaving .coin-wrap{animation:coin-out .9s var(--ease-lux) forwards}
.intro--collections.is-leaving{animation:about-out .9s .1s ease forwards}
@keyframes coin-out{to{transform:scale(3.5);opacity:0}}

/* ---------- V. THE DIGITAL STEWARD — The Vigil ---------- */
.intro--care{background:radial-gradient(70% 70% at 50% 60%,#14100b,#050404 75%)}
.intro--care .dial{position:relative;width:min(84vmin,720px);aspect-ratio:2/1.25;margin-top:-4vh}
.intro--care .dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--gold)}
.intro--care .dial .arc{fill:none;stroke:currentColor;stroke-width:.8;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:svg-draw 1.6s .2s var(--ease-lux) forwards}
.intro--care .dial .tick{stroke:currentColor;stroke-width:.6;opacity:0;animation:i-fade .4s forwards}
.intro--care .dial text{font-family:var(--f-deco);font-size:13px;fill:var(--gold-light);text-anchor:middle;dominant-baseline:middle;opacity:0;animation:i-fade .5s forwards}
.intro--care .gnomon{transform-origin:360px 400px;transform:rotate(-90deg);animation:gnomon 2.8s 1s cubic-bezier(.45,.05,.3,1) forwards}
.intro--care .gnomon line{stroke:url(#gshade);stroke-width:2}
@keyframes gnomon{to{transform:rotate(90deg)}}
.intro--care .i-bust{position:absolute;left:50%;bottom:0;width:58%;transform:translateX(-50%);opacity:0;animation:care-bust 3s .6s ease forwards}
@keyframes care-bust{0%{opacity:0;filter:brightness(.2)}100%{opacity:1;filter:brightness(.95)}}
.intro--care .i-sheen{animation:i-sheen 2.8s 1s cubic-bezier(.45,.05,.3,1) forwards}
.intro--care .words{position:absolute;left:0;right:0;bottom:10vh;text-align:center}
.intro--care .words p{font-family:var(--f-logo);font-style:italic;font-size:clamp(1.1rem,2vw,1.6rem);color:var(--gold-light);margin:0 0 .6rem;opacity:0;animation:i-rise 1s 2.6s forwards}
.intro--care .words h2{font-family:var(--f-head);font-size:clamp(1.8rem,4.4vw,3.6rem);letter-spacing:.1em}
.intro--care.is-leaving{animation:care-out 1s ease forwards}
@keyframes care-out{to{opacity:0;filter:brightness(2) blur(4px)}}

/* ---------- VI. COMMISSION — The Seal ---------- */
.intro--contact{background:radial-gradient(70% 60% at 50% 50%,#17110f,#060505 75%)}
.intro--contact .letter{position:relative;width:min(82vw,560px);aspect-ratio:1.45/1;border:1px solid rgba(201,162,92,.5);background:linear-gradient(160deg,#1d1915,#100e0c);box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 0 0 10px #12100d,inset 0 0 0 11px rgba(201,162,92,.25);display:grid;place-items:center;transform:translateY(40vh) rotate(-4deg);opacity:0;animation:letter-in 1.3s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes letter-in{to{transform:none;opacity:1}}
.intro--contact .letter .i-bust{position:absolute;width:44%;top:9%;left:50%;transform:translateX(-50%);opacity:.0;animation:i-fade 1.2s 1.2s forwards;filter:sepia(.3) brightness(.7)}
.intro--contact .letter .i-bust img{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.intro--contact .seal{position:absolute;left:50%;bottom:-38px;width:118px;height:118px;margin-left:-59px;z-index:3;opacity:0;transform:scale(2.4) translateY(-30px);animation:seal-stamp .55s 1.9s cubic-bezier(.5,0,.75,0) forwards}
@keyframes seal-stamp{0%{opacity:0;transform:scale(2.4) translateY(-30px)}70%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
.intro--contact .seal svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.intro--contact .seal text{font-family:var(--f-deco);font-weight:700;font-size:30px;fill:#2d0f25;text-anchor:middle;dominant-baseline:central}
.intro--contact .shock{position:absolute;left:50%;bottom:-38px;width:118px;height:118px;margin-left:-59px;border-radius:50%;border:1px solid var(--gold-light);opacity:0;animation:shock 1s 2.4s ease-out forwards}
@keyframes shock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.intro--contact .words{position:absolute;left:0;right:0;bottom:9vh;text-align:center}
.intro--contact .words h2{font-family:var(--f-head);font-size:clamp(1.8rem,4.4vw,3.6rem);letter-spacing:.06em}
.intro--contact .words p{font-family:var(--f-logo);font-style:italic;color:var(--gold-light);margin:.6rem 0 0;opacity:0;animation:i-rise 1s 3.4s forwards}
.intro--contact.is-leaving .letter{animation:letter-out .8s var(--ease-lux) forwards}
.intro--contact.is-leaving{animation:about-out .9s .15s ease forwards}
@keyframes letter-out{to{transform:translateY(-30vh) scale(.9);opacity:0}}

@media (max-width:700px){
  .intro--home .i-bust{width:88vw;margin-top:-18vh}
  .intro--about .i-bust{width:110vw;right:-30vw;opacity:.5}
  .intro--services .numerals{gap:1.6rem}
}

/* ---- layout refinements ---- */
.intro--home .i-bust{margin-top:-16vh;width:min(50vw,560px)}
.intro--home .i-glow{margin-top:-24vh}
.intro--home .i-title{bottom:9vh}
.intro--about .numeral{color:#4a3f30;text-shadow:-1px -1px 0 rgba(0,0,0,.9),1px 1px 0 rgba(255,225,170,.45),0 0 40px rgba(201,162,92,.15)}
.intro--about .i-bust{right:-8vw;width:min(56vw,700px)}
.intro--collections .coin-wrap{width:min(50vmin,400px);margin-top:-4vh}
.intro--collections .heading{top:7vh}
.intro--collections .placards{bottom:6vh}
.intro--collections svg.legend text{font-size:4.6px;letter-spacing:1.1px}
.intro--care .dial{margin-top:-16vh}
.intro--care .words{bottom:6vh}
.intro--contact .letter{margin-top:-14vh}
.intro--contact .words{bottom:5vh}