/* nativescripts.com — platform chooser, "Two Worlds, One Studio".
   Cinematic diagonal split: FiveM (cool / modern) × RedM (warm / frontier).
   Hand-crafted, no framework. */

/* Self-hosted fonts (latin subset) — no Google CDN dependency. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/jakarta.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dmserif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dmserif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

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

:root {
  --gold: #e7c365;
  --gold-bright: #f3d98a;
  --gold-ink: #2a2000;
  --ice: #bcd6ef;
  --ice-bright: #e8f2fc;
  --cream: #f4e7cb;
  --bg: #08090d;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --seam: 50%;       /* x-position of the diagonal seam at vertical centre */
  --skew: 5vw;       /* horizontal lean of the seam */
}

html { height: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
a { text-decoration: none; color: inherit; }

/* Chrome overlays ──────────────────────────────────────────────────────── */
.vignette {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}
/* Grain uses a pre-baked speckle tile rather than an inline feTurbulence SVG:
   procedural noise is regenerated per-rasterisation and, combined with a
   full-screen blend mode, pegs the CPU when hardware acceleration is off.
   The baked tile decodes once and needs no blending pass. */
.grain {
  position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: .18;
  background-image: url("/grain.webp");
  background-size: 128px 128px;
}

/* Top brand ─────────────────────────────────────────────────────────────── */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; padding: clamp(1.1rem, 3vh, 1.9rem); pointer-events: none; }
.brand {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .65rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: rgba(255,255,255,.82);
  animation: fade-down 1s var(--ease) both .1s;
}
.brand__logo { height: 22px; width: auto; display: block; filter: drop-shadow(0 2px 12px rgba(231,195,101,.45)); }

/* Stage + diagonal panes ───────────────────────────────────────────────── */
.stage { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }

.pane {
  position: absolute; inset: 0; display: block; overflow: hidden;
  transition: clip-path .6s var(--ease);
}
.pane--fivem { clip-path: polygon(0 0, calc(var(--seam) + var(--skew)) 0, calc(var(--seam) - var(--skew)) 100%, 0 100%); }
.pane--redm  {
  clip-path: polygon(calc(var(--seam) + var(--skew)) 0, 100% 0, 100% 100%, calc(var(--seam) - var(--skew)) 100%);
  /* No drop-shadow filter — a large-radius blur on this half-screen clipped pane
     re-renders on every hover clip-path transition (jank). The seam reads from
     the two panes' colour/contrast difference + the centre .seam badge. */
}

.pane__img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: none; transition: transform 1.2s var(--ease); }
/* Ambient dimming rides on this overlay's opacity rather than a `filter` on the
   image itself. A filter re-processes every pixel of a full-viewport layer on
   each frame of the transition, which stalls hard with hardware acceleration
   off; opacity is a composite-only change. Any static grade below still applies
   — it rasterises once and never animates. */
.pane__img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #05060a; opacity: 0;
  transition: opacity .5s var(--ease);
}
/* No grade — the screenshot's own colours read better than any filter.
   `cover` on this full-viewport pane always crops to the image's left half, so
   the street, neon and second car were never visible. Fitting to height and
   anchoring left shows ~70% of the frame instead. -wide.webp is the same shot
   with its asphalt extended downward, which is what buys the extra height. */
.pane--fivem .pane__img {
  background-image: url("/fivem-city-wide.webp");
  background-size: auto 100%; background-position: left top; background-repeat: no-repeat;
  filter: none;
}
/* Beyond ~2.5:1 the height-fitted image no longer reaches the seam — fall back. */
@media (min-aspect-ratio: 5/2) {
  .pane--fivem .pane__img { background-size: cover; background-position: left center; }
}
/* The grade (brightness .68 / saturate 1.08 / contrast 1.05) is baked into the
   file rather than applied as a CSS filter: a filter on this full-viewport
   layer is re-applied on every frame of the hover scale, which is the most
   expensive thing left on the page when hardware acceleration is off. */
.pane--redm  .pane__img { background-image: url("/redm-frontier-graded.webp"); }

.pane__scrim { position: absolute; inset: 0; z-index: 1; }
/* Darkening only — no colour wash, so the screenshot keeps its own palette. */
.pane--fivem .pane__scrim {
  background:
    linear-gradient(90deg, rgba(6,9,14,.86) 0%, rgba(6,9,14,.34) 46%, rgba(6,9,14,.03) 78%, transparent 100%),
    linear-gradient(0deg, rgba(6,9,14,.6), transparent 54%);
}
.pane--redm .pane__scrim {
  background:
    linear-gradient(270deg, rgba(15,8,4,.9) 0%, rgba(15,8,4,.38) 46%, rgba(15,8,4,.05) 78%, transparent 100%),
    linear-gradient(0deg, rgba(15,8,4,.72), transparent 54%),
    linear-gradient(0deg, rgba(54,28,8,.16), rgba(54,28,8,.16));
}

/* Content ──────────────────────────────────────────────────────────────── */
.pane__inner {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; max-width: 30rem;
}
.pane--fivem .pane__inner { left: clamp(1.5rem, 7vw, 7rem); align-items: flex-start; text-align: left; }
.pane--redm  .pane__inner { right: clamp(1.5rem, 7vw, 7rem); align-items: flex-end;  text-align: right; }

.kicker {
  margin: 0 0 1.4rem; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
}
.pane--fivem .kicker { color: var(--ice); text-indent: .32em; }
.pane--redm  .kicker { color: var(--gold); }

.title { margin: 0; line-height: .9; }
.title--fivem {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, sans-serif; font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 11rem); letter-spacing: -.045em; color: var(--ice-bright);
  text-shadow: 0 8px 60px rgba(0,0,0,.5);
}
.title--redm {
  font-family: 'DM Serif Display', ui-serif, Georgia, serif; font-weight: 400;
  font-size: clamp(4.5rem, 12vw, 11rem); letter-spacing: -.01em; color: var(--cream);
  text-shadow: 0 8px 60px rgba(0,0,0,.5), 0 2px 50px rgba(231,195,101,.22);
}

.rule { display: block; width: 3.25rem; height: 2px; margin: 1.5rem 0; border-radius: 2px; }
.pane--fivem .rule { background: linear-gradient(90deg, var(--ice), transparent); }
.pane--redm  .rule { background: linear-gradient(270deg, var(--gold), transparent); }

.lede { margin: 0; max-width: 23rem; font-size: clamp(.95rem, 1.15vw, 1.075rem); line-height: 1.6; color: rgba(255,255,255,.72); }

.cta {
  margin-top: 1.9rem; display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; text-indent: .18em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cta svg { transition: transform .4s var(--ease); }
/* FiveM — sharp, outlined, modern */
.cta--fivem { height: 3rem; padding: 0 1.6rem; border: 1px solid rgba(188,214,239,.45); color: var(--ice-bright); background: rgba(188,214,239,.04); }
/* RedM — solid, soft, classic */
.cta--redm { height: 3rem; padding: 0 1.7rem; border-radius: 7px; color: var(--gold-ink); background: var(--gold); box-shadow: 0 16px 40px -16px rgba(231,195,101,.55); }

.frameworks {
  margin: 2.4rem 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.42);
}
.pane--fivem .frameworks { text-indent: .26em; }

/* Seam emblem ──────────────────────────────────────────────────────────── */
.seam { position: absolute; top: 50%; left: var(--seam); z-index: 5; transform: translate(-50%, -50%); pointer-events: none; transition: left .6s var(--ease); }
.seam__badge {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--gold-bright);
}
.seam__badge::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: rotate(45deg);
  /* Opaque fill instead of backdrop-filter: blurring the backdrop is a
     per-frame CPU cost with hardware acceleration off, for no visible gain
     over dark artwork. */
  background: rgba(8,9,13,.86); border: 1px solid rgba(231,195,101,.55);
  box-shadow: 0 0 30px -4px rgba(231,195,101,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Footer meta ──────────────────────────────────────────────────────────── */
/* Two centred rows: the Discord pill sits above the tagline, both on the page's
   centre line (under the seam badge). */
.meta {
  position: fixed; bottom: clamp(1rem, 3vh, 1.6rem); left: 0; right: 0; z-index: 8;
  display: grid; justify-items: center; row-gap: .75rem;
  padding: 0 1.25rem; pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.4); white-space: nowrap;
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .8; flex: none; }
/* Discord pill — the only interactive element down here, so it reads as a
   button. Same glass-over-gold language as the seam badge. */
.meta__link {
  pointer-events: auto; display: inline-flex; align-items: center; gap: .5rem;
  height: 30px; padding: 0 .95rem; border-radius: 999px;
  border: 1px solid rgba(231,195,101,.4);
  /* See .seam__badge::before — solid tint replaces backdrop-filter. */
  background: linear-gradient(rgba(231,195,101,.11), rgba(231,195,101,.11)), rgba(8,9,13,.55);
  color: rgba(243,217,138,.92); text-indent: .22em;
  transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.meta__link svg { flex: none; text-indent: 0; transition: transform .35s var(--ease); }

/* Button hover ─────────────────────────────────────────────────────────── */
@media (hover: hover) {
  /* FiveM — ghost fills with ice, lifts, sharp glow */
  .cta--fivem:hover {
    background: var(--ice-bright); color: #0a1420; border-color: var(--ice-bright);
    transform: translateY(-3px); box-shadow: 0 16px 40px -14px rgba(188,214,239,.6), 0 0 0 1px rgba(232,242,252,.4);
  }
  /* RedM — gold brightens, lifts, warm glow */
  .cta--redm:hover {
    background: var(--gold-bright); transform: translateY(-3px);
    box-shadow: 0 24px 56px -16px rgba(231,195,101,.75), 0 0 0 1px rgba(243,217,138,.5);
  }
  .cta:hover svg { transform: translateX(6px); }
  .cta:active { transform: translateY(-1px); }
  /* Footer Discord — fills with gold, small lift */
  .meta__link:hover {
    color: var(--gold-ink); background: var(--gold); border-color: var(--gold-bright);
    transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(231,195,101,.7);
  }
  .meta__link:hover svg { transform: scale(1.08); }
}

/* Pane ambient hover ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (hover: hover) {
  .pane { transition: clip-path .6s var(--ease); }
  /* Dim whichever pane isn't hovered. Replaces the old brightness/saturate
     filter swap — see .pane__img::after. */
  .stage:hover .pane:not(:hover) .pane__img::after { opacity: .55; }
  .pane:hover .pane__img { transform: scale(1.035); }
}

/* Entry reveal ─────────────────────────────────────────────────────────── */
.pane__inner > * { animation: rise 1s var(--ease) both; }
.pane--fivem .kicker { animation-delay: .25s } .pane--fivem .title { animation-delay: .34s } .pane--fivem .rule { animation-delay: .42s } .pane--fivem .lede { animation-delay: .48s } .pane--fivem .cta { animation-delay: .56s } .pane--fivem .frameworks { animation-delay: .64s }
.pane--redm .kicker { animation-delay: .34s } .pane--redm .title { animation-delay: .43s } .pane--redm .rule { animation-delay: .51s } .pane--redm .lede { animation-delay: .57s } .pane--redm .cta { animation-delay: .65s } .pane--redm .frameworks { animation-delay: .73s }
.seam { animation: pop 1s var(--ease) both .9s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Mobile — straight horizontal stack ───────────────────────────────────── */
@media (max-width: 767px) {
  body { overflow-y: auto; }
  .stage { height: auto; }
  .pane { position: relative; inset: auto; height: 56dvh; clip-path: none !important; filter: none !important; }
  .pane--redm { border-top: 1px solid rgba(231,195,101,.4); }
  .pane__inner { position: absolute; left: 1.5rem !important; right: 1.5rem !important; align-items: center !important; text-align: center !important; max-width: none; }
  .lede { max-width: 26rem; }
  .seam { display: none; }
  .vignette { background: radial-gradient(140% 60% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%); }
  /* Let the tagline wrap rather than run off a narrow screen. */
  .meta { white-space: normal; text-align: center; }
}

/* Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pane__inner > *, .seam, .brand { animation: none !important; }
  .pane, .pane__img, .pane__video, .cta, .seam { transition: none !important; }
}