/* ============================================================================
   "Is [ride] scary?" — cinematic per-ride fear page.
   Built on the site's Nightfall tokens (--paper, --ink, --gold, --red, --rule).
   The hero centers a WebGL "fear core" (is-scary.js) whose churn and color read
   the ride's fear score; everything below is server-rendered and complete with
   no JS. Namespaced isc- so it never collides with other pages.
   Band accent is set per fear tier on the .isc--{band} root.
   ========================================================================== */

.isc {
  --isc-accent: var(--gold);
  --isc-glow: oklch(84% 0.13 86 / 0.40);
  --isc-drop:  oklch(72% 0.18 28);
  --isc-speed: oklch(82% 0.15 90);
  --isc-dark:  oklch(70% 0.11 285);
  --isc-spin:  oklch(74% 0.16 330);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.isc--extreme { --isc-accent: oklch(67% 0.205 8);  --isc-glow: oklch(67% 0.205 8 / 0.48); }
.isc--high    { --isc-accent: oklch(72% 0.190 42); --isc-glow: oklch(72% 0.190 42 / 0.44); }
.isc--medium  { --isc-accent: oklch(84% 0.130 86); --isc-glow: oklch(84% 0.130 86 / 0.38); }
.isc--low     { --isc-accent: oklch(80% 0.130 165);--isc-glow: oklch(80% 0.130 165 / 0.36); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.isc-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  text-align: center;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
/* The fear core as a full-width cinematic banner across the whole page. */
.isc-stage {
  position: relative;
  width: 100%;
  height: clamp(320px, 54vh, 540px);
  isolation: isolate;
}
.isc-core { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.isc-stage-glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(58% 92% at 50% 44%, var(--isc-glow), transparent 70%);
  animation: isc-pulse 6s ease-in-out infinite;
}
/* Fade the banner into the page (bottom) and soften the left/right edges. */
.isc-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 44%, color-mix(in oklab, var(--paper) 60%, transparent) 74%, var(--paper) 100%),
    linear-gradient(90deg, var(--paper), transparent 16%, transparent 84%, var(--paper));
}
@keyframes isc-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

.isc-hero-inner {
  position: relative; z-index: 4;
  max-width: 760px; margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  margin-top: clamp(-88px, -7vw, -44px); /* lift the title to sit over the banner's fade */
}
.isc-kicker {
  font-family: var(--label); font-size: 13px; letter-spacing: 0.05em;
  color: var(--gold); margin: 0 0 var(--space-sm);
}
.isc-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 7vw, 68px); line-height: 1.0; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 var(--space-md); text-wrap: balance;
}

/* Verdict badge: the big answer word + the fear index */
.isc-verdict {
  display: inline-flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md);
  border: 1px solid color-mix(in oklab, var(--isc-accent) 45%, var(--rule));
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--isc-accent) 12%, var(--paper-2)), var(--paper-2));
  box-shadow: 0 18px 46px -28px var(--isc-glow);
}
.isc-verdict-word {
  font-family: var(--display); font-weight: 800; font-size: clamp(20px, 3.4vw, 28px);
  letter-spacing: -0.01em; color: var(--ink);
}
.isc-verdict-meter { display: inline-flex; align-items: baseline; gap: 4px; position: relative; padding-left: var(--space-md); }
.isc-verdict-meter::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: var(--hair); }
.isc-verdict-num { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); color: var(--isc-accent); font-variant-numeric: tabular-nums; }
.isc-verdict-max { font-size: 14px; color: var(--muted); }
.isc-verdict-band { display: block; font-family: var(--label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }

.isc-standfirst {
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--ink-soft);
  max-width: 58ch; margin: 0 auto var(--space-lg); text-wrap: pretty;
}
.isc-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.isc-chip {
  font-family: var(--label); font-size: 13px; color: var(--ink-soft);
  padding: 5px 12px; border: 1px solid var(--hair); border-radius: 999px;
  background: color-mix(in oklab, var(--isc-accent) 8%, transparent);
}
.isc-chip--calm { background: transparent; color: var(--muted); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.isc-body { max-width: 780px; margin: 0 auto; padding-bottom: var(--space-3xl); }
.isc-h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-sm); text-wrap: balance;
}
.isc-body p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); }
.isc-note { font-size: 15px !important; color: var(--muted) !important; margin-top: 0; }

/* Short answer card */
.isc-answer {
  border: 1px solid color-mix(in oklab, var(--isc-accent) 34%, var(--rule));
  border-left: 4px solid var(--isc-accent);
  border-radius: 16px; padding: var(--space-lg);
  background: linear-gradient(180deg, color-mix(in oklab, var(--isc-accent) 8%, var(--paper-2)), var(--paper-2));
  margin: var(--space-xl) 0;
}
.isc-answer-h { font-family: var(--label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--isc-accent); margin: 0 0 var(--space-xs); }
.isc-answer-p { font-size: 20px !important; line-height: 1.5 !important; color: var(--ink) !important; margin: 0 0 var(--space-sm); }
.isc-answer-p strong { color: var(--ink); }
.isc-answer-sub { margin: 0; color: var(--ink-soft) !important; }

/* Facts: traits + numbers, two columns */
.isc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin: var(--space-2xl) 0; }
.isc-traitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.isc-trait { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); font-family: var(--label); }
.isc-trait-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.isc-trait.is-yes .isc-trait-dot { background: var(--isc-accent); box-shadow: 0 0 10px var(--isc-glow); }
.isc-trait.is-no  { color: var(--muted); }
.isc-trait.is-no .isc-trait-dot { background: var(--hair); }
.isc-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: var(--hair); }
.isc-stat { background: var(--paper-2); padding: var(--space-sm) var(--space-md); }
.isc-stat dt { font-family: var(--label); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.isc-stat dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Fear bars */
.isc-fear { margin: var(--space-2xl) 0; }
.isc-bars { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.isc-bar { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--space-md); }
.isc-bar-label { font-family: var(--label); font-size: 14px; color: var(--ink-soft); }
.isc-bar-track { height: 12px; border-radius: 999px; background: color-mix(in oklab, var(--paper) 60%, var(--paper-2)); overflow: hidden; border: 1px solid var(--hair); }
.isc-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(.2,.7,.2,1); }
.isc-bar--drop  .isc-bar-fill { background: linear-gradient(90deg, color-mix(in oklab, var(--isc-drop) 55%, transparent), var(--isc-drop)); }
.isc-bar--speed .isc-bar-fill { background: linear-gradient(90deg, color-mix(in oklab, var(--isc-speed) 55%, transparent), var(--isc-speed)); }
.isc-bar--dark  .isc-bar-fill { background: linear-gradient(90deg, color-mix(in oklab, var(--isc-dark) 55%, transparent), var(--isc-dark)); }
.isc-bar--spin  .isc-bar-fill { background: linear-gradient(90deg, color-mix(in oklab, var(--isc-spin) 55%, transparent), var(--isc-spin)); }
.isc-bar-val { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.isc-bar-val-max { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Prose blocks */
.isc-prose, .isc-kids, .isc-less { margin: var(--space-2xl) 0; }
.isc-visceral { font-size: 19px !important; line-height: 1.5 !important; color: var(--ink) !important; font-style: italic; border-left: 3px solid var(--isc-accent); padding-left: var(--space-md); margin-top: var(--space-md); }
.isc-heightline { font-size: 15px !important; color: var(--muted) !important; margin-top: var(--space-sm); }
.isc-heightline strong { color: var(--ink-soft); }

/* Compare scale */
.isc-compare { margin: var(--space-2xl) 0; }
.isc-scale { list-style: none; margin: var(--space-lg) 0 var(--space-md); padding: 0; display: flex; flex-direction: column; gap: 10px; }
.isc-scale-row { display: grid; grid-template-columns: minmax(140px, 40%) 1fr auto; align-items: center; gap: var(--space-md); }
.isc-scale-row.is-self { padding: 8px var(--space-sm); margin: 0 calc(var(--space-sm) * -1); border-radius: 10px; background: color-mix(in oklab, var(--isc-accent) 10%, transparent); }
.isc-scale-name { font-family: var(--label); font-size: 15px; color: var(--blue); text-decoration: none; }
a.isc-scale-name:hover { text-decoration: underline; }
.isc-scale-row.is-self .isc-scale-name { color: var(--ink); font-weight: 700; }
.isc-scale-you { font-family: var(--label); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--isc-accent); margin-left: 6px; }
.isc-scale-track { height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--paper) 60%, var(--paper-2)); overflow: hidden; border: 1px solid var(--hair); }
.isc-scale-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(.2,.7,.2,1); }
.isc-scale-fill.isc--extreme { background: oklch(67% 0.205 8); }
.isc-scale-fill.isc--high { background: oklch(72% 0.190 42); }
.isc-scale-fill.isc--medium { background: oklch(84% 0.130 86); }
.isc-scale-fill.isc--low { background: oklch(80% 0.130 165); }
.isc-scale-num { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.isc-scale-cta { font-size: 15px !important; }
.isc-scale-cta a, .isc-body a:not(.isc-scale-name):not(.isc-related-card) { color: var(--blue); }

/* FAQ */
.isc-faq { margin: var(--space-2xl) 0; }
.isc-faq-list { margin-top: var(--space-lg); border-top: 1px solid var(--hair); }
.isc-faq-item { border-bottom: 1px solid var(--hair); }
.isc-faq-item summary { cursor: pointer; padding: var(--space-md) 0; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); list-style: none; position: relative; padding-right: 32px; }
.isc-faq-item summary::-webkit-details-marker { display: none; }
.isc-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--isc-accent); transition: transform 0.2s; }
.isc-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.isc-faq-item p { margin: 0 0 var(--space-md); font-size: 16px; }

/* Related */
.isc-related { margin: var(--space-2xl) 0 var(--space-xl); }
.isc-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.isc-related-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: var(--space-md); border: 1px solid var(--hair); border-radius: 12px;
  background: var(--paper-2); transition: border-color 0.2s, transform 0.2s;
}
.isc-related-card:hover { border-color: color-mix(in oklab, var(--isc-accent) 50%, var(--rule)); transform: translateY(-2px); }
.isc-related-k { font-family: var(--label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.isc-related-t { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.25; }

.isc-disclaimer { font-size: 13px !important; color: var(--muted) !important; border-top: 1px solid var(--hair); padding-top: var(--space-md); }

/* Reveal (JS adds .is-in; if JS never runs, content is visible by default) */
[data-reveal] { will-change: opacity, transform; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .isc-stage { height: clamp(240px, 46vh, 360px); }
  .isc-hero-inner { margin-top: -36px; }
  .isc-facts { grid-template-columns: 1fr; }
  .isc-statgrid { grid-template-columns: 1fr 1fr; }
  .isc-related-grid { grid-template-columns: 1fr; }
  .isc-bar { grid-template-columns: 76px 1fr auto; gap: var(--space-sm); }
  .isc-scale-row { grid-template-columns: minmax(110px, 44%) 1fr auto; gap: var(--space-sm); }
  .isc-verdict { flex-direction: column; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); }
  .isc-verdict-meter { padding-left: 0; }
  .isc-verdict-meter::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .isc-stage-glow { animation: none; }
  .isc-bar-fill, .isc-scale-fill { transition: none; }
}