/* ============================================================
   BASE — reset, app shell, ambient light, and cross-cutting
   interaction states. Loaded second, after tokens.css.

   v4 EVOLUTION: introduces the ambient "living light" field that
   sits behind every Act I canvas (the dark screens), a refined
   custom scrollbar, and the reveal choreography that screens use
   on entrance. All v3 reset / shell / a11y / RTL rules are kept.
   ============================================================ */
/* ============================================================ RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  /* v4: the canvas is no longer flat — a deep, off-center apothecary
     field gives the area around the app column warmth and depth on
     desktop, and seeds the ambient glow on mobile. */
  background:
    radial-gradient(120% 80% at 50% -10%, #1B1813 0%, var(--obsidian) 46%, #100E0B 100%),
    var(--obsidian);
  background-attachment: fixed;
  color: var(--snow);
  min-height: 100dvh; min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold-soft); color: var(--gold-bright); }
button { cursor: pointer; border: none; background: none; font-family: var(--ff-body); }
input, select { font-family: var(--ff-body); }

html[lang="en"] {
  --ff-body: 'Manrope', sans-serif;
  --ff-display: 'Bricolage Grotesque', sans-serif;
}
html[dir="ltr"] body { direction: ltr; }
html:not([lang="en"]) .hero-headline,
html:not([lang="en"]) .q-title,
html:not([lang="en"]) .loader-title,
html:not([lang="en"]) .report-title,
html:not([lang="en"]) .form-title,
html:not([lang="en"]) .success-title,
html:not([lang="en"]) .btn-start,
html:not([lang="en"]) .btn-next,
html:not([lang="en"]) .btn-get-protocol,
html:not([lang="en"]) .btn-submit,
html:not([lang="en"]) .btn-wa {
  letter-spacing: normal;
}

/* ============================================================ APP SHELL */
#app {
  position: relative; min-height: 100dvh; min-height: 100vh;
  max-width: 480px; margin: 0 auto;
  background: var(--obsidian);
  /* v4: hold the lit column off the deep body field with a hairline
     of light down each edge — the "instrument" sitting on a bench. */
  box-shadow: 0 0 0 1px rgba(247,242,230,0.03), 0 0 80px 10px rgba(8,7,5,0.55);
  isolation: isolate;
}

/* ---------- AMBIENT LIVING LIGHT (Act I) ----------
   A slow, breathing apothecary bloom behind the dark canvas so every
   screen reads as *lit*, never flat. GPU-cheap: only transform/opacity
   are animated, on a single fixed pseudo-element. Sits at z-0; screen
   content is lifted to z-1 below. Honors prefers-reduced-motion. */
#app::before {
  content: '';
  position: fixed;
  left: 50%; top: 0; transform: translateX(-50%);
  width: 100%; max-width: 560px; height: 100%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 30% 16%, var(--ambient-warm) 0%, transparent 62%),
    radial-gradient(64% 50% at 82% 78%, var(--ambient-deep) 0%, transparent 66%),
    radial-gradient(40% 30% at 70% 30%, var(--ambient-cool) 0%, transparent 70%);
  animation: ambientBreathe 14s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ambientBreathe {
  0%,100% { opacity: .9;  transform: translateX(-50%) scale(1)    translateY(0); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.08) translateY(-1.5%); }
}

/* Grain + vignette — a fixed, static film layer that unifies the
   canvas and kills banding in the dark gradients. Above the bloom,
   below content. Tiny SVG noise, no animation cost. */
#app::after {
  content: '';
  position: fixed;
  left: 50%; top: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 100%;
  z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .025; mix-blend-mode: overlay;
}

.screen {
  display: none;
  position: relative; z-index: 1;   /* v4: lift content above the ambient field */
  min-height: 100dvh; min-height: 100vh;
  flex-direction: column;
  background: transparent;           /* v4: was obsidian — let the bloom through */
  animation: screenIn .6s var(--ease) both;
}
.screen.active { display: flex; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.screen.motion-exit { pointer-events: none; }
.screen.motion-enter { pointer-events: auto; }
.screen { backface-visibility: hidden; transform-style: preserve-3d; }

/* ---------- REVEAL CHOREOGRAPHY ----------
   When a screen becomes active its primary blocks rise and settle in
   a short stagger — the app "composing itself" rather than snapping
   on. Pure CSS, driven by .active; no JS, no layout thrash. */
.screen.active .q-category,
.screen.active .q-title,
.screen.active .q-insight,
.screen.active .multi-badge,
.screen.active .options-list,
.screen.active .gender-grid,
.screen.active .hero-visual,
.screen.active .specimen-tag,
.screen.active .hero-headline,
.screen.active .hero-sub,
.screen.active .hero-trust,
.screen.active .hero-cta-group,
.screen.active .r-section,
.screen.active .summary-pills,
.screen.active .protocol-preview,
.screen.active .form-fields {
  animation: riseIn .62s var(--ease) both;
}
.screen.active .q-title,        .screen.active .specimen-tag,   .screen.active .r-section:nth-child(2)  { animation-delay: .05s; }
.screen.active .q-insight,      .screen.active .hero-headline,  .screen.active .r-section:nth-child(3)  { animation-delay: .10s; }
.screen.active .multi-badge,    .screen.active .hero-sub,       .screen.active .r-section:nth-child(4)  { animation-delay: .15s; }
.screen.active .options-list,   .screen.active .gender-grid,
.screen.active .hero-trust,     .screen.active .r-section:nth-child(5)  { animation-delay: .20s; }
.screen.active .hero-cta-group, .screen.active .r-section:nth-child(6)  { animation-delay: .26s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Custom scrollbar — a hairline of gold, in keeping with the bezel */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  #app::before { animation: none; opacity: .85; }
}

/* ============================================================ INTERACTION STATES */
@media (pointer: fine) {
  .opt:hover { background: var(--ink-raised); }
  .opt.selected:hover { background: var(--gold-soft); }
  .sub-opt:hover { background: var(--ink-raised); }
  .sub-opt.selected:hover { background: var(--gold-soft); }
}
.opt:focus-visible, .sub-opt:focus-visible, .btn-start:focus-visible, .btn-next:focus-visible,
.btn-get-protocol:focus-visible, .btn-submit:focus-visible, .btn-wa:focus-visible, .q-back:focus-visible,
.lang-toggle:focus-visible, .fa-dropzone:focus-visible, .field-input:focus-visible,
.sudegy-sig:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--gold-soft), 0 0 0 1px var(--gold);
}

/* ============================================================ RTL/LTR fit-and-finish */
[dir="ltr"] .opt, [dir="ltr"] .sub-opt { text-align: left; }

@media (min-width: 540px) {
  .fa-scan-frame-wrap, .fa-scan-frame { width: 260px; height: 260px; }
}

/* ============================================================
   v4.2 — CINEMATIC TRANSFORM LAYER
   Phase-2 amplification so the product reads, at a glance, as a new
   premium AI medical instrument. Gold-gradient display ink, a deeper
   cinematic vignette, and the shared luxury-panel material.
   ============================================================ */

/* Gold-gradient display ink — the signature identity move. */
.goldtext,
.hero-headline .line-truth,
.loader-title {
  background: var(--text-gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 40px rgba(221,184,104,0.18);
}

/* Stronger, more visible ambient bloom (phase-1 was too faint). */
#app::before { filter: saturate(115%); }
@keyframes ambientBreathe {
  0%,100% { opacity: .95; transform: translateX(-50%) scale(1.02) translateY(0); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.14) translateY(-2%); }
}
/* A cinematic vignette that frames every screen and deepens the dark. */
#app > .screen.active::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(8,7,5,0.55) 100%);
}

/* ---- LUXURY PANEL MATERIAL ----
   Neutral dark cards upgrade to a gold-bordered instrument panel lit
   from above. Semantically-colored surfaces (gold insight, rose
   urgency) keep their own meaning and are deliberately excluded. */
.r-block, .dr-card, .summary-pills, .formulation-card, .gender-card {
  background-image: var(--panel) !important;
  border-color: var(--panel-border-soft) !important;
  box-shadow: var(--panel-glow) !important;
}
.gender-card.selected {
  background-image: var(--panel-raised) !important;
  border-color: var(--gold) !important;
  box-shadow: var(--panel-glow-active) !important;
}

/* Section titles get a hairline gold kicker-rule so even white-text
   screens carry the new identity. */
.q-title::after, .report-title::after, .form-title::after, .success-title::after, .fa-reco-heading::after {
  content: ''; display: block; width: 38px; height: 2px; margin-top: 12px;
  background: var(--text-gold-grad); border-radius: 2px;
  box-shadow: 0 0 12px rgba(221,184,104,.5);
}
[dir="rtl"] .q-title::after, [dir="rtl"] .report-title::after,
[dir="rtl"] .form-title::after, [dir="rtl"] .success-title::after { margin-left: auto; }
.success-title::after { margin-left: auto; margin-right: auto; }