/*
  TWENREE gateway — one continuous two-world entrance.
  The boundary between worlds is moved with transforms only (outer container
  translate + inner counter-translate), so every frame resolves on the
  compositor. JS writes three CSS vars per frame on .lfw-stage:
    --b  : boundary position in vw (where the two worlds meet)
    --pa : left-world presence 0..1 (Last Firewall)
    --pb : right-world presence 0..1 (Peel Tales)
*/

.lfw-page {
  margin: 0;
  background: #0a0c10;
  font-family: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.lfw-page *,
.lfw-page *::before,
.lfw-page *::after {
  box-sizing: border-box;
}

.lfw-skip {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 8px;
  background: #53c8e8;
  color: #04222c;
  font-weight: 600;
  text-decoration: none;
}

.lfw-skip:focus {
  top: 12px;
}

.lfw-page :focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

.lfw-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  --b: 50;
  --pa: 0;
  --pb: 0;
}

/* ---------- World containers (transform-only curtain reveal) ---------- */

.lfw-world {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  will-change: transform;
}

.lfw-world-left {
  transform: translate3d(calc(var(--b) * 1vw - 100vw), 0, 0);
}

.lfw-world-right {
  transform: translate3d(calc(var(--b) * 1vw), 0, 0);
}

.lfw-world-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.lfw-world-left .lfw-world-inner {
  transform: translate3d(calc(100vw - var(--b) * 1vw), 0, 0);
}

.lfw-world-right .lfw-world-inner {
  transform: translate3d(calc(var(--b) * -1vw), 0, 0);
}

/* ---------- Background media (scale parallax, no layout) ---------- */

.lfw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.lfw-world-left .lfw-bg {
  object-position: 60% 40%;
  transform: scale(calc(1.14 - var(--pa) * 0.1)) translate3d(calc(var(--pa) * 1.2% - 2.4%), 0, 0);
}

.lfw-world-right .lfw-bg {
  object-position: 42% 46%;
  transform: scale(calc(1.14 - var(--pb) * 0.1)) translate3d(calc(2.4% - var(--pb) * 1.2%), 0, 0);
}

/* ---------- Atmosphere grade (opacity only) ---------- */

.lfw-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lfw-world-left .lfw-tint-rest {
  background: linear-gradient(90deg, rgba(5, 9, 14, 0.5) 0%, rgba(5, 9, 14, 0.72) 100%);
  opacity: calc(1 - var(--pa));
}

.lfw-world-left .lfw-tint-active {
  background:
    radial-gradient(70% 90% at 24% 60%, rgba(6, 12, 18, 0.12) 0%, rgba(6, 12, 18, 0.66) 100%),
    linear-gradient(
      180deg,
      rgba(6, 12, 18, 0.32) 0%,
      rgba(6, 12, 18, 0.05) 45%,
      rgba(6, 12, 18, 0.7) 100%
    );
  opacity: var(--pa);
}

.lfw-world-right .lfw-tint-rest {
  background: linear-gradient(270deg, rgba(46, 32, 24, 0.8) 0%, rgba(38, 26, 20, 0.92) 100%);
  opacity: calc(1 - var(--pb));
}

.lfw-world-right .lfw-tint-active {
  background:
    radial-gradient(70% 90% at 76% 56%, rgba(58, 38, 24, 0.08) 0%, rgba(50, 32, 22, 0.5) 100%),
    linear-gradient(
      180deg,
      rgba(58, 38, 24, 0.26) 0%,
      rgba(58, 38, 24, 0.04) 45%,
      rgba(44, 28, 18, 0.62) 100%
    );
  opacity: var(--pb);
}

/* ---------- World copy ---------- */

.lfw-copy {
  position: absolute;
  bottom: clamp(40px, 12vh, 120px);
  width: min(460px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

@media (min-width: 781px) {
  .lfw-copy {
    width: min(460px, 40vw);
  }
}

.lfw-world-left .lfw-copy {
  left: clamp(28px, 6vw, 90px);
  opacity: calc(var(--pa) * var(--pa));
  transform: translate3d(0, calc(24px - var(--pa) * 24px), 0);
  will-change: transform, opacity;
}

.lfw-world-right .lfw-copy {
  right: clamp(28px, 6vw, 90px);
  align-items: flex-end;
  text-align: right;
  opacity: calc(var(--pb) * var(--pb));
  transform: translate3d(0, calc(24px - var(--pb) * 24px), 0);
  will-change: transform, opacity;
}

/* Legibility scrim: a soft dark pool anchored behind the copy block so text
   stays readable over bright/busy areas of the hero art, without flattening
   the image into a solid panel. */
.lfw-copy::before {
  content: '';
  position: absolute;
  inset: -28px -24px -22px -24px;
  z-index: -1;
  pointer-events: none;
}

.lfw-world-left .lfw-copy::before {
  inset: -28px -160px -22px -24px;
  background: radial-gradient(
    120% 150% at 0% 100%,
    rgba(4, 8, 12, 0.68) 0%,
    rgba(4, 8, 12, 0.42) 46%,
    rgba(4, 8, 12, 0) 78%
  );
}

.lfw-world-right .lfw-copy::before {
  inset: -28px -24px -22px -160px;
  background: radial-gradient(
    120% 150% at 100% 100%,
    rgba(24, 15, 7, 0.68) 0%,
    rgba(24, 15, 7, 0.42) 46%,
    rgba(24, 15, 7, 0) 78%
  );
}

.lfw-eyebrow {
  margin: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.lfw-title {
  margin: 0;
  font-family: 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lfw-desc {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  max-width: 42ch;
}

.lfw-enter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.lfw-world-left .lfw-eyebrow {
  color: rgba(150, 250, 222, 0.95);
  text-shadow: 0 1px 10px rgba(4, 8, 12, 0.85);
}

.lfw-world-left .lfw-title {
  color: #eef3f9;
  text-shadow:
    0 0 26px rgba(72, 248, 218, 0.4),
    0 2px 14px rgba(4, 8, 12, 0.85);
}

.lfw-world-left .lfw-desc {
  color: rgba(224, 232, 242, 0.95);
  text-shadow: 0 1px 10px rgba(4, 8, 12, 0.8);
}

.lfw-world-left .lfw-enter {
  color: #7ad8f2;
  text-shadow: 0 1px 10px rgba(4, 8, 12, 0.85);
}

.lfw-world-right .lfw-eyebrow {
  color: rgba(255, 220, 175, 0.98);
  text-shadow: 0 1px 10px rgba(24, 15, 7, 0.85);
}

.lfw-world-right .lfw-title {
  color: #fff6e8;
  text-shadow:
    0 2px 22px rgba(70, 42, 20, 0.7),
    0 2px 14px rgba(24, 15, 7, 0.85);
}

.lfw-world-right .lfw-desc {
  color: rgba(255, 244, 230, 0.97);
  text-shadow: 0 1px 10px rgba(24, 15, 7, 0.8);
}

.lfw-world-right .lfw-enter {
  color: #ffc384;
  text-shadow: 0 1px 10px rgba(24, 15, 7, 0.85);
}

.lfw-status {
  margin: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.lfw-world-left .lfw-status {
  color: rgba(214, 228, 252, 0.92);
  text-shadow: 0 1px 8px rgba(4, 8, 12, 0.8);
}

.lfw-world-right .lfw-status {
  color: rgba(255, 238, 216, 0.92);
  text-shadow: 0 1px 8px rgba(24, 15, 7, 0.8);
}

/* ---------- Boundary seam ---------- */

.lfw-seam {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -90px;
  width: 180px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 244, 224, 0.1) 42%,
    rgba(255, 250, 240, 0.2) 50%,
    rgba(255, 244, 224, 0.1) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translate3d(calc(var(--b) * 1vw), 0, 0);
  opacity: calc(1 - max(var(--pa), var(--pb)) * 0.92);
  will-change: transform, opacity;
}

/* ---------- Center brand ---------- */

.lfw-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(40px, 9vh, 90px);
  gap: 10px;
  text-align: center;
  pointer-events: none;
  opacity: calc(1 - max(var(--pa), var(--pb)) * 1.35);
  transform: translate3d(0, calc(max(var(--pa), var(--pb)) * -14px), 0);
  will-change: transform, opacity;
}

.lfw-brand {
  margin: 0;
  font-family: 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 0.34em;
  color: #f2ecdf;
}

.lfw-tagline {
  margin: 0;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.08em;
  color: rgba(230, 224, 210, 0.75);
}

.lfw-hint {
  position: absolute;
  bottom: clamp(16px, 3.6vh, 34px);
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 220, 206, 0.6);
  pointer-events: none;
  opacity: calc(1 - max(var(--pa), var(--pb)));
}

/* ---------- Touch / narrow screens: same curtain, touch-drag steered ----------
   The full-bleed reveal stays identical to desktop — only the input method
   changes (finger drag instead of pointer hover) and copy sizing scales
   down. lf-entry.js runs a brief autoplay demo on load so the transition is
   seen immediately, before the visitor discovers the drag gesture. */

@media (hover: none), (max-width: 780px) {
  .lfw-hint {
    bottom: clamp(14px, 3vh, 26px);
    font-size: 9.5px;
  }

  .lfw-center {
    padding-top: clamp(26px, 6vh, 56px);
  }

  .lfw-brand {
    font-size: clamp(17px, 5.4vw, 24px);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .lfw-world,
  .lfw-world-inner,
  .lfw-bg,
  .lfw-copy,
  .lfw-seam,
  .lfw-center {
    transition: opacity 180ms ease;
  }
}

/* ---------- Distant world labels (visible only near neutral) ---------- */

.lfw-far {
  position: absolute;
  bottom: clamp(52px, 11vh, 110px);
  margin: 0;
  font-family: 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  pointer-events: none;
  will-change: opacity;
}

.lfw-world-left .lfw-far {
  left: clamp(28px, 6vw, 90px);
  color: rgba(214, 236, 248, 0.85);
  opacity: calc((1 - var(--pa) * 2.4) * (1 - var(--pb) * 0.55));
}

.lfw-world-right .lfw-far {
  right: clamp(28px, 6vw, 90px);
  color: rgba(64, 44, 26, 0.82);
  opacity: calc((1 - var(--pb) * 2.4) * (1 - var(--pa) * 0.55));
}

.lfw-far span {
  display: block;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  margin-top: 6px;
  opacity: 0.75;
}

@media (hover: none), (max-width: 780px) {
  .lfw-far {
    display: none;
  }
}

/* ---------- Center brand logo ---------- */

.lfw-brand-logo {
  width: clamp(52px, 5vw, 72px);
  height: auto;
  margin-top: 2px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  opacity: 0.94;
}

/* ---------- Themed release countdowns ---------- */

.lfw-count {
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}

.lfw-count span {
  display: inline-block;
  font-family: 'SF Mono', 'Menlo', monospace;
  letter-spacing: 0.1em;
}

.lfw-count-lf span {
  padding: 8px 14px;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 600;
  color: #7cf0dc;
  background: rgba(6, 16, 22, 0.66);
  border: 1px solid rgba(83, 200, 232, 0.38);
  border-radius: 8px;
  text-shadow: 0 0 12px rgba(72, 248, 218, 0.55);
  box-shadow: inset 0 0 18px rgba(72, 248, 218, 0.08);
}

.lfw-count-pt span {
  padding: 8px 16px;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 600;
  color: #5c3a22;
  background: rgba(255, 246, 230, 0.88);
  border: 1px solid rgba(120, 82, 48, 0.35);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(74, 50, 28, 0.25),
    0 4px 10px rgba(74, 50, 28, 0.18);
}