/* ============================================================================
   I2S Orchestra — Welcome (Cinematic, Abstract Motifs, No Animation)
   Premium: compact type, subtle shapes, perfectly centered hero
   Depends on: tokens.css, base.css, chrome.css
   Scope: body.i2s-welcome
   ========================================================================== */

.i2s-welcome { color: var(--text); background: var(--surface); }

/* Container + section rhythm */
.i2s-container { width: min(96vw, 1200px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.i2s-section   { padding-block: clamp(36px, 6vw, 72px); border-top: 1px solid var(--hairline); }
.i2s-section:first-of-type { border-top: 0; }

/* Section headers */
.i2s-eyebrow{ font-size: var(--fs-400, .95rem); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.i2s-h2{ font-size: var(--fs-700, 1.65rem); font-weight:750; letter-spacing:-.2px; line-height:1.18; }
.i2s-lead{ font-size: var(--fs-500, 1.08rem); color:var(--muted); line-height:1.55; }
.i2s-sechead{ margin: 0 0 clamp(14px, 2.4vw, 22px); }
.i2s-sechead--center{ text-align:center; margin-inline:auto; max-width: 760px; }

/* Buttons */
.i2s-buttons{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn{
  --btn-h: 50px;
  height: var(--btn-h);
  padding-inline: clamp(16px, 2.6vw, 22px);
  border-radius: 12px;
  font: 750 clamp(14px, 1.8vw, 16px)/1 var(--font, ui-sans-serif, system-ui, -apple-system, "Inter", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; text-decoration:none; cursor:pointer;
  transition: transform .14s cubic-bezier(.22,.61,.36,1), box-shadow .2s, background .2s, opacity .2s, filter .2s;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -.2px;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn--primary{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #000) 0%, color-mix(in srgb, var(--accent) 82%, #000) 100%);
  color:#fff; filter: saturate(1.05);
}
.btn--primary:hover{ transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--text); border: 1px solid var(--hairline); }
.btn--ghost:hover{ background: color-mix(in srgb, var(--surface-2) 30%, transparent); }
.btn--ghost-on-dark{ color:#fff; border-color: color-mix(in srgb, #ffffff 26%, transparent); }

/* ======================= Cinematic Hero ======================= */
.wl-hero--cinema{
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 0;
  background: #0D1020; /* deep base for both themes */
  overflow: hidden;
}
:root[data-theme="light"] .wl-hero--cinema { background: #0D1020; }

/* Background stack */
.wl-hero__bg{ position:absolute; inset:0; pointer-events:none; }
.wl-hero__layer{ position:absolute; inset:0; }

/* Primary gradient (no pinks) — midnight + accent bloom */
.wl-hero__gradient{
  background:
    radial-gradient(100% 70% at 50% 0%,
      color-mix(in srgb, var(--accent, #164459) 22%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, #0B0F1C 0%, #0D1020 40%, #0D1020 100%);
}

/* Vignette to frame copy */
.wl-hero__vignette{
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.60) 100%);
}

/* Film grain (very gentle) */
.wl-hero__grain{
  inset: -40% -40%;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='100%' height='100%' filter='url(#n)' opacity='.035'/></svg>");
  opacity:.45; transform: rotate(0.01deg);
}

/* Micro-dot grid (very light, premium) */
.wl-hero__grid{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.08) 1px, transparent 1.5px) 0 0/18px 18px,
    radial-gradient(circle at center, rgba(255,255,255,.03) .5px, transparent 1px) 9px 9px/18px 18px;
  opacity:.18;
  mask-image: radial-gradient(80% 60% at 50% 45%, #000 65%, transparent 100%);
}

/* Hairline diagonals to break emptiness */
.wl-hero__diagonals{
  inset:-10% -10%;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 22px);
  opacity:.18; mix-blend-mode: overlay;
  mask-image: radial-gradient(90% 70% at 50% 45%, #000 55%, transparent 100%);
}

/* SVG motif styling */
.wl-hero__motifs{
  position:absolute; inset:0;
  width:100%; height:100%; overflow:visible;
  opacity:.42; pointer-events:none;
}
.wl-hero__motifs .m-stroke { stroke: color-mix(in srgb, var(--accent, #164459) 36%, #ffffff 8%); }
.wl-hero__motifs .ring{
  fill: none; stroke-width: 0.8;
  filter: drop-shadow(0 0 .8px rgba(0,0,0,.25));
}
.wl-hero__motifs .arcs path{
  fill:none; stroke-width: 0.7;
}
.wl-hero__motifs .centerline line{
  stroke-width: 0.5; opacity: .22;
}

/* Content alignment — perfectly centered */
.wl-hero--cinema .i2s-container{ width: min(1200px, 96vw); }
.wl-hero__inner{
  position: relative; z-index: 2;
  width: min(820px, 92vw);
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* Title rail — compact luxury scale */
.wl-hero__title{ margin: 0 0 clamp(10px, 2.2vw, 16px); }
.wl-rail{
  display: inline-flex; align-items: center; gap: clamp(12px, 2.6vw, 18px);
  font-weight: 850; letter-spacing: -0.6px; color: #fff;
  font-size: clamp(38px, 7.6vw, 86px);
  line-height: 0.98;
}
.wl-rail__arrow{ opacity: .92; font-weight: 800; }
.wl-rail__item--accent{ text-shadow: 0 6px 36px color-mix(in srgb, var(--accent) 34%, transparent); }

/* Subtitle sits directly under title */
.wl-hero__subtitle{
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: color-mix(in srgb, #ffffff 86%, transparent);
  font-size: clamp(15px, 2.2vw, 21px);
  letter-spacing: -0.2px;
}

/* CTAs — strong but not oversized */
.wl-hero__ctas .btn{ --btn-h: clamp(44px, 6.2vw, 50px); }

/* Next section stub */
.wl-next .i2s-lead{ max-width: 760px; margin: 6px auto 0; text-align: center; }

/* Large screens: elegant proportions */
@media (min-width: 1440px){
  .wl-hero__inner{ width: 820px; }
  .wl-rail{ font-size: clamp(64px, 5.6vw, 92px); }
  .wl-hero__subtitle{ font-size: clamp(17px, 1.5vw, 22px); }
}

/* Mobile-only forced break helper */
.mobile-break { display: none; }
@media (max-width: 767px) { .mobile-break { display: inline; } }
/* --- Overflow clamp: kill horizontal scroll globally --- */
html, body { max-width: 100%; overflow-x: clip; }

/* --- Hero container must clip all children (incl. SVG/filter bleed) --- */
.wl-hero--cinema { overflow: clip; }               /* replaces overflow:hidden with clip for stricter clamp */
.wl-hero__bg, .wl-hero__layer { inset: 0; }        /* remove negative insets that can create scrollbars */

/* Grain/diagonals: keep look without bleeding outside */
.wl-hero__grain,
.wl-hero__diagonals {
  inset: 0;                                        /* was negative */
  mask-image: radial-gradient(90% 70% at 50% 45%, #000 55%, transparent 100%);
}

/* SVG motifs: never extend box, even with strokes/drop-shadows */
.wl-hero__motifs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;                                /* default is visible → can cause scroll */
}
.wl-hero__motifs .m-stroke,
.wl-hero__motifs .ring,
.wl-hero__motifs .arcs path,
.wl-hero__motifs .centerline line {
  vector-effect: non-scaling-stroke;               /* keeps strokes tidy on resize */
}

/* Safety: any transform/filter child should not trigger layout overflow */
.wl-hero__bg * { will-change: auto; }

/* Optional: if your base.css doesn’t globally set border-box */
*, *::before, *::after { box-sizing: border-box; }