/* =============================================================================
   The landing page only (index.html, body.landing): a night stage for the tracer
   rifle, then the shared bands restyled to match. Colours, the night tones
   included, come from theme.css; only the live tracer colour is local.
   ============================================================================= */

body.landing {
  --tracer:     #8b7bff;
  background: var(--night);
}
body.landing #shell { background: transparent; }
body.landing .shell-inner {
  background: rgb(14 12 38 / 0.72);
  border-color: var(--night-line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* El Messiri has tall marks above and below the line: give every heading the room so nothing clips. */
body.landing :is(h1, .section-h, .tier-name) { line-height: 1.4; letter-spacing: 0; }

/* ------------------------------------------------------------------ hero */
.lt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -58px; padding-top: 58px; /* the stage runs up behind the floating bar */
  border-bottom: 0.8px solid var(--night-line);
}
.lt-hero::after {
  content: ''; position: absolute; inset: auto 0 0; height: 110px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--night));
}
.lt-hero-in {
  --measure: 1200px;
  max-width: var(--measure); margin: 0 auto; padding-inline: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px;
  min-height: 640px;
}
.lt-copy {
  position: relative; z-index: 3; align-self: center;
  padding-block: 64px; max-width: 560px;
  display: flex; flex-direction: column; gap: 20px;
}
.lt-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--accent-2);
}
.lt-eyebrow::before {
  content: ''; width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2));
}
html[dir='rtl'] .lt-eyebrow::before { background: linear-gradient(270deg, transparent, var(--accent-2)); }
.lt-copy h1 { font-size: clamp(36px, 4.6vw, 62px); max-width: none; font-weight: 700; padding-block: 0.06em; }
.lt-trace { position: relative; color: #fff; white-space: nowrap; }
.lt-trace::after {
  content: ''; position: absolute; inset-inline: -4px; bottom: 0.04em; height: 0.13em; border-radius: 99px;
  background: linear-gradient(90deg, rgb(108 91 255 / 0), var(--accent) 40%, #d9d3ff);
  box-shadow: 0 0 18px rgb(108 91 255 / 0.8);
  transform-origin: left center;
  animation: lt-streak 1.4s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[dir='rtl'] .lt-trace::after { background: linear-gradient(270deg, rgb(108 91 255 / 0), var(--accent) 40%, #d9d3ff); transform-origin: right center; }
@keyframes lt-streak { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lt-copy .lede { margin-top: 0; font-size: 17px; }
.lt-copy .hero-cta { margin-top: 6px; justify-content: flex-start; }
.lt-copy .assurance { margin-top: 0; }

/* The stage: on wide screens the canvas covers the whole hero and the rifle sits in this column. */
.lt-stage {
  position: static; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding-block: 26px 30px;
}
#ltCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  touch-action: pan-y; cursor: grab; background: var(--night);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%);
}
#ltCanvas.dragging { cursor: grabbing; }
.lt-stage.is-off #ltCanvas { visibility: hidden; }
.lt-stage.is-off .lt-pill, .lt-stage.is-off .lt-hint, .lt-stage.is-off .lt-hud { display: none; }

.lt-hud {
  position: relative; z-index: 3; pointer-events: none;
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.7;
  color: rgb(255 255 255 / 0.45); direction: ltr;
}
.lt-hud b { color: var(--text); font-weight: 500; }
.lt-hud-end { text-align: right; }
.lt-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle;
  background: var(--tracer); box-shadow: 0 0 10px var(--tracer);
}
.lt-loader {
  position: absolute; z-index: 4; left: 50%; top: 46%; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-dim); pointer-events: none; transition: opacity 0.5s;
}
.lt-loader i { display: block; width: 180px; height: 2px; border-radius: 2px; background: var(--night-lit); overflow: hidden; }
.lt-loader b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #d9d3ff); box-shadow: 0 0 12px var(--accent); transition: width 0.2s; }
.lt-loader.is-done { opacity: 0; }

.lt-ui {
  position: relative; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lt-hint { font-size: 12.5px; color: var(--text-faint); transition: opacity 0.6s; }
.lt-hint.is-gone { opacity: 0; }
.lt-note { font-size: 12px; color: rgb(255 255 255 / 0.58); text-align: center; } /* 0.42 was under 4.5:1 at 12px */

/* The floating glass pill. */
.lt-pill {
  pointer-events: auto; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border-radius: var(--r-pill);
  background: var(--glass); border: 0.8px solid var(--night-lit);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 24px 60px -24px rgb(0 0 0 / 0.8);
}
.lt-group { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.lt-group + .lt-group { border-inline-start: 0.8px solid var(--night-line); }
.lt-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.lt-row { display: flex; align-items: center; gap: 6px; }
.lt-sw {
  position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18) inset, 0 2px 6px rgb(0 0 0 / 0.5);
  transition: transform 0.18s var(--ease);
}
.lt-sw:hover { transform: scale(1.12); }
.lt-sw[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--text); }
.lt-sw.is-original { background: linear-gradient(135deg, #0d0d10 0 50%, #4a4a52 50% 100%); }
.lt-sw.is-tracer { background: radial-gradient(circle, #fff 0 18%, var(--c) 42%, color-mix(in srgb, var(--c) 30%, #000) 100%); }
.lt-sw.is-tracer[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--c), 0 0 16px var(--c); }
.lt-sw.is-custom { overflow: hidden; background: conic-gradient(#ff3b6b, #f9cf00, #41e3a0, #38d9ff, #6c5bff, #ff3b6b); }
.lt-sw.is-custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lt-sw.is-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.lt-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.28); }
.lt-seg button {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 4px 11px; border-radius: var(--r-pill);
  font: inherit; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--text-faint);
}
.lt-seg button[aria-pressed='true'] { background: rgb(255 255 255 / 0.12); color: var(--text); box-shadow: 0 0 0 0.8px var(--night-lit) inset; }
.lt-fire {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16) inset, 0 8px 26px -8px var(--accent-glow);
  transition: transform 0.12s, background 0.2s;
}
.lt-fire:hover { background: var(--accent); }
.lt-fire:active { transform: scale(0.95); }
.lt-fire-ico { display: inline-grid; }

/* ------------------------------------------------------------------ the shared bands, on the night */
body.landing .band-alt { background: var(--night-2); border-color: var(--night-line); }
body.landing :is(.card, .steps li, .tier, .faq details, .sec-card, .price-list li, .style-chip) {
  background: var(--night-card); border-color: var(--night-line);
}
body.landing a.sec-card:hover { background: #16134a; border-color: var(--night-lit); }
body.landing .sec-card.is-soon { background: transparent; }
body.landing .card-icon, body.landing .step-n { background: rgb(108 91 255 / 0.16); }
body.landing .tier:hover { border-color: rgb(108 91 255 / 0.55); box-shadow: 0 30px 70px -40px rgb(108 91 255 / 0.8); }
body.landing .formats li { background: var(--night-card); border-color: var(--night-line); }

/* The weapon section's first card leads the grid, like the live weapons section in the hub. */
@media (min-width: 900px) {
  body.landing .sec-grid > li:first-child .sec-card {
    background: radial-gradient(120% 80% at 0% 100%, rgb(108 91 255 / 0.3), transparent 60%), linear-gradient(160deg, #16124a, var(--night-card) 60%);
  }
}

/* How it works: one tracer line runs through the step numbers. */
@media (min-width: 900px) {
  body.landing .steps:not(.buy-steps) { position: relative; }
  body.landing .steps:not(.buy-steps)::before {
    content: ''; position: absolute; top: 38px; inset-inline: 40px; height: 2px; border-radius: 2px; z-index: 0;
    background: linear-gradient(90deg, rgb(108 91 255 / 0.05), var(--accent) 50%, rgb(108 91 255 / 0.05));
    opacity: 0.7;
  }
  body.landing .steps li { position: relative; z-index: 1; }
}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 900px) {
  .lt-hero { margin-top: -58px; }
  .lt-hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding-inline: 16px; }
  .lt-stage {
    position: relative; order: -1;
    height: clamp(540px, 148vw, 660px);
    margin-inline: -16px; padding: 70px 12px 16px;
  }
  .lt-copy { padding-block: 8px 56px; }
  .lt-pill { border-radius: 22px; padding: 10px; gap: 8px 4px; }
  .lt-group + .lt-group { border-inline-start: 0; }
  .lt-group { padding: 2px 6px; }
}
@media (max-width: 400px) {
  .lt-group { flex-wrap: wrap; justify-content: center; }
  .lt-fire { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-trace::after { animation: none; }
  .lt-sw, .lt-fire, .lt-hint, .lt-loader { transition: none; }
}

/* Latin in El Messiri needs less room between lines than Arabic. */
html[lang='en'] body.landing :is(h1, .section-h, .tier-name) { line-height: 1.16; }
html[lang='en'] .lt-copy h1 { font-size: clamp(34px, 4.2vw, 56px); }

/* The hub as a bento: the live weapons section leads and spans two rows, the other four fill a 2 x 2. */
@media (min-width: 900px) {
  body.landing .sec-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  body.landing .sec-grid > li:first-child { grid-row: span 2; }
  body.landing .sec-grid > li:first-child .sec-card { height: 100%; }
  body.landing .sec-grid > li:first-child .sec-card h3 { font-size: 24px; }
}

/* ------------------------------------------------------------------ the poster and the wait
   A still of the rifle holds the stage's place from the first paint: the 3D loads after the page is quiet (landing.js),
   and a device without WebGL, or on Data Saver, keeps the still. It sits where the viewer frames the rifle, between the
   readout and the controls, and fades out once the model is drawn. */
.lt-poster {
  position: relative; z-index: 1; flex: 1 1 0; min-height: 0; width: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
  transition: opacity 0.6s var(--ease);
}
.lt-stage.is-live .lt-poster { opacity: 0; }
html[dir='rtl'] .lt-poster { scale: -1 1; } /* the viewer turns the rifle to face the copy */
.lt-stage.is-waiting .lt-pill, .lt-stage.is-waiting .lt-hint { opacity: 0.55; }
.lt-stage.is-off .lt-poster { display: block; }
.lt-play { position: absolute; z-index: 4; left: 50%; top: 46%; translate: -50% -50%; }

/* Fingers, not cursors: every control in the pill and the language switch get a 32px+ target on touch screens. */
@media (pointer: coarse) {
  .lt-sw { width: 30px; height: 30px; }
  .lt-row { gap: 8px; }
  .lt-seg button { min-height: 34px; padding-inline: 12px; }
  .lt-fire { min-height: 40px; }
}