/* =========================================================
   MIRAS · میراث — Sterling Silver Scroll Cinema
   Stylesheet
   1.  Design tokens
   2.  Base / reset
   3.  Utilities
   4.  Fixed HUD · rail · hint
   5.  Stage (pinned) · camera world · atmosphere
   6.  Scenes — shared
   7.  Hero (Scene 1)
   8.  Scene-specific modules
   9.  Footer
   10. Reduced-motion fallback
   11. Responsive
   ========================================================= */

/* ============ 1. DESIGN TOKENS ============
   True deep-black luxury monochrome. Backgrounds are near-black (never flat
   #000) so soft gradients can still read; sterling silver is the only "hue".
   Text pairs verified on #050505: F5F5F5 ≈ 19:1, B8B8B8 ≈ 9:1 (AAA).        */
:root{
  /* --- Refined deep-black surface scale (semantic aliases) --- */
  --bg:#050505; --bg-secondary:#080808; --surface:#0B0B0B; --card:#121212;
  --border:rgba(255,255,255,.08);
  --text-primary:#F5F5F5; --text-secondary:#B8B8B8;

  /* Legacy token names remapped onto the deep-black scale (layouts unchanged) */
  --ink-900:#050505; --ink-800:#0B0B0B; --ink-700:#121212; --umber:#161616;
  /* Neutral silver-white text ramp (was warm ivory → now monochrome) */
  --silk-100:#F5F5F5; --silk-200:#E8E8E8; --silk-300:#B8B8B8; --skin:#9A9A9A;
  /* Sterling silver — the sole focus; kept bright & cool for strong separation */
  --silver-hi:#F1F4F8; --silver:#C7CBD1; --silver-lo:#83868C; --pewter:#3C4046;
  /* Accent = polished platinum silver (monochrome; replaces the champagne gold) */
  --glow:#D8DCE2; --glow-soft:rgba(216,220,226,.10);

  --font-display:'Cormorant',Georgia,serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-fa:'Vazirmatn','Montserrat',Tahoma,system-ui,sans-serif;
  --track-wide:.46em; --track-mid:.26em;
}

/* ============ 2. BASE / RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink-900);color:var(--silk-200);
  font-family:var(--font-body);font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Film grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ 3. UTILITIES ============ */
.serif{font-family:var(--font-display)}
.persian{font-family:var(--font-display);direction:rtl}
.eyebrow{
  font-size:clamp(.64rem,.58rem+.2vw,.76rem);font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--silver-lo);
}

/* ============ 4. FIXED HUD · RAIL · HINT ============ */
.hud{position:fixed;inset:0;z-index:6000;pointer-events:none}
.hud-top{
  position:absolute;top:0;left:0;right:0;display:flex;
  justify-content:space-between;align-items:flex-start;
  padding:1.6rem clamp(1.4rem,4vw,3rem);
}
.hud-brand{line-height:1;pointer-events:auto;text-decoration:none;display:block}

/* Top menu. The film owns the whole viewport, so the nav floats on it rather than
   sitting in a bar: no background, no border — only the links, lit like the mark. */
.hud-nav{
  display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem);
  pointer-events:auto;padding-top:.35rem;
}
.hud-nav a{
  position:relative;text-decoration:none;color:var(--silver-lo);
  font-family:var(--font-fa,var(--font-body));font-size:.86rem;font-weight:300;
  letter-spacing:0;   /* Persian is cursive — tracking prises the words apart */
  transition:color .35s ease;
}
.hud-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-.42rem;height:1px;
  background:var(--glow,var(--silk-100));transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.hud-nav a:hover,.hud-nav a:focus-visible{color:var(--silk-100)}
.hud-nav a:hover::after,.hud-nav a:focus-visible::after{transform:scaleX(1)}
/* The film runs bright in places, so the top strip gets a scrim rather than a bar —
   enough to hold the links legible without drawing a line across the frame. */
.hud-top::before{
  content:'';position:absolute;inset:0 0 auto;height:170%;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
}
@media (max-width:860px){
  .hud-top{padding:1.1rem 1.1rem}
  /* The film's bar carries five links plus the mark, and they do not fit a phone
     together — the row ran under MIRAS. It folds into the same sheet the storefront
     uses, so the site has one mobile menu rather than two. */
  .hud .navtoggle{
    display:flex; pointer-events:auto;
    position:fixed; top:1.05rem; inset-inline-end:1.05rem; z-index:3;
  }
  .hud .navtoggle-cb{
    display:block; position:fixed; top:1.05rem; inset-inline-end:1.05rem;
    width:42px; height:42px; margin:0; opacity:0; z-index:4; cursor:pointer;
    pointer-events:auto;
  }
  .hud-nav{
    /* Offset, not padding. max-height resolves against the CONTENT box here, so a
       4.6rem padding-top survived max-height:0 and left a 74px invisible slab
       hanging under the bar, catching taps. */
    position:fixed; top:4.6rem; inset-inline:0; padding:0;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; opacity:0;
    background:#08080A; pointer-events:auto;
    transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .navtoggle-cb:checked ~ .hud-nav{
    max-height:min(74vh,30rem); opacity:1;
    border-bottom:1px solid rgba(230,232,236,.12);
  }
  .hud-nav a{
    padding:1.05rem 1.4rem; font-size:1rem;
    border-top:1px solid rgba(230,232,236,.06);
  }
  .hud-nav a::after{ display:none }
  .hud-brand .mark{font-size:1.15rem;letter-spacing:.26em;text-indent:.26em}
  .hud-brand .sub{display:none}
}
.hud-brand .mark{
  font-family:var(--font-display);font-size:1.5rem;font-weight:500;
  letter-spacing:.34em;color:var(--silk-100);text-indent:.34em;
}
.hud-brand .sub{
  font-size:.58rem;letter-spacing:.5em;color:var(--silver-lo);
  text-transform:uppercase;margin-top:.35rem;text-indent:.5em;
}
/* The scene name, the ۰۱ / ۰۸ counter and the vertical progress rail used to live
   here. They were a film editor's chrome, and they told the viewer exactly how much
   of the story was left — which turns wonder into waiting. Deleted, along with the
   markup that fed them. The mark is the only thing that stays on screen. */

/* ---- Bottom scroll cue ----
   The hairline version was tasteful and invisible: on a full-bleed macro plate a 1px
   rail simply disappears into the filigree. This one is a real target — a ringed
   chevron that pulses, over its own scrim — and it is a button, so the gesture it
   asks for can also just be clicked. */
.hint{
  position:fixed;bottom:clamp(1.6rem,3.4vh,2.6rem);left:50%;transform:translateX(-50%);
  z-index:6000;display:flex;flex-direction:column;align-items:center;gap:.85rem;
  pointer-events:auto;cursor:pointer;transition:opacity .4s;
  background:none;border:0;padding:.4rem 1rem;font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.hint::before{
  content:'';position:absolute;left:50%;bottom:-2.5rem;transform:translateX(-50%);
  width:300px;height:230px;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 74%,rgba(3,3,5,.72),rgba(3,3,5,.34) 56%,transparent 76%);
}
.hint-label{
  font-family:var(--font-fa,var(--font-body));font-size:.82rem;font-weight:300;
  letter-spacing:0;color:var(--silk-100);text-shadow:0 1px 18px rgba(0,0,0,.8);
}
.hint-ring{
  position:relative;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(230,232,236,.5);
  background:rgba(6,7,9,.42);backdrop-filter:blur(3px);
  transition:border-color .35s ease,background .35s ease,transform .35s ease;
}
/* A halo that expands and dies — the "something is happening here" signal, kept slow
   enough (2.6s) that it reads as breathing rather than blinking. */
.hint-ring::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--glow);animation:hintPulse 2.6s ease-out infinite;
}
@keyframes hintPulse{
  0%{transform:scale(1);opacity:.65}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.hint .chev{
  width:20px;height:20px;color:var(--silk-100);
  animation:hintNod 2.6s ease-in-out infinite;
}
@keyframes hintNod{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.hint:hover .hint-ring,.hint:focus-visible .hint-ring{
  border-color:var(--glow);background:rgba(216,220,226,.14);transform:translateY(3px);
}
/* Storefront pages toggle a class instead of an inline opacity (the cinema drives
   its cue from the scroll timeline, which owns the style attribute). */
.hint.gone{opacity:0;pointer-events:none}
.hint:focus-visible{outline:none}
.hint:focus-visible .hint-ring{box-shadow:0 0 0 3px rgba(216,220,226,.22)}
@media (prefers-reduced-motion:reduce){
  .hint .chev,.hint-ring::after{animation:none}
}

/* ---- Act 0 · the opening title, inside #sc-origin so it fades with the scene ---- */
.origin-copy{
  /* Optical centre, not geometric — sitting a little above the middle keeps the
     title off the bright ridge and leaves the whole lower third to the scroll cue. */
  position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 1.5rem;pointer-events:none;
}
/* The veil only closes in at t≈5 — until then the title lands on bright filigree and
   is unreadable. A soft plate under the lower third carries both the copy and the
   scroll cue, and is wide enough that no edge is visible. */
.origin-copy::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(160vw,1500px);height:32rem;z-index:-1;
  background:radial-gradient(52% 50% at 50% 52%,rgba(4,4,6,.78),rgba(4,4,6,.42) 58%,transparent 78%);
}
.origin-eyebrow{
  font-family:var(--font-fa,var(--font-body));font-size:.72rem;font-weight:300;
  color:var(--silver-lo);margin-bottom:1rem;
}
.origin-title{
  font-family:var(--font-display);font-size:clamp(3.2rem,10vw,7rem);font-weight:300;
  line-height:.95;color:var(--silk-100);margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.origin-lede{
  font-family:var(--font-fa,var(--font-body));font-weight:300;
  font-size:clamp(.92rem,1.4vw,1.1rem);color:var(--silk-200,var(--silver));
  margin:1.1rem 0 0;max-width:34ch;line-height:1.9;
}
@media (max-width:640px){
  .origin-copy{top:44%}
  .origin-lede{font-size:.88rem}
}

/* ============ 5. STAGE (pinned) · CAMERA WORLD · ATMOSPHERE ============ */
.stage-wrap{position:relative}
.stage{
  height:100vh;height:100dvh;overflow:hidden;position:relative;perspective:1400px;
  background:
    linear-gradient(118deg,transparent 42%,rgba(228,231,238,.028) 49%,transparent 57%),
    radial-gradient(46% 32% at 50% -6%,rgba(226,230,238,.09),transparent 72%),
    radial-gradient(40% 34% at 20% 6%,rgba(190,197,208,.045),transparent 74%),
    radial-gradient(44% 40% at 85% 84%,rgba(206,214,228,.035),transparent 72%),
    radial-gradient(125% 95% at 50% 36%,#121212,#0a0a0a 58%,#050505),
    var(--bg);
}

/* Camera world */
.world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

/* Ambient rotating light + drifting glow (scroll-driven) */
.ambient{
  position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax;
  z-index:0;pointer-events:none;opacity:.5;will-change:transform;
  background:conic-gradient(from 0deg,transparent,rgba(220,224,231,.055),transparent 26%,
    rgba(210,216,226,.03),transparent 52%,rgba(220,224,231,.05),transparent 78%,transparent);
}
.glow{
  position:absolute;left:40%;top:38%;width:60vw;height:60vw;margin:-30vw 0 0 -30vw;
  z-index:0;pointer-events:none;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(224,228,235,.075),transparent 62%);filter:blur(36px);
}
.vignette{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 44%,transparent 36%,rgba(5,5,6,.9));
}

/* Specular sparks (positions driven by scroll) */
.spark{
  position:absolute;border-radius:50%;background:var(--silver-hi);z-index:2;
  box-shadow:0 0 12px 2px rgba(242,244,247,.7);will-change:transform;pointer-events:none;
}

/* ============ 6. SCENES — SHARED ============ */
.scene{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity,filter;transform-origin:50% 50%;padding:0 6vw;
}
/* Every act except the opening frame starts hidden and is brought in by the master
   timeline. #sc-origin is the first thing the viewer sees, so it alone starts lit. */
#sc-hero,#sc-inheritance,#sc-cta{opacity:0}
/* The exhibition shares the frame with the floating ring rather than replacing it,
   so it sits above #sc-story2 (z-index 4) and stays click-through except on the
   pieces themselves. */
/* Only live while the act is on screen — an invisible layer must not sit over the
   rest of the film catching clicks. JS adds .open for the duration. */
.exh-field.open .exh{pointer-events:auto}

.obj{
  width:min(46vh,420px);
  filter:drop-shadow(0 55px 78px rgba(0,0,0,.82)) drop-shadow(0 0 30px rgba(216,221,230,.05));
  will-change:transform;
}

.scene .copy{max-width:min(46vw,640px)}
.scene h1,.scene h2{
  font-family:var(--font-display);font-weight:300;line-height:1.04;
  letter-spacing:-.025em;color:var(--silk-100);
}
.scene h1{font-size:clamp(3rem,9vw,8.5rem)}
.scene h1 em,.scene h2 em{font-style:italic;color:var(--glow)}
.scene h2{font-size:clamp(2.2rem,6vw,5rem)}
.scene .lede{
  color:var(--silk-300);font-size:clamp(1rem,1.4vw,1.2rem);margin-top:2rem;
  max-width:34ch;font-weight:300;line-height:1.75;letter-spacing:.005em;
}
.scene .kicker{display:block;margin-bottom:1.9rem}
.scene .persian{font-size:clamp(1.6rem,4vw,3rem);color:var(--silver);opacity:.55;margin-top:.4rem}

/* Split layouts inside scenes */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%;max-width:1200px}
.split.rev{direction:rtl}
.split.rev>*{direction:ltr}
.center{flex-direction:column;text-align:center}

/* ============ 7. HERO (Scene 1) ============
   Layered 2.5D composition. Each plane is a .hero-layer that the master
   timeline pushes in at a different rate, all converging on the ring focal
   point (--ring-x / --ring-y) — a real parallax dolly, not a flat scale.   */
#sc-hero{
  --ring-x:78%; --ring-y:48%;                 /* ring focal point within hero.webp */
  position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;padding:0;
}

.hero-layer{
  position:absolute;inset:0;pointer-events:none;
  transform-origin:var(--ring-x) var(--ring-y);
  will-change:transform;backface-visibility:hidden;
}

/* Plane 1 — background environment (deepest, slowest push) + legibility gradient */
.hero-env{
  z-index:0;
  background-image:
    linear-gradient(90deg,
      rgba(7,7,9,.90) 0%,rgba(7,7,9,.72) 30%,
      rgba(7,7,9,.30) 58%,rgba(7,7,9,.05) 100%),
    url("../img/hero/images/hero.webp");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* Plane 2 — hand + ring subject, feathered out of the same photo onto a
   nearer plane so it dollies faster than the environment behind it.
   Swap the background-image here for a real cutout PNG when available.     */
.hero-subject{
  z-index:1;
  background-image:url("../img/hero/images/hero.webp");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  filter:brightness(1.05) contrast(1.03);
  -webkit-mask-image:radial-gradient(ellipse 40% 52% at var(--ring-x) var(--ring-y),
    #000 42%,rgba(0,0,0,.55) 62%,transparent 80%);
          mask-image:radial-gradient(ellipse 40% 52% at var(--ring-x) var(--ring-y),
    #000 42%,rgba(0,0,0,.55) 62%,transparent 80%);
}

/* Plane 3 — ring specular highlights; base sheen + mouse-proximity boost */
.hero-ring-glow{
  z-index:2;
  background:radial-gradient(circle 150px at var(--ring-x) var(--ring-y),
    rgba(255,255,255,.55),rgba(255,255,255,.14) 40%,transparent 68%);
  mix-blend-mode:screen;
  opacity:calc(.26 + var(--boost,0) * .55);
  transition:opacity .45s ease;
}

/* Plane 4 — mouse spotlight, soft polished-silver sheen (desktop only, JS-driven) */
.hero-spotlight{
  z-index:3;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle 300px at var(--x,80%) var(--y,45%),
    rgba(255,255,255,.10),rgba(255,255,255,.03) 42%,transparent 70%);
  mix-blend-mode:soft-light;
}

/* Plane 5 — text (nearest, moves least, fades on push-in) */
.hero-content{
  position:relative;z-index:4;width:min(1500px,92%);margin:0 auto;
  padding-inline:clamp(1.4rem,4vw,3rem);will-change:transform,opacity;
}
.hero-copy{max-width:560px}
.hero-copy .eyebrow{display:block}
.hero-copy h1{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(3.8rem,6.5vw,6.2rem);line-height:.92;margin-top:1.4rem;
}
.hero-copy h1 em{font-style:italic;color:var(--glow)}
.hero-copy .persian{
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--silver);opacity:.65;margin-top:1rem;
}
.hero-copy p{margin-top:1.8rem;color:var(--silk-300);line-height:1.9;max-width:42ch}
.hero-btn{
  display:inline-flex;align-items:center;margin-top:2.4rem;padding:1.05rem 2.2rem;
  border:1px solid rgba(255,255,255,.20);
  font-family:var(--font-fa);font-size:.95rem;font-weight:400;letter-spacing:0;
  transition:background .4s,color .4s,border-color .4s;
}
.hero-btn:hover{background:var(--silk-100);color:var(--ink-900);border-color:var(--silk-100)}

/* ============ 7b. HERO → STORY2 · CINEMATIC RING DETACH ============
   One continuous camera move: Hero.jpg → the exact same Ring.png floating on
   pure black. The transition is choreographed as a single GSAP master timeline
   (scrub) in app.js across four phases. Everything here is transform/opacity
   only (60fps); continuous idle motion lives in isolated inner elements so it
   never collides with the scroll-driven transforms.
   --worn-x / --worn-y = the worn ring's live centre, WRITTEN BY JS every frame
   (syncRing in app.js) from the same cover-crop solve that places the flying ring, so
   the eraser and the darken-vignette can never drift apart from it. They were a pair
   of hardcoded percentages, which meant three separate hand-tuned guesses at one
   position — the ring, the eraser and the vignette — that only agreed at one viewport.
   The values below are an inert fallback for the no-JS/reduced path, where the hero
   layers are hidden anyway.                                                          */
#sc-hero{--worn-x:50%; --worn-y:50%}

/* Phase 1 — darken + vignette that pulls attention toward the ring. */
.hero-darken{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(120% 105% at var(--worn-x) var(--worn-y),
    transparent 16%,rgba(4,4,6,.34) 52%,rgba(3,3,5,.72) 84%,rgba(2,2,4,.9) 100%);
}
/* Phase 2 — soft shadow that erases the ring left on the finger once it lifts. */
/* Erases the ring worn on the hand as the flying ring lifts off it, so the finger is
   left empty while the hand stays lit — you watch the ring leave. Kept SMALL (20vh)
   and soft on purpose: at this size, over the finger, it reads as the ring's own cast
   shadow / the natural shadow of the now-empty finger, not as a hole. (An earlier,
   much larger version of this DID read as a black hole — size is the whole game.) */
.hero-ring-shadow{
  position:absolute;z-index:2;pointer-events:none;opacity:0;will-change:opacity;
  left:var(--worn-x);top:var(--worn-y);width:24vh;height:24vh;margin:-12vh 0 0 -12vh;border-radius:50%;
  background:radial-gradient(circle,rgba(5,5,7,.95),rgba(5,5,7,.5) 44%,transparent 72%);
  filter:blur(8px);
}

/* Story 2 scene — holds the single floating ring on black. */
#sc-story2{z-index:4;padding:0;background:transparent;pointer-events:none}
/* Phase 4 — pure-black takeover that swallows Hero.jpg. */
.story2-black{position:absolute;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none;will-change:opacity}
/* Very soft bloom behind the ring (Phase 3+). */
.story2-bloom{
  position:absolute;left:50%;top:50%;width:64vh;height:64vh;margin:-32vh 0 0 -32vh;
  z-index:4;border-radius:50%;opacity:0;pointer-events:none;will-change:opacity;
  background:radial-gradient(circle,rgba(228,232,240,.11),rgba(210,216,228,.04) 40%,transparent 64%);
  filter:blur(44px);
}

/* The one and only Ring.png. Outer .fly carries the scroll-driven transform
   (GSAP writes x/y/scale/rotation); .fly-inner carries the continuous idle
   float — the two never touch the same element, so transforms never fight.    */
.fly{
  position:absolute;left:50%;top:50%;z-index:5;
  width:min(52vh,640px);will-change:transform,opacity,filter;pointer-events:none;
}
.fly-inner{position:relative;will-change:transform;animation:flyFloat 8s ease-in-out infinite}
/* While the ring is still on the finger it must be perfectly still — an idle float of
   ±1.1% is ±7px of drift off the photographed ring, which is exactly the "not quite
   attached" wobble. JS adds .gluing until the ring starts travelling. */
.fly.gluing .fly-inner{animation:none}
@keyframes flyFloat{
  0%,100%{transform:translateY(-1.1%) rotate(-.5deg)}
  50%    {transform:translateY(1.1%)  rotate(.5deg)}
}
.fly-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 46px 66px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(226,231,240,.07));
}
/* Silver specular sweep — masked to the ring's own silhouette by its alpha. */
.fly-sweep{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;will-change:transform,opacity;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.72) 50%,transparent 60%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:url("../img/hero/png/ring.webp") center/contain no-repeat;
          mask:url("../img/hero/png/ring.webp") center/contain no-repeat;
  animation:flySweep 6.5s ease-in-out infinite;
}
@keyframes flySweep{0%,100%{background-position:140% 0}50%{background-position:-40% 0}}

/* Tiny silver dust — cheap CSS-animated points clustered around the ring. */
.story2-dust{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;will-change:opacity}
.dust{
  position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(244,247,252,.96),rgba(210,218,232,.3) 55%,transparent 72%);
  box-shadow:0 0 5px rgba(228,236,250,.5);opacity:0;will-change:transform,opacity;
  animation:dustTwinkle var(--dd,6s) ease-in-out var(--dl,0s) infinite;
}
@keyframes dustTwinkle{
  0%,100%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.5)}
  50%    {opacity:var(--dt,.7);transform:translate(-50%,-50%) translateY(var(--dy,-6px)) scale(1)}
}

/* Reduced motion — kill the idle loops (scene reveal handled by .reduced). */
@media (prefers-reduced-motion:reduce){
  .fly-inner,.fly-sweep,.dust{animation:none}
}

/* ============ 8. SCENE-SPECIFIC MODULES ============ */

/* Craft steps */
.steps{display:grid;gap:1.4rem;margin-top:1.4rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline}
.step .n{font-family:var(--font-display);font-style:italic;color:var(--silver-lo);font-size:1.2rem}
.step h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:var(--silk-100)}
.step p{font-size:.86rem;color:var(--silk-300);margin-top:.2rem}

/* Spec ledger */
.specs{margin-top:1.4rem}
.specrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 0;border-top:1px solid rgba(230,232,236,.09);
}
.specrow:last-child{border-bottom:1px solid rgba(230,232,236,.09)}
.specrow dt{font-size:.64rem;letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--silver-lo)}
.specrow dd{font-family:var(--font-display);font-size:1.3rem;color:var(--silk-100)}

/* ============ THE FILM ============
   Act I · ORIGIN. The opening plate fills the frame edge to edge — it is not a
   picture ON a page, it IS the page. `cover` is right here (unlike the collection
   cards): the plate is abstract terrain, so cropping it costs nothing, and any
   letterbox would betray that we are looking at a photograph. */
#sc-origin{padding:0;overflow:hidden}
.origin-plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform-origin:58% 46%;   /* pull back away from the bright ridge */
}
/* A slow darkening from the edges — the light closes in as the camera retreats,
   so the reveal lands on a frame that is already listening. */
.origin-veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 88% at 56% 46%,transparent 24%,rgba(5,5,6,.62) 72%,rgba(5,5,6,.92));
}

/* Act II · THE HOLD. Two lines, far apart, low in the frame — they must never
   compete with the ring, only accompany it. */
/* z-index 7 — above .ore-front (6). The near ore is deliberately large and blurred,
   and at z-index 4 it drifted straight across the two lines and shredded them. Type
   is the one thing in this frame that must never be occluded. */
.hold-copy{
  position:absolute;z-index:7;left:0;right:0;bottom:9vh;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  pointer-events:none;text-align:center;
}
.hold-line{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.5;color:var(--silk-100);
}
.hold-line:last-child{color:var(--glow)}

/* The closing manifesto line, held low and quiet. */
.act-line{
  position:absolute;z-index:4;left:0;right:0;bottom:11vh;opacity:0;
  text-align:center;padding:0 8vw;pointer-events:none;
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.8rem);color:var(--silk-200);
}
.act-line.closing{font-size:clamp(1.3rem,2.8vw,2.3rem);color:var(--silk-100);bottom:8vh}
.act-line b{font-weight:400;color:var(--glow)}

/* Act V · INHERITANCE. The payoff frame. It fills the screen and carries no
   caption of its own — the closing line arrives only after it has landed. */
#sc-inheritance{padding:0;overflow:hidden}
.hand-plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform,filter;transform-origin:56% 54%;
}

/* Collections row — the artwork IS the card.
   assets/1|2|3.png are finished collection artworks, not product photos: each one
   already carries its own wordmark, subtitle and Persian tagline inside the image.
   So the card contributes no text of its own — it is only a dark mat and a frame
   around the whole picture. Every source is 1536×1024, so the card is pinned to
   the same 3/2 ratio: `contain` then letterboxes nothing, and no pixel of the
   artwork is ever cropped at any viewport width. */
/* ---- Shared product card ------------------------------------------------------
   One card used by both the cinema's fan (Act III) and the ویترین page, so the two
   presentations of the same catalogue cannot drift apart.

   "Transparent products": the photographs are shot on dark rock and there are no
   cutouts for them, so the background is knocked out at render time instead —
   screen-blending against the card's near-black surface makes black contribute
   nothing, and the raised contrast crushes what is left of the stone. The result
   reads as a product floating on the card rather than a photo pasted into it. The
   ring is the exception: assets/img/hero/png/ring.webp is a real alpha cutout, so it
   needs no knockout and is marked .is-cutout. */
.pcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:15px;text-decoration:none;
  border:1px solid rgba(230,232,236,.12);
  background:linear-gradient(168deg,#141416,#0A0A0C 62%,#08080A);
  box-shadow:inset 0 1px 0 rgba(240,242,246,.05),0 30px 64px -28px rgba(0,0,0,.9);
  transition:border-color .5s ease,box-shadow .5s ease;
}
.pcard-img{
  position:relative;aspect-ratio:1/1;display:block;overflow:hidden;
  background:radial-gradient(ellipse 62% 55% at 50% 46%,rgba(226,231,240,.09),transparent 68%);
}
.pcard-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:6%;
  mix-blend-mode:screen;filter:contrast(1.32) brightness(1.06);
}
.pcard-img img.is-cutout{mix-blend-mode:normal;filter:none;padding:9%}
/* the soft copy used for the depth-of-field settle; cross-faded by opacity only */
.pcard-img img.soft{filter:contrast(1.32) brightness(1.06) blur(7px)}
.pcard-img img.is-cutout.soft{filter:blur(7px)}
/* a floor under the product so it is standing on the card, not floating over it */
.pcard-img::after{
  content:'';position:absolute;left:12%;right:12%;bottom:6%;height:14%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);
  filter:blur(6px);
}
.pcard-meta{
  padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;
  border-top:1px solid rgba(230,232,236,.07);
}
.pcard-cat{
  font-family:var(--font-body);font-size:.5rem;letter-spacing:var(--track-mid);
  text-transform:uppercase;color:var(--silver-lo);direction:ltr;unicode-bidi:isolate;
}
.pcard-name{
  font-family:var(--font-fa);font-weight:400;font-size:.92rem;color:var(--silk-100);
  line-height:1.45;
}
.pcard-price{
  font-family:var(--font-fa);font-weight:300;font-size:.8rem;color:var(--silver);
  margin-top:.15rem;
}
.pcard-price b{font-weight:400;color:var(--silk-100)}
/* the house's specular pass, so a card reads as silver rather than as a tile */
.pcard::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:15px;
  background:linear-gradient(115deg,transparent 40%,rgba(240,244,250,.12) 50%,transparent 60%);
  opacity:0;transition:opacity .6s ease;
}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{
    border-color:rgba(230,232,236,.34);
    box-shadow:inset 0 1px 0 rgba(240,242,246,.09),
               0 44px 88px -30px rgba(0,0,0,.95),
               0 0 44px -14px rgba(208,213,221,.20);
  }
  .pcard:hover::after{opacity:1}
}

/* ---- The exhibition ----------------------------------------------------------
   The pieces are now the shared .pcard, so the surface, the knocked-out product and
   the details all come from one place. What is left here is only their placement:
   each card is pinned to the pivot (the centre of the frame, where the ring is) and
   GSAP writes the fan's angle, tilt, depth and scale onto it. */
.exh-field{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}

.exh{
  /* Pinned to the pivot. The -50%/-50% centring is applied by GSAP as xPercent /
     yPercent rather than a CSS translate, because GSAP replaces the whole transform
     when it writes x/y/rotation/scale. */
  position:absolute;left:50%;top:50%;width:var(--sw);
  will-change:transform,opacity;
}
.exh .exh-in{display:flex;flex-direction:column;height:100%;will-change:transform}
/* Depth of field without animating a blur: a sharp copy over a permanently soft one,
   cross-faded by opacity as the camera settles. A static filter rasterises once; an
   animated one repaints on every scrubbed frame, four cards over. */
.exh .pcard-img img.sharp{opacity:0}

/* One card size for all five. The slot table already carries the depth — each step
   out is scaled 1 → 0.9346 → 0.8498 by the fan itself — so varying the base widths
   as well double-counted it and left the fan looking like five unrelated cards. */
#exh1,#exh2,#exh3,#exh4,#exh5{--sw:min(15vw,205px)}

/* Hover — desktop pointers only, and deliberately understated: a piece under glass
   should acknowledge you, not perform.
   The lift, the scale and the magnetic pull are all ONE transform on .exh-in, and
   GSAP owns it (see initShowcase). Writing a :hover transform here as well would
   simply be overwritten by the inline style the moment the pointer moved, so CSS
   keeps only the properties GSAP does not touch: the light. */
@media (hover:hover) and (pointer:fine){
  /* .pcard already answers :hover with its border, shadow and specular pass; only
     the ring, which is not a card while it is still the flying object, needs its own. */
  .fly.exhibit:hover .fly-sweep{opacity:.95}
}
.exh:focus-visible{outline:1px solid rgba(230,232,236,.5);outline-offset:14px;border-radius:4px}

/* The ring is a product too, so it answers the pointer the same way during the
   exhibition — and only then. .fly-img is the innermost node: .fly carries the
   scroll transform and .fly-inner the idle float, so this collides with neither. */
.fly.exhibit{pointer-events:auto;cursor:pointer}

/* Editorial info */
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin-top:1.8rem}
.det-grid div{border-left:1px solid rgba(230,232,236,.16);padding-left:1rem}
.det-grid dt{font-size:.58rem;letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--silver-lo)}
.det-grid dd{font-family:var(--font-display);font-size:1.2rem;color:var(--silk-100);margin-top:.15rem}
.price{margin-top:1.8rem;display:flex;align-items:baseline;gap:.9rem}
.price .num{font-family:var(--font-display);font-size:2.4rem;color:var(--silk-100)}
.price .from{font-size:.62rem;letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--silver-lo)}

/* Manifesto + CTA */
.manifesto{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,4vw,3.4rem);
  line-height:1.4;color:var(--silk-200);max-width:20ch;
}
.manifesto b{font-weight:400;font-style:italic;color:var(--glow)}
.btn{
  font-family:var(--font-body);font-size:.7rem;letter-spacing:var(--track-mid);
  text-transform:uppercase;padding:1rem 2.2rem;border-radius:100px;cursor:pointer;
  border:1px solid transparent;display:inline-flex;align-items:center;gap:.7rem;pointer-events:auto;
  transition:transform .5s cubic-bezier(.16,1,.3,1),background .5s,color .5s,border-color .5s;
}
.btn-primary{background:linear-gradient(135deg,var(--silk-100),var(--silver));color:var(--ink-900)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{color:var(--silk-100);border-color:rgba(230,230,234,.22)}
.btn-ghost:hover{border-color:var(--glow);color:var(--glow)}
.cta-actions{display:flex;gap:1.2rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}

/* ============ 8b. HERO SCROLL · STEP 02 — THE RING ============
   NOT a standalone section — a .scene living inside the pinned #world,
   driven as the next chapter of the master timeline. Layout + atmosphere
   only here; the scroll dolly/reveal/exit are appended in app.js.
   Continuous CSS motion (float / rotateY / sweep) sits on inner elements,
   separate from the GSAP-driven planes, so transforms never collide.     */
#sc-ring{
  padding:0;overflow:hidden;z-index:4;         /* above Hero Step 01 during the match cut */
  background:#000000;                           /* pure black — matches Scene 01, infinite void */
}

/* Deepest plane — infinite black space. No photo backdrop, no haze: the frame
   is pure #000 negative space so the floating ore is the only visual element,
   exactly like Scene 01. A single, extremely subtle central glow is all that
   survives — a whisper of volumetric light so the far rocks don't read as flat.
   Parallaxes slower than the ring (scroll-driven from app.js).                */
.ring-env{
  position:absolute;inset:0;z-index:0;transform-origin:50% 44%;
  will-change:transform;backface-visibility:hidden;background-color:#000000;
  background-image:
    radial-gradient(42% 40% at 50% 44%,rgba(210,216,226,.05),transparent 60%),
    radial-gradient(140% 120% at 50% 50%,transparent 40%,#000000 82%);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}

/* Volumetric light — NOT haze. A couple of extremely faint pools sit behind
   the rock clusters (off-centre, small) so a few fragments catch a soft rim of
   light out of the dark. Kept far below visible-fog levels; strong negative
   space is preserved. Timeline still fades this in with the reveal.          */
.ring-atmos{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(20% 30% at 30% 38%,rgba(214,222,235,.05),transparent 66%),
    radial-gradient(22% 30% at 72% 60%,rgba(210,216,226,.035),transparent 70%);
  opacity:.9;
}

/* Soft backlight from above — a very restrained downward shaft that grazes the
   ring and the nearest ore, then falls off fast into black. Toned right down
   from a studio cone so it reads as a faint rim of volumetric light rather
   than a grey wash. Sits behind the ring plane.                              */
.ring-spot{
  position:absolute;left:50%;top:-6%;width:38vw;max-width:480px;height:118%;
  transform:translate3d(-50%,0,0);z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(34% 24% at 50% 20%,rgba(255,255,255,.13),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 38%,transparent 66%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
  filter:blur(8px);
}

/* Camera push plane (scroll-driven) — carries the ring toward the lens */
.ring-cam{
  position:relative;z-index:2;will-change:transform;backface-visibility:hidden;
  perspective:1200px;                          /* enables the child's Y-axis rotation */
}
.ring-stage{display:flex;flex-direction:column;align-items:center}

/* Weightless float + gentle breathing + subtle Y rotation (5–10°) */
.ring-float{
  display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;will-change:transform;
  animation:ringFloat 8s ease-in-out infinite;
}
@keyframes ringFloat{
  0%,100%{transform:translate3d(0,-1.1%,0) rotateY(-4deg) scale(.994)}
  50%    {transform:translate3d(0,1.1%,0)  rotateY(4deg)  scale(1.006)}
}

/* Static ~15° tilt toward the camera (top face angled into the lens) */
.ring-tilt{
  transform:rotateX(15deg);transform-style:preserve-3d;
  will-change:transform;backface-visibility:hidden;
}

/* The ring itself — PNG transparency preserved + soft grounding shadow */
.ring-piece{position:relative;width:min(44vw,540px);aspect-ratio:3/2}
.ring-img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 42px 55px rgba(0,0,0,.6)) drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* Moving specular highlight — masked to the ring silhouette by its own alpha */
.ring-sweep{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:url("../img/hero/png/ring.webp") center/contain no-repeat;
          mask:url("../img/hero/png/ring.webp") center/contain no-repeat;
  animation:ringSweep 7s ease-in-out infinite;
}
@keyframes ringSweep{
  0%,100%{background-position:135% 0}
  50%    {background-position:-35% 0}
}

/* =========================================================
   THE WEIGHTLESS ORE FIELD
   Two full-viewport 3D layers of raw sterling-silver ore fragments,
   cloned in JS from 8 transparent PNGs (ore-01–ore-08.png). Nothing rests
   on anything — every piece is suspended in mid-air around the ring.
   ore-back sits behind the ring (far, small, sharp); ore-front sits in
   front (near, large, blurred bokeh). Transform-only + GPU accelerated.
   ========================================================= */
.ore-field{
  position:absolute;inset:0;pointer-events:none;
  transform-style:preserve-3d;
  perspective:1000px;perspective-origin:50% 46%;
  will-change:transform;backface-visibility:hidden;
  opacity:0;                                      /* revealed by the master timeline (Phase 3) */
}
/* Layered inside #sc-story2 (black 3 · bloom 4 · ring 5 · dust 6):
   back sits above the pure-black takeover yet behind the ring; front sits
   in front of the ring but below the twinkling dust.                        */
.ore-back{z-index:4}
.ore-front{z-index:6}

/* A single suspended fragment. Placement (left/top/--z) is static; the
   inner <img> carries the 3D pose + GSAP float so the two never fight.   */
.ore{
  position:absolute;top:50%;left:50%;
  transform:translate3d(-50%,-50%,0) translateZ(var(--z,0px));
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;
}
.ore-i{
  display:block;width:100%;height:auto;
  will-change:transform;backface-visibility:hidden;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
}

/* Tiny metallic particles — cheap CSS-animated points scattered through
   the whole depth of the field (no images, pure GPU transform + opacity). */
.ore-spark{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,247,252,.96),rgba(206,216,232,.28) 55%,transparent 72%);
  box-shadow:0 0 5px rgba(228,236,250,.55);
  opacity:0;will-change:transform,opacity;
  transform:translate3d(-50%,-50%,0) translateZ(var(--z,0px));
  animation:oreSpark ease-in-out infinite;
}
@keyframes oreSpark{
  0%,100%{opacity:0;
    transform:translate3d(-50%,-50%,0) translateZ(var(--z,0px)) scale(.5)}
  50%    {opacity:var(--tw,.6);
    transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)))
              translateZ(var(--z,0px)) scale(1)}
}

/* Responsive — smaller ring, keep the field full-bleed */
@media (max-width:820px){
  .ring-piece{width:min(64vw,440px)}
  .ring-spot{width:64vw}
}
@media (max-width:640px){
  .ring-piece{width:min(82vw,360px)}
  .ring-spot{width:82vw}
  .ring-float{animation-name:ringFloatFlat}
  .ring-tilt{transform:rotateX(12deg)}
}
@keyframes ringFloatFlat{
  0%,100%{transform:translate3d(0,-1.1%,0) scale(.994)}
  50%    {transform:translate3d(0,1.1%,0)  scale(1.006)}
}

/* Reduced motion — kill continuous loops (scene reveal handled by .reduced) */
@media (prefers-reduced-motion:reduce){
  .ring-float,.ring-sweep,.ore-spark{animation:none}
}

/* ============ 8c. SECTION 3 · BORN OF SILVER (Story3) ============
   Standalone full-viewport RTL chapter after the pinned cinema unpins.
   Pure black (#000) per art direction; copy on the left, portrait held
   center-right as the focal point. Motion (fade / parallax / float) is
   transform+opacity only and driven from app.js — CSS keeps a fully
   readable static baseline so it degrades gracefully without JS.          */
.story3{
  position:relative;
  min-height:100vh;min-height:100dvh;
  background:#000;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding-block:clamp(3rem,8vh,6rem);
}
.story3-inner{
  /* Layout is LTR so the copy column stays physically on the left and the
     portrait on the right, exactly as art-directed; the Persian copy block
     re-declares its own RTL direction below. */
  direction:ltr;
  width:100%;max-width:1440px;margin-inline:auto;
  padding-inline:clamp(1.6rem,6vw,5rem);
  display:grid;grid-template-columns:1fr 1.1fr;align-items:center;
  gap:clamp(1.5rem,5vw,4rem);
}

/* --- Copy (left) --- */
.story3-copy{
  direction:rtl;text-align:right;
  max-width:44ch;justify-self:start;
}
.story3-eyebrow{
  display:inline-block;direction:ltr;
  font-family:var(--font-body);
  font-size:clamp(.62rem,.56rem+.2vw,.74rem);font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--silver-lo);
  padding-bottom:.9rem;margin-bottom:1.6rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.story3-title{
  font-family:var(--font-fa);font-weight:300;
  font-size:clamp(2.1rem,1.2rem+3.4vw,4.4rem);
  line-height:1.32;letter-spacing:-.005em;
  color:var(--silk-100);
  text-wrap:balance;
}
.story3-lede{
  margin-top:1.6rem;
  font-family:var(--font-fa);font-weight:300;
  font-size:clamp(.92rem,.86rem+.35vw,1.12rem);
  line-height:2.05;color:var(--silk-300);
}
.story3-btn{
  display:inline-flex;align-items:center;gap:.85rem;
  margin-top:2.6rem;padding:1.05rem 2.2rem;
  border:1px solid rgba(255,255,255,.20);border-radius:100px;
  font-family:var(--font-fa);font-weight:400;font-size:.95rem;
  color:var(--silk-100);
  transition:background .45s ease,color .45s ease,border-color .45s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.story3-btn svg{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.story3-btn:hover{
  background:var(--silk-100);color:#000;border-color:var(--silk-100);
  transform:translateY(-2px);
}
.story3-btn:hover svg{transform:translateX(-4px)}
.story3-btn:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* --- Media (center-right) --- */
.story3-media{
  position:relative;justify-self:end;
  width:100%;height:min(88vh,860px);
  display:flex;align-items:center;justify-content:center;
}
/* Soft radial silver glow behind the portrait; the rest stays pure black */
.story3-glow{
  position:absolute;z-index:0;
  top:50%;left:52%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 42%,
      rgba(216,220,226,.14) 0%,
      rgba(216,220,226,.07) 34%,
      rgba(216,220,226,0) 68%);
  filter:blur(14px);pointer-events:none;
}
.story3-parallax{
  position:relative;z-index:1;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.story3-img{
  width:auto;height:100%;max-width:100%;
  object-fit:contain;object-position:center;
  /* nudged slightly right of the section centre, per art direction */
  transform:translateX(3%);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.65));
  will-change:transform;
  animation:story3Float 7s ease-in-out infinite;
}
/* Very subtle continuous float (~3px) — isolated from the GSAP parallax
   which drives .story3-parallax, so transforms never collide. */
@keyframes story3Float{
  0%,100%{transform:translateX(3%) translateY(-3px)}
  50%    {transform:translateX(3%) translateY(3px)}
}

/* Section 3 — reduced motion: no float, fully visible */
@media (prefers-reduced-motion:reduce){
  .story3-img{animation:none}
  .story3,.story3-inner,.story3-copy,.story3-media{opacity:1!important;transform:none}
  .story3-img{transform:translateX(3%)}
}

/* Section 3 — tablet */
@media (max-width:1024px){
  .story3-inner{grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,2.4rem)}
  .story3-media{height:min(78vh,720px)}
}

/* Section 3 — stacked (portrait on top, centred copy below) */
@media (max-width:820px){
  .story3{padding-block:clamp(4rem,10vh,6rem)}
  .story3-inner{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:clamp(1.6rem,5vw,2.6rem);
  }
  .story3-copy{order:2;text-align:center;justify-self:center;max-width:36ch}
  .story3-media{order:1;height:52vh;justify-self:center}
  .story3-img,.story3-glow{transform:none}
  @keyframes story3Float{
    0%,100%{transform:translateY(-3px)}
    50%    {transform:translateY(3px)}
  }
}

@media (max-width:640px){
  .story3-media{height:46vh}
  .story3-btn{width:100%;justify-content:center}
}

/* ============ 9. FOOTER (after unpin) ============ */
footer{
  background:var(--ink-800);border-top:1px solid rgba(230,232,236,.08);
  padding:clamp(3.5rem,8vh,6rem) 0 2rem;position:relative;z-index:10;
}
.foot-in{max-width:1200px;margin:0 auto;padding-inline:clamp(1.4rem,5vw,3rem)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2.4rem}
.foot-brand .mark{font-family:var(--font-display);font-size:2rem;font-weight:500;letter-spacing:.3em;color:var(--silk-100)}
.foot-brand .persian{font-size:1.6rem;color:var(--silver-lo);margin-top:.3rem}
.foot-brand p{margin-top:1.2rem;color:var(--silk-300);max-width:34ch;font-size:.82rem}
.foot-col h5{font-size:.6rem;letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--silver-lo);margin-bottom:1.1rem}
.foot-col a{display:block;padding:.35rem 0;color:var(--silk-300);font-size:.9rem;transition:color .3s}
.foot-col a:hover{color:var(--glow)}
.foot-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;
  padding-top:1.6rem;border-top:1px solid rgba(230,232,236,.08);font-size:.72rem;color:var(--silver-lo);
}
.foot-social{display:flex;gap:1.4rem}
.foot-social a{letter-spacing:var(--track-mid);text-transform:uppercase}

/* ============ 10. REDUCED-MOTION FALLBACK ============ */
.reduced .stage{height:auto;overflow:visible;perspective:none}
.reduced .world{position:relative;transform:none!important}
.reduced .ambient,.reduced .glow,.reduced .spark,.reduced .vignette,.reduced .hint{display:none}
.reduced .scene{
  position:relative;opacity:1!important;transform:none!important;filter:none!important;
  min-height:100vh;border-bottom:1px solid rgba(230,232,236,.08);
}
.reduced .obj{transform:none!important;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))!important;opacity:1!important}
/* Without the camera move there is no fan to open — lay the pieces out as a plain
   readable row instead of leaving them stacked on the pivot. The opacity reset is
   load-bearing: the field starts hidden so the act can fade it up, and with GSAP
   never running there is nothing to fade it back in. */
.reduced .exh-field{position:relative;display:flex;flex-wrap:wrap;gap:2rem;
  align-items:center;justify-content:center;padding:3rem 1.5rem;
  opacity:1;z-index:auto;pointer-events:auto}
.reduced .exh{position:relative;left:auto;top:auto;transform:none!important;
  opacity:1!important;width:min(38vw,240px)}
.reduced .exh .pcard-img img.sharp{opacity:1}
.reduced .exh .pcard-img img.soft{display:none}
.reduced .ring-float,.reduced .ring-sweep,.reduced .ore-spark{animation:none}
.reduced .ore-field{display:none}
.reduced .hold-copy,.reduced .act-line{position:relative;opacity:1!important;bottom:auto;transform:none!important}
.reduced .origin-plate,.reduced .hand-plate{position:relative;height:60vh;transform:none!important;filter:none!important}
.reduced .origin-veil{display:none}
.reduced .origin-copy{position:relative;inset:auto;padding:2.5rem 1.5rem 0}

/* ============ 11. RESPONSIVE ============ */

/* Tablet — balanced composition, gentler parallax offset */
@media (max-width:1024px){
  #sc-hero{--ring-x:70%}
  /* Frame the crop ON THE RING rather than on the centre of the photo. As the box
     gets narrower, cover crops harder from the sides, and `center center` walked the
     ring off the right-hand edge — at 768×1024 it sat at x≈771 in a 768px viewport,
     i.e. just outside the frame, so the film's subject was missing and the ring had
     nothing to detach from. --hero-focus-* is the ring's measured position within
     hero.webp, written by app.js; aligning that fraction of the image with the same
     fraction of the box keeps the ring at a fixed, visible spot at any aspect ratio. */
  .hero-env,.hero-subject{
    background-position:var(--hero-focus-x,71.3%) var(--hero-focus-y,50.8%);
  }
  .hero-copy{max-width:620px}
}

/* Scenes — stacked/compact */
@media (max-width:820px){
  .split{grid-template-columns:1fr;text-align:center;gap:2rem}
  .split .obj{margin:0 auto;width:min(38vh,300px)}
  /* Narrow frames cannot hold four objects apart without them touching, so the
     arrangement tightens toward the centre and the pieces shrink. Still asymmetric —
     just a smaller room. The slots are authored as custom properties precisely so
     this can be re-staged without touching the timeline. */
  /* A narrow frame cannot hold the same arc, so the fan tightens rather than
     re-arranging: smaller cards, and a shorter radius set in app.js. */
  #exh1,#exh2,#exh3,#exh4,#exh5{--sw:min(29vw,200px)}
  .rail{display:none}
  .scene h1{font-size:clamp(2.6rem,13vw,5rem)}
  .det-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

/* Mobile — centered hero, cropped background, full-width buttons */
@media (max-width:640px){
  #sc-hero{justify-content:center}
  /* Centered crop: the ring-anchored subject/glow planes would misalign,
     so flatten to the single environment plane — cleaner and lighter. */
  .hero-subject,.hero-ring-glow{display:none}
  .hero-env{
    background-position:var(--hero-focus-x,71.3%) var(--hero-focus-y,50.8%);
    background-image:
      linear-gradient(180deg,rgba(7,7,9,.55) 0%,rgba(7,7,9,.82) 100%),
      url("../img/hero/images/hero.webp");
  }
  .hero-content{text-align:center}
  .hero-copy{max-width:100%}
  .hero-copy h1{font-size:clamp(3rem,13vw,4.4rem)}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-btn{display:flex;width:100%;justify-content:center;margin-top:2rem}
}

/* =========================================================
   RTL — the page is Persian, so the document direction is rtl.

   Almost nothing here needs adjusting: the cinema is positioned with physical
   properties (left/top/absolute) and driven by GSAP transforms, so the ring
   calibration, the ore field, the rail and the HUD are all direction-blind.
   Only the four rules below encode a side, and each is corrected here rather
   than by rewriting the rule above — so the LTR layout stays intact and
   reviewable.
   ========================================================= */

/* 1 · The hero copy must stay clear of the ring, which sits at 74% across the
      photograph. Left-aligned in LTR by default; in RTL a max-width block would
      snap to the right and land on top of the hand. `margin-right:auto` pins it
      to the left in either direction — the text inside still reads right-to-left. */
[dir="rtl"] .hero-copy{margin-right:auto}

/* 2 · `.split.rev` reverses its two columns by flipping direction. Under an RTL
      document that flip is a no-op, so the two `.rev` scenes would silently lose
      their mirrored layout. Invert both halves of the trick to restore it. */
[dir="rtl"] .split.rev{direction:ltr}
[dir="rtl"] .split.rev>*{direction:rtl}

/* 3 · The detail grid's rules sit on the inline-start edge of each cell. */
[dir="rtl"] .det-grid div{
  border-left:0;
  border-right:1px solid rgba(230,232,236,.16);
  padding-left:0;
  padding-right:1rem;
}

/* 4 · Latin-script marks (MIRAS, 925, the SKU-like eyebrows) keep their own
      direction so digits and letters don't reorder inside an RTL run. */
[dir="rtl"] .hud-brand .mark,
[dir="rtl"] .foot-brand .mark{direction:ltr}

/* 5 · Tracking is a Latin device. These labels were letter-spaced for uppercase
      Montserrat; applied to Persian it prises apart a cursive script that is
      meant to join, and the words visibly fall to pieces. Latin runs inside the
      page (MIRAS, 925) keep their tracking via the rules above — this only
      neutralises it where the text is Persian. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hint span,
[dir="rtl"] .hud-brand .sub,
[dir="rtl"] .hud-meta,
[dir="rtl"] .specrow dt,
[dir="rtl"] .det-grid dt,
[dir="rtl"] .foot-col h5,
[dir="rtl"] .price .from{
  letter-spacing:normal;
  text-transform:none;   /* uppercase is meaningless in Persian and costs nothing to drop */
}

/* 6 · THE TYPEFACES. Cormorant and Montserrat contain no Persian glyphs at all —
      not one. Every heading on this page asks for --font-display, so once the copy
      became Persian the browser had to silently substitute some system default,
      and the page lost its typography. Rather than rewrite the twelve rules that
      name --font-display, redefine the two variables for the RTL document: Persian
      now resolves to Vazirmatn (already downloaded, so this costs no new request),
      and Cormorant stays in the stack purely to serve any Latin that appears
      mid-sentence. The two brand marks are pinned back to Cormorant below, because
      MIRAS is a Latin wordmark and must keep its own face. */
[dir="rtl"]{
  --font-display:'Vazirmatn','Cormorant',Georgia,serif;
  --font-body:'Vazirmatn','Montserrat',system-ui,sans-serif;
}
[dir="rtl"] .hud-brand .mark,
[dir="rtl"] .foot-brand .mark{font-family:'Cormorant',Georgia,serif}

/* 7 · Persian has no italic. Asked for one, the browser synthesises it by shearing
      the glyphs sideways — it does not read as emphasis, it reads as broken. Drop
      it: every one of these already carries its emphasis in colour (--glow), which
      is the part that was doing the work anyway. */
[dir="rtl"] .hud-meta .scene-name,
[dir="rtl"] .scene h1 em,
[dir="rtl"] .scene h2 em,
[dir="rtl"] .hero-copy h1 em,
[dir="rtl"] .step .n,
[dir="rtl"] .manifesto b{font-style:normal}

/* ============ MOBILE NAVIGATION =================================================
   The storefront bar carries seven links plus a wishlist and a cart button, laid out
   as a single inline row. That has never fitted a phone: at 390px the row ran off
   both edges and collided with the MIRAS mark, so "تماس" showed as "تم" and the
   brand sat underneath the links.

   This lives in style.css because .pnav is declared in FOUR places — shop.css and
   inline in products.html, product.html and contact.html — and every page loads
   style.css. One rule set therefore reaches all sixteen pages, including the four
   error pages, which load no JavaScript at all.

   Which is also why the toggle is a checkbox rather than a button: it works with no
   JS, so the 404 page gets a working menu too. The checkbox stays focusable (it is
   moved off-screen, never display:none) and the label is its visual burger.
   ============================================================================== */
.navtoggle-cb,
.navtoggle{ display:none }

@media (max-width:860px){
  /* the burger — same hairline-circle language as the scroll cue and the fan arrows */
  .navtoggle{
    /* flex, not grid: with `display:grid; place-items:center` the two bars land in
       separate implicit rows that split the 42px button between them, so they sat
       17px apart and the ±3px close-up turned the X into a chevron. A flex column
       packs them to the gap, which is the distance the transform is written for. */
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    position:fixed; top:1.05rem; inset-inline-end:1.05rem; z-index:2;
    width:42px; height:42px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(230,232,236,.16); background:rgba(9,9,11,.5);
    transition:border-color .35s ease,background .35s ease;
  }
  .navtoggle span{
    display:block; width:17px; height:1px; background:var(--silk-100);
    transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .25s ease;
  }
  .navtoggle-cb{
    display:block; position:fixed; top:1.05rem; inset-inline-end:1.05rem;
    width:42px; height:42px; margin:0; opacity:0; z-index:3; cursor:pointer;
  }
  .navtoggle-cb:focus-visible ~ .navtoggle{ border-color:var(--glow) }
  /* burger → X */
  .navtoggle-cb:checked ~ .navtoggle span:first-child{ transform:translateY(3px) rotate(45deg) }
  .navtoggle-cb:checked ~ .navtoggle span:last-child{ transform:translateY(-3px) rotate(-45deg) }
  .navtoggle-cb:checked ~ .navtoggle{ border-color:rgba(230,232,236,.4) }

  /* the panel. Animated with max-height and opacity, NOT transform: .pnav carries a
     backdrop-filter, which makes it the containing block for fixed descendants, and
     a transform here would have dragged the cart and wishlist buttons down with the
     panel instead of leaving them in the bar. */
  .pnav .links{
    position:absolute; top:100%; inset-inline:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; opacity:0;
    /* Fully opaque. At .97 the page's own bright headings still glowed faintly
       through against the near-black background — legible enough to read as a
       transparency bug rather than a menu. */
    background:#08080A;
    transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .navtoggle-cb:checked ~ .links{
    max-height:min(74vh,32rem); opacity:1; overflow-y:auto;
    border-bottom:1px solid rgba(230,232,236,.12);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
  }
  /* A real tap target: 48px min, the full width of the sheet.
     align-self is on the ITEMS on purpose — products.html, product.html and
     contact.html each declare `.pnav .links{align-items:center}` inline, after
     style.css, so a parent-level align-items here loses the cascade and every link
     shrank to a 72px-wide centred label. Setting it per item outranks that. */
  .pnav .links a:not(.keep){
    align-self:stretch;
    padding:1.05rem clamp(1.4rem,5vw,2rem); font-size:1rem;
    border-top:1px solid rgba(230,232,236,.06);
  }
  .pnav .links a[aria-current]::after{ display:none }   /* the desktop underline */
  .pnav .links a[aria-current]{
    color:var(--silk-100);
    box-shadow:inset 3px 0 0 var(--glow);   /* inline-start marker instead */
  }

  /* The cart and wishlist stay in the bar rather than hiding inside the menu — they
     are controls, not navigation. position:fixed escapes the panel's max-height clip
     because .links itself creates no containing block. */
  .pnav .links .keep{
    position:fixed; top:1.05rem; width:42px; height:42px;
    border-top:0; padding:0;
  }
  .pnav .links #cartBtn{ inset-inline-end:4.1rem }
  .pnav .links #wishBtn{ inset-inline-end:7.2rem }

  .pnav{ padding:1rem 1.1rem }
  .pnav .brand .mark{ font-size:1.15rem; letter-spacing:.26em; text-indent:.26em }
  .pnav .brand .sub{ font-size:.48rem; letter-spacing:.34em; text-indent:.34em }
}

/* Visually hidden but readable by screen readers. Labels that would be
   redundant sighted (a placeholder already says it) still need a name. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Quiet "view full cart" link in the drawer — the drawer is for glancing,
   cart.html is for deciding; this is the doorway between them. */
.drawer-cartlink{
  display:block; text-align:center; margin:.7rem 0 0;
  font-family:var(--font-fa); font-size:.8rem; color:var(--silver-lo);
  text-decoration:none; transition:color .25s;
}
.drawer-cartlink:hover{ color:var(--silk-100) }