/* ==========================================================================
   Farsicast Experience v1.0
   Everything is scoped under .farsicast-experience to coexist with Elementor
   and the active theme. Sections:
    0. Registered properties (animated by JS / GSAP)
    1. Design tokens
    2. Root, reset, utilities
    3. Track + sticky stage
    4. Backdrop + viewfinder chrome
    5. Copy / chapters
    6. Visual rigs
    7. 3D primitives
    8. Camera materials & details
    9. Lens
   10. Camera screen + upload views
   11. Controls / buttons / dock
   12. Flash
   13. Microphone
   14. Idle motion & state hooks
   15. Responsive
   16. Reduced motion
   17. Editor / pre-JS fallback
   ========================================================================== */

/* 0. Registered properties ------------------------------------------------ */
/* Registered so they can transition (discrete mode) and so most of them
   don't cascade style recalcs into the subtree (inherits: false). */
@property --fc-rx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-ry { syntax: "<number>"; inherits: true;  initial-value: 0; } /* read by face shading */
@property --fc-rz { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-cz { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-cs { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --fc-px { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-py { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-ro { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --fc-my { syntax: "<number>"; inherits: false; initial-value: 45; }
@property --fc-ms { syntax: "<number>"; inherits: false; initial-value: 0.8; }
@property --fc-mo { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-warm { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fc-progress { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-mx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-vo { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fc-draw { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fc-fill { syntax: "<number>"; inherits: true; initial-value: 0; }

/* 1. Tokens ---------------------------------------------------------------- */
.farsicast-experience {
  /* Color — placeholders until Farsicast brand colors are confirmed */
  --fc-ink: #0b0b0d;
  --fc-ink-2: #141417;
  --fc-paper: #f3efe7;
  --fc-paper-dim: rgba(243, 239, 231, 0.64);
  --fc-paper-faint: rgba(243, 239, 231, 0.16);
  --fc-accent: #ff3131;              /* Farsicast brand red (from the logo) */
  --fc-accent-rgb: 255, 49, 49;      /* same red, for rgba() */
  --fc-accent-deep: #c41e1e;         /* darker red for text on light surfaces */
  --fc-signal: #ff3131;              /* lamps / record dot */
  --fc-ok: #8fd6a8;
  --fc-danger: #f09482;

  /* Camera materials */
  --fc-body: #222226;
  --fc-body-dark: #131316;
  --fc-body-light: #37373e;
  --fc-metal: #9a978f;
  --fc-rubber: #111113;

  /* Typography — IRANSansX if licensed & loaded; Vazirmatn is the free fallback */
  --fc-font-fa: "IRANSansX", "Vazirmatn", "Tahoma", sans-serif;
  --fc-font-latin: "Poppins", "Vazirmatn", system-ui, sans-serif;
  --fc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fc-size-h: clamp(2rem, 1.1rem + 2.6vw, 4rem);
  --fc-size-sub: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  --fc-size-eyebrow: 0.8125rem;

  /* Spacing */
  --fc-gutter: clamp(16px, 5vw, 96px);
  --fc-space-1: 8px;
  --fc-space-2: 16px;
  --fc-space-3: 24px;
  --fc-space-4: 40px;

  /* Motion */
  --fc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --fc-dur-fast: 0.24s;
  --fc-dur: 0.6s;
  --fc-dur-slow: 1.1s;

  /* Layout. Breakpoints (CSS can't read vars in @media — keep these in sync
     with CONFIG.media in farsicast-experience.js): stacked < 1024px. */
  --fc-header-offset: 0px;           /* set to your sticky header height */
  --fc-track-length: 380vh;          /* fallback; the real length comes from CONFIG.story */
  --fc-story-scale: 1;               /* phones scroll a little less for the same story */
  --fc-cam-w: min(40vw, 620px);      /* camera width at its largest (screen beat) */
  --fc-u: calc(var(--fc-cam-w) / 100);
  --fc-mic-h: min(70vh, 640px);
}

/* 2. Root, reset, utilities ------------------------------------------------ */
.farsicast-experience {
  position: relative;
  isolation: isolate;
  overflow-x: clip;                  /* clip, not hidden: hidden would break sticky */
  background: var(--fc-ink);
  color: var(--fc-paper);
  font-family: var(--fc-font-fa);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
.farsicast-experience *,
.farsicast-experience *::before,
.farsicast-experience *::after { box-sizing: border-box; }
.farsicast-experience :where(h1, h2, p, figure) {
  margin: 0; padding: 0; border: 0;
  font: inherit; color: inherit;
  letter-spacing: 0;                 /* never letter-space Persian: it breaks joining */
  text-transform: none;
}
.farsicast-experience img { max-width: none; border: 0; box-shadow: none; }
.farsicast-experience .farsicast-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.farsicast-experience .farsicast-upload__input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  top: 0; right: 0;
}

/* 3. Track + sticky stage --------------------------------------------------- */
.farsicast-experience .farsicast-track {
  position: relative;
  height: var(--fc-track-length);
  /* JS measures the story (incl. the number of services) and sets --fc-story-vh */
  height: calc(var(--fc-story-vh, 380) * var(--fc-story-scale, 1) * 1vh + 100vh);
}
.farsicast-experience .farsicast-stage {
  position: sticky;
  top: var(--fc-header-offset);
  height: calc(100vh - var(--fc-header-offset));
  height: calc(100svh - var(--fc-header-offset));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);   /* RTL: copy right, visual left */
  grid-template-areas: "copy visual";
}

/* 4. Backdrop + viewfinder --------------------------------------------------- */
.farsicast-experience .farsicast-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.farsicast-experience .farsicast-backdrop__light { position: absolute; inset: 0; }
.farsicast-experience .farsicast-backdrop__light--cool {
  background:
    radial-gradient(60% 70% at 34% 48%, rgba(226, 230, 238, 0.10), transparent 62%),
    radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%);
  opacity: calc(1 - var(--fc-warm) * 0.75);
}
.farsicast-experience .farsicast-backdrop__light--warm {
  background: radial-gradient(55% 65% at 34% 46%, rgba(var(--fc-accent-rgb), 0.10), transparent 64%);
  opacity: var(--fc-warm);
}
.farsicast-experience .farsicast-backdrop__grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.farsicast-experience .farsicast-viewfinder { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.farsicast-experience .farsicast-viewfinder__corner {
  position: absolute; width: 22px; height: 22px;
  border: 0 solid var(--fc-paper-faint);
}
.farsicast-experience .farsicast-viewfinder__corner--tl { top: 24px; left: 24px; border-top-width: 1px; border-left-width: 1px; }
.farsicast-experience .farsicast-viewfinder__corner--tr { top: 24px; right: 24px; border-top-width: 1px; border-right-width: 1px; }
.farsicast-experience .farsicast-viewfinder__corner--bl { bottom: 24px; left: 24px; border-bottom-width: 1px; border-left-width: 1px; }
.farsicast-experience .farsicast-viewfinder__corner--br { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px; }
.farsicast-experience .farsicast-readout {
  position: absolute; left: 58px; bottom: 26px;
  display: flex; align-items: center; gap: 10px;
  font: 400 11px/1 var(--fc-font-mono); letter-spacing: 0.08em;
  color: var(--fc-paper-dim); direction: ltr; text-align: left;
}
.farsicast-experience .farsicast-readout__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fc-signal);
  box-shadow: 0 0 8px var(--fc-signal);
}
.farsicast-experience .farsicast-progress {
  position: absolute; right: 58px; bottom: 30px; width: 120px; height: 1px;
  background: var(--fc-paper-faint);
}
.farsicast-experience .farsicast-progress__bar {
  position: absolute; inset: 0; background: var(--fc-paper);
  transform-origin: 100% 50%;
  transform: scaleX(var(--fc-progress));
}
.farsicast-experience .farsicast-scroll-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; color: var(--fc-paper-dim);
  transition: opacity 0.5s var(--fc-ease-out);
}
.farsicast-experience .farsicast-scroll-hint i {
  position: relative; display: block; width: 1px; height: 36px; overflow: hidden;
  background: var(--fc-paper-faint);
}
.farsicast-experience .farsicast-scroll-hint i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px;
  background: var(--fc-paper);
  animation: fc-hint 2.2s var(--fc-ease-inout) infinite;
}
.farsicast-experience.is-scrolled .farsicast-scroll-hint { opacity: 0; }

/* 5. Copy / chapters -------------------------------------------------------- */
.farsicast-experience .farsicast-copy {
  grid-area: copy; position: relative; z-index: 5;
  display: grid; grid-template-rows: auto auto; align-content: center;
  padding-inline: var(--fc-gutter) clamp(16px, 3vw, 48px);
}
.farsicast-experience .farsicast-chapter { grid-area: 1 / 1; align-self: center; pointer-events: none; }
.farsicast-experience .farsicast-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  font-size: var(--fc-size-eyebrow); font-weight: 400; color: var(--fc-paper-dim);
  opacity: 0; transition: opacity 0.4s var(--fc-ease-out);
}
.farsicast-experience .farsicast-eyebrow__num { color: var(--fc-accent); }
.farsicast-experience .farsicast-eyebrow__num::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 36px; height: 1px; margin-inline-start: 12px;
  background: currentColor; opacity: 0.6;
}
.farsicast-experience .farsicast-headline {
  font-size: var(--fc-size-h); font-weight: 700; line-height: 1.34;
  color: var(--fc-paper); max-width: 11.5em; text-wrap: balance;
}
.farsicast-experience .farsicast-sub {
  margin-top: 18px; max-width: 26em;
  font-size: var(--fc-size-sub); font-weight: 300; line-height: 1.9;
  color: var(--fc-paper-dim);
}
/* Word-level animation: words, never letters (Persian letters must stay joined) */
.farsicast-experience .farsicast-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.38em, 0);
  filter: blur(10px);
  transition:
    opacity 0.7s var(--fc-ease-out),
    transform 0.9s var(--fc-ease-out),
    filter 0.8s var(--fc-ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.farsicast-experience .farsicast-chapter.is-active .farsicast-eyebrow { opacity: 1; }
.farsicast-experience .farsicast-chapter.is-active .farsicast-word { opacity: 1; transform: none; filter: none; }
.farsicast-experience .farsicast-chapter.is-leaving .farsicast-word {
  opacity: 0; transform: translate3d(0, -0.22em, 0) scale(1.02); filter: blur(10px);
  transition-duration: 0.38s; transition-delay: 0s;
}
.farsicast-experience .farsicast-chapter.is-cut .farsicast-word,
.farsicast-experience .farsicast-chapter.is-cut .farsicast-eyebrow,
.farsicast-experience.is-instant .farsicast-word,
.farsicast-experience.is-instant .farsicast-eyebrow { transition: none; }
/* "Develop" — the text appears overexposed by the flash, then settles */
.farsicast-experience .farsicast-chapter.is-developing .farsicast-word {
  transition: none;
  animation: fc-develop 1.3s var(--fc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.farsicast-experience .farsicast-sub.is-swapping .farsicast-word { opacity: 0; filter: blur(8px); transition-delay: 0s; transition-duration: 0.3s; }
.farsicast-experience .farsicast-word.is-entering { opacity: 0 !important; filter: blur(8px) !important; transition: none !important; }
.farsicast-experience .farsicast-headline--voice { font-weight: 300; }

/* 6. Visual rigs ------------------------------------------------------------ */
.farsicast-experience .farsicast-visual { grid-area: visual; position: relative; z-index: 2; }
.farsicast-experience .farsicast-camera-rig {
  position: absolute; left: 50%; top: 50%;
  width: var(--fc-cam-w); height: calc(var(--fc-cam-w) * 0.8);
  margin-left: calc(var(--fc-cam-w) / -2);
  margin-top: calc(var(--fc-cam-w) * -0.4);
  perspective: calc(var(--fc-cam-w) * 3.2);
  perspective-origin: 50% 42%;
  --fc-px: 10; --fc-py: 0;           /* opening position (POSES.wide.idle.rig) */
  transform: translate3d(calc(var(--fc-px) * 1%), calc(var(--fc-py) * 1%), 0);
  opacity: var(--fc-ro);
  pointer-events: none;              /* decorative 3D parts must never steal clicks… */
}
.farsicast-experience .farsicast-screen { pointer-events: auto; }   /* …only the screen is interactive */
.farsicast-experience .farsicast-screen[inert] { pointer-events: none; }
.farsicast-experience .farsicast-camera-shadow {
  position: absolute; left: 14%; right: 14%; bottom: 0; height: 14%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0.9;
}
.farsicast-experience .farsicast-camera-float,
.farsicast-experience .farsicast-camera-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
}
.farsicast-experience .farsicast-camera-float { animation: fc-float 7s ease-in-out infinite alternate; }
.farsicast-experience .farsicast-camera-tilt {
  transform: rotateX(calc(var(--fc-ty, 0) * 1deg)) rotateY(calc(var(--fc-tx, 0) * 1deg));
  transition: transform 1.2s var(--fc-ease-out);
}
.farsicast-experience .farsicast-camera {
  position: absolute; left: 50%; top: calc(50% + var(--fc-u) * 7);
  width: 0; height: 0;
  transform-style: preserve-3d;
  /* Pose = CSS vars, animated by GSAP (scrub) or transitioned (discrete) */
  /* Opening pose (keep in sync with POSES.wide.idle in the JS) */
  --fc-rx: 0; --fc-ry: -24; --fc-rz: 0; --fc-cz: 0; --fc-cs: 0.84;
  transform:
    translateZ(calc(var(--fc-cz) * var(--fc-cam-w)))
    rotateZ(calc(var(--fc-rz) * 1deg))
    rotateX(calc(var(--fc-rx) * 1deg))
    rotateY(calc(var(--fc-ry) * 1deg))
    scale3d(var(--fc-cs), var(--fc-cs), var(--fc-cs));
}

/* 7. 3D primitives ------------------------------------------------------------ */
.farsicast-experience .farsicast-box {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}
.farsicast-experience .farsicast-face {
  position: absolute; left: 0; top: 0;
  width: var(--fw); height: var(--fh);
  margin: calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--fc-body);
}
.farsicast-experience .farsicast-face--front,
.farsicast-experience .farsicast-face--back   { --fw: var(--w); --fh: var(--h); }
.farsicast-experience .farsicast-face--left,
.farsicast-experience .farsicast-face--right  { --fw: var(--d); --fh: var(--h); }
.farsicast-experience .farsicast-face--top,
.farsicast-experience .farsicast-face--bottom { --fw: var(--w); --fh: var(--d); }
.farsicast-experience .farsicast-face--front  { transform: translateZ(calc(var(--d) / 2)); }
.farsicast-experience .farsicast-face--back   { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.farsicast-experience .farsicast-face--right  { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.farsicast-experience .farsicast-face--left   { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.farsicast-experience .farsicast-face--top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.farsicast-experience .farsicast-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* Dynamic shading: each face darkens as it turns away from a key light at the
   viewer's upper-left. Pure CSS (trig functions); skipped where unsupported. */
.farsicast-experience .farsicast-shade {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: #000; opacity: 0.25;
}
@supports (opacity: calc(cos(0deg))) {
  .farsicast-experience .farsicast-shade--front { opacity: calc(0.58 - 0.58 * max(0, 0.89 * cos(var(--fc-ry) * 1deg) - 0.45 * sin(var(--fc-ry) * 1deg))); }
  .farsicast-experience .farsicast-shade--back  { opacity: calc(0.58 - 0.58 * max(0, 0.45 * sin(var(--fc-ry) * 1deg) - 0.89 * cos(var(--fc-ry) * 1deg))); }
  .farsicast-experience .farsicast-shade--right { opacity: calc(0.78 - 0.7 * max(0, -0.45 * cos(var(--fc-ry) * 1deg) - 0.89 * sin(var(--fc-ry) * 1deg))); }
  .farsicast-experience .farsicast-shade--left  { opacity: calc(0.78 - 0.7 * max(0, 0.45 * cos(var(--fc-ry) * 1deg) + 0.89 * sin(var(--fc-ry) * 1deg))); }
}

/* 8. Camera materials & details --------------------------------------------- */
.farsicast-experience .farsicast-box--body {
  --w: calc(var(--fc-u) * 100); --h: calc(var(--fc-u) * 60); --d: calc(var(--fc-u) * 26);
}
.farsicast-experience .farsicast-box--grip {
  --w: calc(var(--fc-u) * 20); --h: calc(var(--fc-u) * 56); --d: calc(var(--fc-u) * 10);
  --x: calc(var(--fc-u) * -38); --y: calc(var(--fc-u) * 2); --z: calc(var(--fc-u) * 18.2);
}
.farsicast-experience .farsicast-box--hump {
  --w: calc(var(--fc-u) * 34); --h: calc(var(--fc-u) * 14); --d: calc(var(--fc-u) * 22);
  --x: calc(var(--fc-u) * 8); --y: calc(var(--fc-u) * -36.8); --z: 0px;
}

.farsicast-experience .farsicast-box--body .farsicast-face--front,
.farsicast-experience .farsicast-box--body .farsicast-face--back {
  border-radius: calc(var(--fc-u) * 5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 18%),
    linear-gradient(180deg, var(--fc-body-light), var(--fc-body) 40%, var(--fc-body-dark));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.farsicast-experience .farsicast-box--body .farsicast-face--left,
.farsicast-experience .farsicast-box--body .farsicast-face--right {
  background: linear-gradient(180deg, #2a2a2f, #151518 60%, #0c0c0e);
  border-radius: calc(var(--fc-u) * 2);
}
.farsicast-experience .farsicast-box--body .farsicast-face--top {
  background: linear-gradient(180deg, #3a3a40, #26262b);
  border-radius: calc(var(--fc-u) * 4);
}
.farsicast-experience .farsicast-box--body .farsicast-face--bottom { background: #0a0a0c; }

.farsicast-experience .farsicast-camera__leather {
  position: absolute; left: 0; right: 0; top: calc(var(--fc-u) * 15); bottom: calc(var(--fc-u) * 4);
  background-color: #141417;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.6px, transparent 0.9px);
  background-size: 3px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.farsicast-experience .farsicast-camera__af {
  position: absolute; left: calc(var(--fc-u) * 25); top: calc(var(--fc-u) * 6);
  width: calc(var(--fc-u) * 2.6); height: calc(var(--fc-u) * 2.6); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a2a1e, #1c0d09 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.farsicast-experience.is-af .farsicast-camera__af { animation: fc-af 0.42s steps(1, end) infinite; }
.farsicast-experience .farsicast-camera__fnbtn {
  position: absolute; left: calc(var(--fc-u) * 84); top: calc(var(--fc-u) * 46);
  width: calc(var(--fc-u) * 3.2); height: calc(var(--fc-u) * 3.2); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4a50, #18181b);
}

/* Grip */
.farsicast-experience .farsicast-box--grip .farsicast-face {
  background-color: var(--fc-rubber);
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 0.7px, transparent 1px);
  background-size: 4px 4px;
}
.farsicast-experience .farsicast-box--grip .farsicast-face--front {
  border-radius: calc(var(--fc-u) * 6) calc(var(--fc-u) * 3) calc(var(--fc-u) * 3) calc(var(--fc-u) * 6);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.5)),
    radial-gradient(rgba(255, 255, 255, 0.06) 0.7px, transparent 1px);
  background-size: auto, 4px 4px;
}
.farsicast-experience .farsicast-box--grip .farsicast-face--top { background: #2c2c31; border-radius: calc(var(--fc-u) * 3); }
.farsicast-experience .farsicast-camera__shutter {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--fc-u) * 7); height: calc(var(--fc-u) * 7); margin: calc(var(--fc-u) * -3.5);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d8d4cb, #77746d 55%, #3c3b38);
  box-shadow: 0 0 0 calc(var(--fc-u) * 0.8) #141416;
}

/* Hump */
.farsicast-experience .farsicast-box--hump .farsicast-face--front,
.farsicast-experience .farsicast-box--hump .farsicast-face--back {
  border-radius: calc(var(--fc-u) * 4) calc(var(--fc-u) * 4) 0 0;
  background: linear-gradient(180deg, #34343a, #1d1d21);
}
.farsicast-experience .farsicast-box--hump .farsicast-face--left,
.farsicast-experience .farsicast-box--hump .farsicast-face--right { background: linear-gradient(180deg, #2c2c31, #17171a); }
.farsicast-experience .farsicast-box--hump .farsicast-face--top { background: linear-gradient(180deg, #45454b, #2b2b30); }
.farsicast-experience .farsicast-camera__wordmark {
  position: absolute; left: 0; right: 0; bottom: calc(var(--fc-u) * 2.2);
  font: 500 calc(var(--fc-u) * 2.1)/1 var(--fc-font-latin);
  letter-spacing: 0.32em; text-align: center; color: #9b988f;
}
.farsicast-experience .farsicast-camera__flashwin {
  position: absolute; left: 50%; top: calc(var(--fc-u) * 2.2);
  width: calc(var(--fc-u) * 14); height: calc(var(--fc-u) * 4.4); margin-left: calc(var(--fc-u) * -7);
  border-radius: calc(var(--fc-u) * 1);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #3c3c42, #202024);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.farsicast-experience .farsicast-camera__evf {
  position: absolute; left: 50%; top: calc(var(--fc-u) * 2);
  width: calc(var(--fc-u) * 24); height: calc(var(--fc-u) * 10); margin-left: calc(var(--fc-u) * -12);
  border-radius: calc(var(--fc-u) * 2.5);
  background: radial-gradient(70% 70% at 50% 50%, #1b2230 0 34%, #0b0b0d 36%), #0b0b0d;
  box-shadow: inset 0 0 0 calc(var(--fc-u) * 0.6) #18181b;
}
.farsicast-experience .farsicast-camera__shoe {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--fc-u) * 14); height: calc(var(--fc-u) * 10); margin: calc(var(--fc-u) * -5) 0 0 calc(var(--fc-u) * -7);
  border-radius: calc(var(--fc-u) * 0.8);
  background: linear-gradient(90deg, #6c6a65, #b8b5ad 50%, #6c6a65);
  opacity: 0.55;
}
.farsicast-experience .farsicast-camera__dial {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle, #2e2e33 0 55%, transparent 56%),
    repeating-conic-gradient(#5b5a57 0 4deg, #1d1d20 4deg 8deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.farsicast-experience .farsicast-camera__dial--mode { left: calc(var(--fc-u) * 79); top: calc(var(--fc-u) * 6); width: calc(var(--fc-u) * 14); height: calc(var(--fc-u) * 14); }
.farsicast-experience .farsicast-camera__dial--ev { left: calc(var(--fc-u) * 26); top: calc(var(--fc-u) * 8); width: calc(var(--fc-u) * 10); height: calc(var(--fc-u) * 10); }
.farsicast-experience .farsicast-camera__lug {
  position: absolute; left: 50%; top: calc(var(--fc-u) * 6);
  width: calc(var(--fc-u) * 6); height: calc(var(--fc-u) * 3); margin-left: calc(var(--fc-u) * -3);
  border-radius: calc(var(--fc-u) * 1);
  background: linear-gradient(180deg, #8d8a83, #4a4945);
}
.farsicast-experience .farsicast-camera__port {
  position: absolute; left: 22%; right: 22%; top: 38%; height: 36%;
  border-radius: calc(var(--fc-u) * 1.4);
  background: #121215; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Back plate details */
.farsicast-experience .farsicast-camera__thumb {
  position: absolute; left: calc(var(--fc-u) * 73); top: calc(var(--fc-u) * 5);
  width: calc(var(--fc-u) * 23); height: calc(var(--fc-u) * 15);
  border-radius: calc(var(--fc-u) * 3);
  background-color: var(--fc-rubber);
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 0.7px, transparent 1px);
  background-size: 4px 4px;
}
.farsicast-experience .farsicast-camera__wheel {
  position: absolute; left: calc(var(--fc-u) * 78); top: calc(var(--fc-u) * 29);
  width: calc(var(--fc-u) * 14); height: calc(var(--fc-u) * 14); border-radius: 50%;
  background:
    radial-gradient(circle, #2a2a2f 0 34%, transparent 35%),
    repeating-conic-gradient(#46464b 0 5deg, #1a1a1d 5deg 10deg);
  box-shadow: 0 0 0 calc(var(--fc-u) * 0.5) #0d0d0f;
}
.farsicast-experience .farsicast-camera__btn {
  position: absolute; width: calc(var(--fc-u) * 4); height: calc(var(--fc-u) * 4); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4a50, #18181b);
}
.farsicast-experience .farsicast-camera__btn--1 { left: calc(var(--fc-u) * 75); top: calc(var(--fc-u) * 22.5); }
.farsicast-experience .farsicast-camera__btn--2 { left: calc(var(--fc-u) * 91); top: calc(var(--fc-u) * 22.5); }
.farsicast-experience .farsicast-camera__btn--3 { left: calc(var(--fc-u) * 91); top: calc(var(--fc-u) * 47); }
.farsicast-experience .farsicast-camera__led {
  position: absolute; left: calc(var(--fc-u) * 79); top: calc(var(--fc-u) * 49);
  width: calc(var(--fc-u) * 1.8); height: calc(var(--fc-u) * 1.8); border-radius: 50%;
  background: #2a2420;
}
.farsicast-experience[data-fc-upload="uploading"] .farsicast-camera__led,
.farsicast-experience[data-fc-upload="processing"] .farsicast-camera__led { background: var(--fc-accent); box-shadow: 0 0 8px var(--fc-accent); animation: fc-blink 0.5s steps(1, end) infinite; }
.farsicast-experience[data-fc-upload="success"] .farsicast-camera__led { background: var(--fc-ok); box-shadow: 0 0 8px var(--fc-ok); }
.farsicast-experience[data-fc-upload="error"] .farsicast-camera__led { background: var(--fc-signal); box-shadow: 0 0 8px var(--fc-signal); }

/* 9. Lens --------------------------------------------------------------------- */
.farsicast-experience .farsicast-lens {
  --lens-r: calc(var(--fc-u) * 20);
  --lens-l: calc(var(--fc-u) * 24);
  --facet-w: calc(var(--lens-rb, var(--lens-r)) * var(--facet-k, 0.3527) + 1px);   /* 2·r·tan(180°/n), +1px seam overlap */
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--fc-u) * 8), calc(var(--fc-u) * 3), calc(var(--fc-u) * 13));
}
.farsicast-experience .farsicast-lens__barrel { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.farsicast-experience .farsicast-lens__facet {
  position: absolute; left: 0; top: 0;
  width: var(--facet-w); height: var(--lens-l);
  margin: calc(var(--lens-l) / -2) 0 0 calc(var(--facet-w) / -2);
  transform: translateZ(calc(var(--lens-l) / 2)) rotateZ(var(--a)) translateY(calc(var(--lens-r) * -1)) rotateX(calc(90deg - var(--lens-tilt, 0deg)));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--facet-taper, 0%)) 100%, var(--facet-taper, 0%) 100%);
  background:
    linear-gradient(rgba(0, 0, 0, calc(1 - var(--l, 0.6))), rgba(0, 0, 0, calc(1 - var(--l, 0.6)))),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px) 0 34% / 100% 34% no-repeat,
    linear-gradient(180deg, #8d8a84 0 5%, #2a2a2e 5% 12%, #1b1b1e 12% 34%, #26262a 34% 68%, #18181b 68% 92%, #3a3a3f 92% 100%);
}
.farsicast-experience .farsicast-lens__mount,
.farsicast-experience .farsicast-lens__glass,
.farsicast-experience .farsicast-lens__front {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
}
.farsicast-experience .farsicast-lens__mount {
  --s: calc(var(--lens-r) * 2 + var(--fc-u) * 5);
  transform: translateZ(calc(var(--fc-u) * 0.3));
  background: conic-gradient(from 200deg, #6e6c66, #d2cec4, #7a7872, #2e2e30, #8d8a84, #6e6c66);
}
.farsicast-experience .farsicast-lens__glass {
  --s: calc(var(--lens-r) * 1.62);
  transform: translateZ(calc(var(--lens-l) - var(--fc-u) * 1.8));
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.7) 0 1.5%, rgba(255, 255, 255, 0.14) 4%, transparent 11%),
    radial-gradient(circle at 64% 70%, rgba(var(--fc-accent-rgb), 0.35), transparent 22%),
    conic-gradient(from 210deg, rgba(110, 70, 190, 0.45), rgba(40, 110, 140, 0.35), rgba(170, 120, 50, 0.3), rgba(110, 70, 190, 0.45)),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9%),
    radial-gradient(circle, #05060a 0 26%, #141a26 46%, #07080b 70%);
  background-blend-mode: screen, screen, soft-light, normal, normal;
  box-shadow: inset 0 0 calc(var(--fc-u) * 3) #000;
}
.farsicast-experience .farsicast-lens__front {
  --s: calc(var(--lens-r) * 2 + var(--fc-u) * 0.6);
  transform: translateZ(var(--lens-l));
  border: calc(var(--fc-u) * 3.6) solid #121214;
  box-shadow: inset 0 0 0 1px rgba(var(--fc-accent-rgb), 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* 10. Camera screen + upload views ------------------------------------------- */
.farsicast-experience .farsicast-screen {
  --fc-fs: max(11px, calc(var(--fc-u) * 2.3));
  position: absolute; left: calc(var(--fc-u) * 5); top: calc(var(--fc-u) * 8);
  width: calc(var(--fc-u) * 63); height: calc(var(--fc-u) * 44);
  border-radius: calc(var(--fc-u) * 1.6);
  background: #060607;
  box-shadow: inset 0 0 0 calc(var(--fc-u) * 0.9) #0d0d0f, 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  font-family: var(--fc-font-fa);
  color: var(--fc-paper);
  font-size: var(--fc-fs);
  line-height: 1.6;
  text-align: center;
}
.farsicast-experience .farsicast-screen__display {
  position: absolute; inset: calc(var(--fc-u) * 0.9);
  border-radius: calc(var(--fc-u) * 0.8);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #12141a, #07080a 70%);
  opacity: 0;
  transition: opacity 0.2s var(--fc-ease-out);
}
.farsicast-experience.is-screen-on .farsicast-screen__display { opacity: 1; animation: fc-boot 0.45s var(--fc-ease-out) both; }
.farsicast-experience .farsicast-screen__glare {
  position: absolute; inset: -20% -60%; z-index: 8; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.10) 47%, rgba(255, 255, 255, 0.03) 54%, transparent 62%);
  transform: translateX(calc((var(--fc-ry) - 172) * -2.4%));
}
.farsicast-experience .farsicast-screen__hud {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--fc-u) * 1.4) calc(var(--fc-u) * 2);
  font: 500 max(9px, calc(var(--fc-u) * 1.55))/1 var(--fc-font-mono);
  letter-spacing: 0.06em; color: rgba(243, 239, 231, 0.7);
  direction: ltr;
}
.farsicast-experience .farsicast-hud__battery {
  position: relative; width: calc(var(--fc-u) * 4); height: calc(var(--fc-u) * 2);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px;
}
.farsicast-experience .farsicast-hud__battery i { display: block; width: 80%; height: 100%; background: currentColor; }
.farsicast-experience .farsicast-hud__count { font-family: var(--fc-font-fa); letter-spacing: 0; }

.farsicast-experience .farsicast-view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--fc-ease-out), visibility 0s linear 0.35s;
}
.farsicast-experience .farsicast-screen[data-state="idle"] .farsicast-view--idle,
.farsicast-experience .farsicast-screen[data-state="selected"] .farsicast-view--selected,
.farsicast-experience .farsicast-screen[data-state="uploading"] .farsicast-view--busy,
.farsicast-experience .farsicast-screen[data-state="processing"] .farsicast-view--busy,
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-view--success,
.farsicast-experience .farsicast-screen[data-state="error"] .farsicast-view--error {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.farsicast-experience .farsicast-screen__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.farsicast-experience .farsicast-screen__img--dim { opacity: 0.32; filter: grayscale(1); }
.farsicast-experience .farsicast-screen__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 26%, transparent 52%, rgba(0, 0, 0, 0.78));
}

/* Idle: dropzone button styled like an AF frame */
.farsicast-experience .farsicast-upload__trigger {
  all: unset;
  position: absolute; inset: 14% 10% 10%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--fc-u) * 0.8);
  cursor: pointer; border-radius: calc(var(--fc-u) * 1);
  color: var(--fc-paper); font-family: var(--fc-font-fa); text-align: center;
  transition: background-color 0.3s var(--fc-ease-out);
}
.farsicast-experience .farsicast-upload__trigger:hover { background-color: rgba(243, 239, 231, 0.035); }
.farsicast-experience .farsicast-upload__trigger:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
.farsicast-experience .farsicast-upload__frame { position: absolute; inset: 0; pointer-events: none; }
.farsicast-experience .farsicast-upload__frame i {
  position: absolute; width: 14%; height: 18%;
  border: 0 solid rgba(243, 239, 231, 0.55);
  transition: transform 0.5s var(--fc-ease-out), border-color 0.3s;
}
.farsicast-experience .farsicast-upload__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.farsicast-experience .farsicast-upload__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.farsicast-experience .farsicast-upload__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.farsicast-experience .farsicast-upload__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.farsicast-experience .farsicast-upload__trigger:hover .farsicast-upload__frame i,
.farsicast-experience .farsicast-upload__trigger:focus-visible .farsicast-upload__frame i,
.farsicast-experience.is-dragover .farsicast-upload__frame i { border-color: var(--fc-accent); }
.farsicast-experience .farsicast-upload__trigger:hover .farsicast-upload__frame i:nth-child(1) { transform: translate(6%, 6%); }
.farsicast-experience .farsicast-upload__trigger:hover .farsicast-upload__frame i:nth-child(2) { transform: translate(-6%, 6%); }
.farsicast-experience .farsicast-upload__trigger:hover .farsicast-upload__frame i:nth-child(3) { transform: translate(6%, -6%); }
.farsicast-experience .farsicast-upload__trigger:hover .farsicast-upload__frame i:nth-child(4) { transform: translate(-6%, -6%); }
.farsicast-experience .farsicast-upload__plus {
  position: relative; width: calc(var(--fc-u) * 8); height: calc(var(--fc-u) * 8);
  margin-bottom: calc(var(--fc-u) * 1);
  border: 1px solid rgba(243, 239, 231, 0.5); border-radius: 50%;
}
.farsicast-experience .farsicast-upload__plus::before,
.farsicast-experience .farsicast-upload__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--fc-paper);
  width: 36%; height: 1.5px; transform: translate(-50%, -50%);
}
.farsicast-experience .farsicast-upload__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.farsicast-experience .farsicast-upload__label { font-size: calc(var(--fc-fs) * 1.2); font-weight: 600; }
.farsicast-experience .farsicast-upload__hint { font-size: calc(var(--fc-fs) * 0.86); color: var(--fc-paper-dim); }
.farsicast-experience .farsicast-upload__drag { font-size: calc(var(--fc-fs) * 0.8); color: rgba(243, 239, 231, 0.4); }
@media (hover: none) { .farsicast-experience .farsicast-upload__drag { display: none; } }

/* Busy */
.farsicast-experience .farsicast-loader { position: relative; width: calc(var(--fc-u) * 15); height: calc(var(--fc-u) * 15); }
.farsicast-experience .farsicast-loader svg { width: 100%; height: 100%; overflow: visible; }
.farsicast-experience .farsicast-loader__track { fill: none; stroke: rgba(243, 239, 231, 0.12); stroke-width: 1.5; }
.farsicast-experience .farsicast-loader__ring {
  --fc-ring: 0;
  fill: none; stroke: var(--fc-accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--fc-ring)) * 100);
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.25s linear;
}
.farsicast-experience .farsicast-screen[data-state="processing"] .farsicast-loader__ring {
  stroke-dasharray: 22 78; stroke-dashoffset: 0; transition: none;
  animation: fc-spin 1.4s linear infinite;
}
.farsicast-experience .farsicast-loader__iris { transform-origin: 50% 50%; animation: fc-spin 9s linear infinite reverse; }
.farsicast-experience .farsicast-loader__iris circle { fill: none; stroke: rgba(243, 239, 231, 0.4); stroke-width: 1; }
.farsicast-experience .farsicast-loader__iris path { fill: none; stroke: rgba(243, 239, 231, 0.45); stroke-width: 1; }
.farsicast-experience .farsicast-screen[data-state="processing"] .farsicast-loader__iris { animation-duration: 3.2s; }
.farsicast-experience .farsicast-busy__text { position: relative; margin-top: calc(var(--fc-u) * 2); color: var(--fc-paper); }

/* Success */
.farsicast-experience .farsicast-result { position: absolute; inset: 0; overflow: hidden; }
.farsicast-experience .farsicast-result__develop { position: absolute; inset: 0; background: #fff; opacity: 0; }
.farsicast-experience .farsicast-result__badge,
.farsicast-experience .farsicast-result__exif,
.farsicast-experience .farsicast-result__message { position: absolute; z-index: 4; }
.farsicast-experience .farsicast-result__badge {
  top: calc(var(--fc-u) * 4.6); right: calc(var(--fc-u) * 2);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.25em 0.75em; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); font-size: calc(var(--fc-fs) * 0.85);
}
.farsicast-experience .farsicast-result__badge i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--fc-ok); box-shadow: 0 0 6px var(--fc-ok); }
.farsicast-experience .farsicast-result__exif {
  top: calc(var(--fc-u) * 5.2); left: calc(var(--fc-u) * 2);
  font: 500 max(9px, calc(var(--fc-u) * 1.5))/1 var(--fc-font-mono); letter-spacing: 0.06em; color: rgba(243, 239, 231, 0.75);
}
.farsicast-experience .farsicast-result__message {
  left: 6%; right: 6%; bottom: calc(var(--fc-u) * 10.5);
  font-weight: 600; font-size: calc(var(--fc-fs) * 1.05);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-result__develop { animation: fc-develop-img 1.6s var(--fc-ease-out) 0.1s both; }
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-result__img { animation: fc-settle 1.8s var(--fc-ease-out) both; }
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-screen__hud,
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-result__exif { animation: fc-rise 0.6s var(--fc-ease-out) 0.75s both; }
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-result__message { animation: fc-rise 0.7s var(--fc-ease-out) 1s both; }
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-result__badge { animation: fc-pop 0.5s var(--fc-ease-out) 1.25s both; }
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-controls { animation: fc-rise 0.6s var(--fc-ease-out) 1.35s both; }

/* Error */
.farsicast-experience .farsicast-error__icon {
  position: relative; width: calc(var(--fc-u) * 7); height: calc(var(--fc-u) * 7);
  border: 1.5px solid var(--fc-danger); border-radius: 50%; margin-bottom: calc(var(--fc-u) * 1.5);
}
.farsicast-experience .farsicast-error__icon::before,
.farsicast-experience .farsicast-error__icon::after {
  content: ""; position: absolute; left: 50%; width: 1.5px; background: var(--fc-danger); transform: translateX(-50%);
}
.farsicast-experience .farsicast-error__icon::before { top: 24%; height: 32%; }
.farsicast-experience .farsicast-error__icon::after { bottom: 22%; height: 1.5px; width: 1.5px; }
.farsicast-experience .farsicast-error__text { max-width: 82%; margin-bottom: calc(var(--fc-u) * 8); color: var(--fc-paper); }

/* Screen effects */
.farsicast-experience .farsicast-screen__glow {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 80% at 50% 50%, rgba(255, 248, 235, 0.55), rgba(var(--fc-accent-rgb), 0.15) 60%, transparent);
}
.farsicast-experience .farsicast-screen[data-state="success"] .farsicast-screen__glow { animation: fc-glow 0.9s var(--fc-ease-out) both; }
.farsicast-experience .farsicast-screen__shutter { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; }
.farsicast-experience .farsicast-screen.is-shutter .farsicast-screen__shutter { animation: fc-shutter 0.28s ease-out both; }
.farsicast-experience .farsicast-screen__dragmask {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--fc-accent-rgb), 0.18); box-shadow: inset 0 0 0 2px var(--fc-accent);
  font-weight: 600; opacity: 0; transition: opacity 0.2s;
}
.farsicast-experience.is-dragover .farsicast-screen__dragmask { opacity: 1; }

/* 11. Controls / buttons / dock ------------------------------------------------ */
.farsicast-experience .farsicast-controls-slot {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--fc-u) * 3);
  display: flex; justify-content: center;
}
.farsicast-experience .farsicast-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.farsicast-experience .farsicast-controls-slot .farsicast-controls { gap: calc(var(--fc-u) * 1.4); }
.farsicast-experience .farsicast-btn {
  appearance: none; -webkit-appearance: none;
  display: none; align-items: center; justify-content: center; gap: 0.5em;
  margin: 0; min-height: 0; width: auto;
  padding: 0.62em 1.25em; border-radius: 999px;
  border: 1px solid rgba(243, 239, 231, 0.28);
  background: rgba(10, 10, 12, 0.55);
  color: var(--fc-paper);
  font: 500 var(--fc-btn-fs, max(12px, calc(var(--fc-u) * 2.1)))/1.2 var(--fc-font-fa);
  letter-spacing: 0; text-transform: none; text-decoration: none; text-shadow: none; box-shadow: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--fc-ease-out);
}
.farsicast-experience .farsicast-btn:hover { border-color: var(--fc-paper); background: rgba(243, 239, 231, 0.1); color: var(--fc-paper); }
.farsicast-experience .farsicast-btn:active { transform: scale(0.97); }
.farsicast-experience .farsicast-btn:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
.farsicast-experience .farsicast-btn--primary { background: var(--fc-paper); color: var(--fc-ink); border-color: var(--fc-paper); }
.farsicast-experience .farsicast-btn--primary:hover { background: #fff; color: var(--fc-ink); }
.farsicast-experience .farsicast-btn__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--fc-signal); }
.farsicast-experience[data-fc-upload="selected"] .farsicast-btn[data-for~="selected"],
.farsicast-experience[data-fc-upload="uploading"] .farsicast-btn[data-for~="uploading"],
.farsicast-experience[data-fc-upload="processing"] .farsicast-btn[data-for~="processing"],
.farsicast-experience[data-fc-upload="success"] .farsicast-btn[data-for~="success"],
.farsicast-experience[data-fc-upload="error"] .farsicast-btn[data-for~="error"] { display: inline-flex; }
.farsicast-experience .farsicast-dock {
  grid-row: 2; grid-column: 1; margin-top: 28px; min-height: 48px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--fc-ease-out), visibility 0s 0.4s;
}
.farsicast-experience .farsicast-dock .farsicast-btn { --fc-btn-fs: 0.9375rem; min-height: 46px; padding-inline: 1.4em; }
.farsicast-experience[data-fc-stage="3"]:not([data-fc-upload="idle"]) .farsicast-dock { opacity: 1; visibility: visible; transition-delay: 0s; }

/* 12. Flash -------------------------------------------------------------------- */
.farsicast-experience .farsicast-flash {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 80% at 36% 46%, #fff 0 30%, #fbf7ef 60%, #eee5d6);
}
.farsicast-experience.is-flashing .farsicast-flash { animation: fc-flash 1s linear both; }
.farsicast-experience.is-flashing .farsicast-camera__flashwin { animation: fc-flashwin 0.6s ease-out both; }

/* 13. Microphone ---------------------------------------------------------------- */
.farsicast-experience .farsicast-mic-rig {
  position: absolute; left: 50%; top: 50%;
  height: var(--fc-mic-h); aspect-ratio: 1 / 2;
  transform: translate(calc(-50% + var(--fc-mx) * 1vw), calc(-50% + var(--fc-my) * 1%)) scale(var(--fc-ms));
  opacity: var(--fc-mo);
  pointer-events: none;
}
.farsicast-experience .farsicast-mic {
  position: relative; display: block; width: 100%; height: 100%;
  transform-origin: 50% 66%;
  animation: fc-sway 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}
.farsicast-experience .farsicast-mic__wave {
  position: absolute; left: 50%; top: 21%;
  width: 92%; aspect-ratio: 1; margin-left: -46%; margin-top: -46%;
  border-radius: 50%; border: 1px solid rgba(var(--fc-accent-rgb), 0.5);
  opacity: 0; transform: scale(0.5);
  animation: fc-wave 4.8s var(--fc-ease-out) infinite;
}
.farsicast-experience .farsicast-mic__wave:nth-child(2) { animation-delay: 1.6s; }
.farsicast-experience .farsicast-mic__wave:nth-child(3) { animation-delay: 3.2s; }

/* 13b. Real-device assets (image-sequence camera, photo microphone) ------------------ */
.farsicast-experience .farsicast-camera-media {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
}
.farsicast-experience .farsicast-camera-media[hidden] { display: none; }
.farsicast-experience .farsicast-camera-media__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.farsicast-experience .farsicast-camera-media__screen { position: absolute; }
.farsicast-experience.is-seq .farsicast-camera-float { display: none; }
.farsicast-experience.is-seq .farsicast-camera-shadow { opacity: 0.6; }
.farsicast-experience .farsicast-camera-media__screen .farsicast-screen {
  left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 2px; box-shadow: none; background: transparent;
  opacity: 0; transition: opacity 0.35s var(--fc-ease-out);
}
.farsicast-experience.is-seq-back .farsicast-camera-media__screen .farsicast-screen { opacity: 1; }
.farsicast-experience .farsicast-camera-media__screen .farsicast-screen__display { inset: 0; border-radius: 2px; }
.farsicast-experience .farsicast-mic--photo { object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.farsicast-experience .farsicast-mic__wave { top: var(--fc-wave-y, 21%); }

/* 13c. Photo-faces camera (real product photos on every face) --------------------------- */
.farsicast-experience.is-photo .farsicast-box--body .farsicast-face--front,
.farsicast-experience.is-photo .farsicast-box--body .farsicast-face--back {
  overflow: visible; background: none; box-shadow: none; border-radius: 0;
}
.farsicast-experience.is-photo .farsicast-box--body .farsicast-face--front > :not(.farsicast-photo),
.farsicast-experience.is-photo .farsicast-box--body .farsicast-face--back > .farsicast-shade,
.farsicast-experience.is-photo .farsicast-camera__thumb,
.farsicast-experience.is-photo .farsicast-camera__wheel,
.farsicast-experience.is-photo .farsicast-camera__btn,
.farsicast-experience.is-photo .farsicast-camera__led,
.farsicast-experience.is-photo .farsicast-camera__dial,
.farsicast-experience.is-photo .farsicast-camera__lug,
.farsicast-experience.is-photo .farsicast-camera__port,
.farsicast-experience.is-photo .farsicast-camera__shutter,
.farsicast-experience.is-photo .farsicast-camera__shoe,
.farsicast-experience.is-photo .farsicast-lens__glass,
.farsicast-experience.is-photo .farsicast-box--hump .farsicast-face--front,
.farsicast-experience.is-photo .farsicast-box--hump .farsicast-face--back { display: none; }

/* Full front/back photo layers (bigger than the body box so hump, dials and lugs extend past it) */
.farsicast-experience .farsicast-photo {
  position: absolute; display: block; pointer-events: none;
  background: var(--fc-tex) center / 100% 100% no-repeat;
}
/* Shading overlays follow the photo's silhouette, so transparent areas never turn into dark boxes */
.farsicast-experience .farsicast-photo__shade,
.farsicast-experience .farsicast-face.has-photo > .farsicast-shade {
  position: absolute; inset: 0; background: #000;
  -webkit-mask: var(--fc-tex) center / 100% 100% no-repeat;
          mask: var(--fc-tex) center / 100% 100% no-repeat;
}
/* Textured faces (sides, top, grip) */
.farsicast-experience .farsicast-face.has-photo {
  background: var(--fc-tex) center / 100% 100% no-repeat;
  border-radius: 0; box-shadow: none;
}
/* Untextured faces in photo mode: matte body material */
.farsicast-experience.is-photo .farsicast-face:not(.has-photo):not(.farsicast-face--front):not(.farsicast-face--back),
.farsicast-experience.is-photo .farsicast-box--grip .farsicast-face--right:not(.has-photo),
.farsicast-experience.is-photo .farsicast-box--grip .farsicast-face--bottom {
  background-color: #121214;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 0.7px, transparent 1px);
  background-size: 4px 4px;
  border-radius: calc(var(--fc-u) * 1);
}
/* Lens barrel textured from the side photo */
.farsicast-experience.is-photo .farsicast-lens__facet {
  background:
    linear-gradient(rgba(0, 0, 0, calc((1 - var(--l, 0.6)) * 0.85)), rgba(0, 0, 0, calc((1 - var(--l, 0.6)) * 0.85))),
    var(--fc-lens-tex) center / 100% 100% no-repeat,
    #141416;
}
.farsicast-experience.is-photo .farsicast-lens__mount {
  --s: calc(var(--lens-rb) * 2 + 2px);
  background: radial-gradient(circle, #050506 0 60%, #121214 61%);
}
.farsicast-experience.is-photo .farsicast-lens__front {
  --s: calc(var(--lens-rf) * 2);
  border: 0; box-shadow: none;
  background-image: var(--fc-photo-front); background-repeat: no-repeat;
}
.farsicast-experience.is-photo .farsicast-screen { border-radius: 0; box-shadow: none; background: transparent; }
.farsicast-experience.is-photo .farsicast-screen__display { inset: 0; border-radius: 0; }

/* Near-orthographic perspective for photo mode: product photos are shot with long lenses */
.farsicast-experience.is-photo .farsicast-camera-rig { perspective: calc(var(--fc-cam-w) * var(--fc-photo-perspective, 9)); }

/* Seen from behind, the lens and grip front are fully hidden by the body; take them out of the
   3D sort so they can never bleed through the rear screen. */
.farsicast-experience.is-photo.is-rear .farsicast-lens,
.farsicast-experience.is-photo.is-rear .farsicast-box--grip .farsicast-face--front { visibility: hidden; }

/* Self-timer lamp (photo mode). Slow blink while the camera aims at you, rapid countdown, then flash. */
.farsicast-experience .farsicast-photo__lamp {
  position: absolute; z-index: 3;
  width: var(--lamp-w); height: var(--lamp-h);
  transform: translate(-50%, -50%);
  border-radius: 40%;
  background: radial-gradient(closest-side, #ffe5e5, #ff6b6b 45%, var(--fc-accent) 80%, transparent);
  opacity: 0;
}
.farsicast-experience .farsicast-photo__lamp::after {     /* light spill on the body around the lamp */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 900%; height: 600%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--fc-accent-rgb), 0.55), rgba(var(--fc-accent-rgb), 0.15) 45%, transparent);
  border-radius: 50%;
}
.farsicast-experience.is-af .farsicast-photo__lamp { animation: fc-timer-slow 0.9s steps(1, end) infinite; }
.farsicast-experience.is-countdown .farsicast-photo__lamp { animation: fc-timer-fast 0.7s linear both; }
.farsicast-experience.is-countdown .farsicast-camera__af { animation: fc-af 0.14s steps(1, end) infinite; }
@keyframes fc-timer-slow { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fc-timer-fast {
  0% { opacity: 1; } 10% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: 0; }
  40% { opacity: 1; } 48% { opacity: 0; } 56% { opacity: 1; } 63% { opacity: 0; }
  70% { opacity: 1; } 76% { opacity: 0; } 82%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .farsicast-experience.is-af .farsicast-photo__lamp,
  .farsicast-experience.is-countdown .farsicast-photo__lamp { animation: none; opacity: 1; }
}

/* 13d. Chapter 05 — services (waveform lines + expanding cards) --------------------------- */
.farsicast-experience .farsicast-voices {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: flex-start;   /* RTL: panel on the right */
  padding-inline: var(--fc-gutter) 0;
  opacity: var(--fc-vo);
  transform: translate3d(0, calc((1 - var(--fc-vo)) * 28px), 0);
  pointer-events: none;
}
.farsicast-experience[data-fc-stage="5"] .farsicast-voices { pointer-events: auto; }
.farsicast-experience .farsicast-copy { transition: opacity 0.5s var(--fc-ease-out); }
.farsicast-experience[data-fc-stage="5"] .farsicast-copy { opacity: 0; pointer-events: none; }
.farsicast-experience .farsicast-voices__inner { width: min(50vw, 760px); }
.farsicast-experience .farsicast-voices__head { margin-bottom: 18px; }
.farsicast-experience .farsicast-voices .farsicast-eyebrow { opacity: 1; margin-bottom: 12px; }
.farsicast-experience .farsicast-voices__title {
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.35;
  color: var(--fc-paper); text-wrap: balance;
}
.farsicast-experience .farsicast-voices__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.farsicast-experience .farsicast-voice { position: relative; margin: 0; padding: 0; list-style: none; }
.farsicast-experience .farsicast-voice::before, .farsicast-experience .farsicast-voice::marker { content: none; }

/* The waveform: runs from the microphone (its left end) to the row */
.farsicast-experience .farsicast-voice__wave {
  position: absolute; top: 26px; right: 100%;
  width: var(--fc-reach, 0px); height: 60px; margin-top: -30px; margin-right: 6px;
  overflow: visible; pointer-events: none;
}
.farsicast-experience .farsicast-voice__wave path {
  fill: none; stroke: rgba(243, 239, 231, 0.32); stroke-width: 1.4;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fc-draw));
  transition: stroke 0.5s;
}
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__wave path {
  stroke: var(--fc-accent); stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(var(--fc-accent-rgb), 0.55));
}
.farsicast-experience .farsicast-voice__wave path.is-echo { stroke-width: 1; opacity: 0.35; filter: none; }
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__wave path.is-echo { stroke-width: 1.1; opacity: 0.45; filter: none; }

/* In chapter 05 the microphone sits ABOVE the waveform lines, so they emerge from underneath it */
.farsicast-experience .farsicast-visual { pointer-events: none; }
.farsicast-experience[data-fc-stage="5"] .farsicast-visual { z-index: 7; }

/* Row = pill (same language as tab pills) */
.farsicast-experience .farsicast-voice__pill {
  appearance: none; -webkit-appearance: none;
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; height: 52px; margin: 0; padding: 0 22px;
  border-radius: 999px; border: 1px solid rgba(243, 239, 231, 0.12);
  background: rgba(243, 239, 231, 0.05);
  color: var(--fc-paper); font: 500 1rem/1 var(--fc-font-fa); text-align: right;
  letter-spacing: 0; text-transform: none; box-shadow: none;
  cursor: pointer; overflow: hidden;
  opacity: calc(0.35 + var(--fc-draw) * 0.65);
  transition: background-color 0.4s var(--fc-ease-out), color 0.4s, border-color 0.4s;
}
.farsicast-experience .farsicast-voice__pill:hover { background: rgba(243, 239, 231, 0.1); color: var(--fc-paper); }
.farsicast-experience .farsicast-voice__pill:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__pill { background: var(--fc-paper); color: var(--fc-ink); border-color: var(--fc-paper); }
.farsicast-experience .farsicast-voice__num { color: var(--fc-accent); font-size: 0.875rem; }
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__num { color: var(--fc-accent-deep); }
.farsicast-experience .farsicast-voice__name { flex: 1; }
.farsicast-experience .farsicast-voice__pill::after {           /* + / − */
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  opacity: 0.7; transition: transform 0.4s var(--fc-ease-out);
}
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__pill::after { transform: rotate(90deg); background-size: 12px 1.5px, 0 0; }
.farsicast-experience .farsicast-voice__bar {
  position: absolute; inset-inline: 22px; bottom: 7px; height: 2px; border-radius: 2px;
  background: rgba(243, 239, 231, 0.12); overflow: hidden;
}
.farsicast-experience .farsicast-voice__bar i {
  display: block; height: 100%; background: var(--fc-accent);
  transform-origin: 100% 50%; transform: scaleX(var(--fc-fill));
}
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__bar { background: rgba(11, 11, 13, 0.12); }
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__bar i { background: var(--fc-ink); }

/* Expanding card */
.farsicast-experience .farsicast-voice__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--fc-ease-out);
}
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__panel { grid-template-rows: 1fr; }
.farsicast-experience .farsicast-voice__card { min-height: 0; overflow: hidden; }
.farsicast-experience .farsicast-voice__media {
  position: relative; margin: 10px 0 4px; padding: 0;
  height: min(24vw, 36vh); border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 120% at 70% 20%, #2a241c, #0e0e10 70%);
}
.farsicast-experience .farsicast-voice__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1.4s var(--fc-ease-out);
}
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__media img { transform: none; }
.farsicast-experience .farsicast-voice__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 42%, transparent 62%, rgba(0, 0, 0, 0.5));
}
.farsicast-experience .farsicast-voice__caption {
  position: absolute; z-index: 1; top: 0; inset-inline-start: 0;
  max-width: min(440px, 78%); margin: 0; padding: clamp(18px, 2vw, 28px);
  color: #fff; font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; line-height: 1.7;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--fc-ease-out) 0.25s, transform 0.6s var(--fc-ease-out) 0.25s;
}
.farsicast-experience .farsicast-voice__caption b { color: var(--fc-accent); font-weight: 700; }
.farsicast-experience .farsicast-voice__cta {
  position: absolute; z-index: 1; bottom: 16px; inset-inline-start: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--fc-paper); color: var(--fc-ink);
  font: 600 0.9375rem/1 var(--fc-font-fa); text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s var(--fc-ease-out) 0.4s, transform 0.6s var(--fc-ease-out) 0.4s, background-color 0.25s;
}
.farsicast-experience .farsicast-voice__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.farsicast-experience .farsicast-voice__cta:hover { background: var(--fc-accent); color: var(--fc-ink); }
.farsicast-experience .farsicast-voice__cta:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 3px; }
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__caption,
.farsicast-experience .farsicast-voice.is-open .farsicast-voice__cta { opacity: 1; transform: none; }

/* Discrete mode (reduced motion / no GSAP): lines and bars transition instead of scrubbing */
.farsicast-experience.is-discrete .farsicast-voice { transition: --fc-draw 0.8s var(--fc-ease-out), --fc-fill 0.8s; }
.farsicast-experience.is-discrete .farsicast-voices { transition: --fc-vo 0.6s; }
.farsicast-experience.is-discrete .farsicast-mic-rig { transition: --fc-my 1.2s var(--fc-ease-out), --fc-ms 1.2s var(--fc-ease-out), --fc-mo 0.8s, --fc-mx 1.2s var(--fc-ease-inout); }

/* 14. Idle motion & state hooks ---------------------------------------------------- */
/* Pause ambient loops whenever they aren't the focus, and when off-screen */
.farsicast-experience:not([data-fc-stage="4"]) .farsicast-mic,
.farsicast-experience:not([data-fc-stage="4"]) .farsicast-mic__wave,
.farsicast-experience[data-fc-stage="3"] .farsicast-camera-float,
.farsicast-experience[data-fc-stage="4"] .farsicast-camera-float,
.farsicast-experience.is-scrolled .farsicast-scroll-hint i::after,
.farsicast-experience.is-offscreen .farsicast-camera-float,
.farsicast-experience.is-offscreen .farsicast-mic,
.farsicast-experience.is-offscreen .farsicast-mic__wave,
.farsicast-experience.is-offscreen .farsicast-loader__iris,
.farsicast-experience.is-offscreen .farsicast-loader__ring { animation-play-state: paused; }

/* Discrete mode (reduced motion / GSAP missing): poses transition per chapter */
.farsicast-experience.is-discrete .farsicast-camera {
  transition: --fc-rx 1.2s var(--fc-ease-inout), --fc-ry 1.2s var(--fc-ease-inout), --fc-rz 1.2s var(--fc-ease-inout),
              --fc-cz 1.2s var(--fc-ease-inout), --fc-cs 1.2s var(--fc-ease-inout);
}
.farsicast-experience.is-discrete .farsicast-camera-rig { transition: --fc-px 1.2s var(--fc-ease-inout), --fc-py 1.2s var(--fc-ease-inout), --fc-ro 0.6s; }
.farsicast-experience.is-discrete .farsicast-mic-rig { transition: --fc-my 1.2s var(--fc-ease-out), --fc-ms 1.2s var(--fc-ease-out), --fc-mo 0.8s; }
.farsicast-experience.is-discrete .farsicast-backdrop { transition: --fc-warm 1.2s; }
.farsicast-experience.is-discrete .farsicast-progress__bar { transition: --fc-progress 0.2s linear; }

/* Keyframes */
@keyframes fc-float { from { transform: translate3d(0, calc(var(--fc-u) * 0.9), 0); } to { transform: translate3d(0, calc(var(--fc-u) * -0.9), 0); } }
@keyframes fc-hint { 0% { transform: translateY(-14px); } 100% { transform: translateY(40px); } }
@keyframes fc-af { 0% { background: #ff6b6b; box-shadow: 0 0 calc(var(--fc-u) * 3) var(--fc-accent); } 50% { background: #3a1010; box-shadow: none; } }
@keyframes fc-blink { 50% { opacity: 0.25; } }
@keyframes fc-flash {
  0% { opacity: 0; }
  6% { opacity: 0.97; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
  100% { opacity: 0; }
}
@keyframes fc-flashwin {
  0% { background: #fff; box-shadow: 0 0 calc(var(--fc-u) * 12) calc(var(--fc-u) * 4) rgba(255, 255, 255, 0.9); }
  100% { box-shadow: none; }
}
@keyframes fc-develop {
  0% { opacity: 1; color: #fff; filter: blur(4px); text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.95), 0 0 1.4em rgba(255, 236, 210, 0.7); }
  55% { opacity: 1; filter: blur(0); text-shadow: 0 0 0.3em rgba(255, 245, 230, 0.35); }
  100% { opacity: 1; filter: none; text-shadow: none; }
}
@keyframes fc-boot { 0% { opacity: 0; filter: brightness(2.2); } 30% { opacity: 1; } 100% { opacity: 1; filter: none; } }
@keyframes fc-spin { to { transform: rotate(270deg); } }
@keyframes fc-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fc-develop-img { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fc-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes fc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fc-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes fc-shutter { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fc-sway { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }
@keyframes fc-wave { 0% { opacity: 0; transform: scale(0.5); } 15% { opacity: 0.45; } 100% { opacity: 0; transform: scale(1.7); } }
.farsicast-experience .farsicast-loader__ring { animation-name: none; }
.farsicast-experience .farsicast-screen[data-state="processing"] .farsicast-loader__ring { animation-name: fc-spin-ring; }
@keyframes fc-spin-ring { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

/* 15. Responsive ------------------------------------------------------------------- */
/* Stacked layout: phones & portrait tablets. Landscape phones keep the wide layout. */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 1023px) and (min-height: 601px) {
  .farsicast-experience {
    --fc-cam-w: min(84vw, 560px);
    --fc-mic-h: min(44vh, 460px);
    --fc-track-length: 360vh;
    --fc-story-scale: 0.92;
    --fc-size-h: clamp(1.7rem, 1rem + 3.4vw, 2.8rem);
    --fc-gutter: 20px;
  }
  .farsicast-experience .farsicast-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.22fr) minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
  }
  .farsicast-experience .farsicast-copy {
    align-content: start; text-align: center; justify-items: center;
    padding: 0 var(--fc-gutter) calc(64px + env(safe-area-inset-bottom));
  }
  .farsicast-experience .farsicast-chapter { align-self: start; }
  .farsicast-experience .farsicast-eyebrow { justify-content: center; margin-bottom: 14px; }
  .farsicast-experience .farsicast-headline { margin-inline: auto; }
  .farsicast-experience .farsicast-sub { margin-inline: auto; margin-top: 12px; }
  .farsicast-experience .farsicast-dock { justify-self: stretch; margin-top: 22px; }
  .farsicast-experience .farsicast-viewfinder__corner { display: none; }
  /* Opening pose on stacked layouts (POSES.stacked.idle) */
  .farsicast-experience .farsicast-camera { --fc-rx: 0; --fc-ry: -18; --fc-cz: -0.1; --fc-cs: 0.64; }
  .farsicast-experience .farsicast-camera-rig { --fc-px: 5; }
  .farsicast-experience .farsicast-readout { left: 20px; top: 20px; bottom: auto; }
  .farsicast-experience .farsicast-progress { right: 20px; top: 25px; bottom: auto; width: 72px; }
  .farsicast-experience .farsicast-scroll-hint { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .farsicast-experience .farsicast-backdrop__light--cool { background: radial-gradient(80% 50% at 50% 30%, rgba(226, 230, 238, 0.10), transparent 64%); }
  .farsicast-experience .farsicast-voices { align-items: flex-start; padding: 26svh 16px 20px; }
  .farsicast-experience .farsicast-voices__inner { width: 100%; }
  .farsicast-experience .farsicast-voices__head { margin-bottom: 10px; text-align: center; }
  .farsicast-experience .farsicast-voices .farsicast-eyebrow { justify-content: center; margin-bottom: 6px; }
  .farsicast-experience .farsicast-voices__title { font-size: 1.35rem; }
  .farsicast-experience .farsicast-voices__list { gap: 6px; }
  .farsicast-experience .farsicast-voice { padding-top: 12px; }
  .farsicast-experience .farsicast-voice__wave { top: 0; right: 0; left: 0; width: auto; height: 22px; margin: 0; }
  .farsicast-experience .farsicast-voice__pill { height: 44px; padding: 0 18px; font-size: 0.9375rem; }
  .farsicast-experience .farsicast-voice__media { height: min(46vw, 25svh); border-radius: 18px; }
  .farsicast-experience .farsicast-voice__caption { font-size: 14px; padding: 14px 16px; max-width: 92%; }
  .farsicast-experience .farsicast-voice__cta { bottom: 12px; inset-inline-start: 12px; padding: 10px 16px; font-size: 0.875rem; }
  .farsicast-experience .farsicast-backdrop__light--warm { background: radial-gradient(80% 50% at 50% 30%, rgba(var(--fc-accent-rgb), 0.10), transparent 64%); }
}
@media (max-width: 767px) and (orientation: portrait) {
  .farsicast-experience { --fc-cam-w: min(88vw, 50vh, 440px); --fc-track-length: 340vh; --fc-story-scale: 0.86; }
  .farsicast-experience .farsicast-screen { --fc-fs: max(11px, calc(var(--fc-u) * 2.7)); }
  .farsicast-experience .farsicast-upload__drag { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .farsicast-experience { --fc-cam-w: min(42vw, 92vh); --fc-mic-h: 78vh; --fc-size-h: clamp(1.4rem, 3.2vw, 2.2rem); }
  .farsicast-experience .farsicast-viewfinder__corner, .farsicast-experience .farsicast-scroll-hint { display: none; }
}

/* 16. Reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .farsicast-experience .farsicast-camera-float,
  .farsicast-experience .farsicast-mic,
  .farsicast-experience .farsicast-mic__wave,
  .farsicast-experience .farsicast-loader__iris,
  .farsicast-experience .farsicast-scroll-hint i::after,
  .farsicast-experience.is-af .farsicast-camera__af { animation: none !important; }
  .farsicast-experience .farsicast-word { transform: none !important; filter: none !important; transition: opacity 0.3s linear !important; transition-delay: 0s !important; }
  .farsicast-experience .farsicast-chapter.is-developing .farsicast-word { animation: none; opacity: 1; }
  .farsicast-experience .farsicast-camera-tilt { transition: none; }
  .farsicast-experience.is-discrete .farsicast-camera,
  .farsicast-experience.is-discrete .farsicast-camera-rig,
  .farsicast-experience.is-discrete .farsicast-mic-rig { transition: --fc-ro 0.3s linear, --fc-mo 0.3s linear; }
  .farsicast-experience .farsicast-screen[data-state="success"] * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .farsicast-experience.is-flashing .farsicast-flash { animation: none; }
  .farsicast-experience .farsicast-upload__frame i { transition: none; }
  .farsicast-experience .farsicast-voice__panel,
  .farsicast-experience .farsicast-voice__media img,
  .farsicast-experience .farsicast-voice__caption,
  .farsicast-experience .farsicast-voice__cta { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* 17. Editor / pre-JS fallback ----------------------------------------------------------- */
/* Until JS boots (or in the Elementor editor) show a calm, static first chapter */
.farsicast-experience:not(.is-ready) .farsicast-track,
.farsicast-experience.is-editor .farsicast-track { height: auto; }
.farsicast-experience:not(.is-ready) .farsicast-stage,
.farsicast-experience.is-editor .farsicast-stage { position: relative; min-height: 640px; }
.farsicast-experience:not(.is-ready) .farsicast-chapter:first-child .farsicast-word,
.farsicast-experience.is-editor .farsicast-chapter:first-child .farsicast-word { opacity: 1; transform: none; filter: none; }
.farsicast-experience.is-editor .farsicast-camera-float { animation: none; }
@supports not (opacity: calc(cos(0deg))) {
  .farsicast-experience .farsicast-photo__shade { opacity: 0.18; }
}