/* =========================================================
   AYNA — Product page styles (fragment, Ayna style guide v1.0)

   Migrated from the Nur product page (product-app-nur.css),
   re-tokened to the Ayna — Shattered Truth color system.

   Scope & naming:
   - Every selector lives under .ayna-page
   - Every custom property is prefixed --ayna-
   so nothing collides with the host page.

   Brand tokens (Ayna Style Guide · Color System v1.0):
   - Abyss scale: Void Ink #060F14 · Abyss #081820 · Deep Sea #0E2A33
     · Kelp Shadow #16404A (borders) · Undertow #1A4E53
   - Spirit: Spirit Glow #6FD8C2 (links & focus) · Pale Light #C9F2DF
     (body text) · Moonwhite #EAF7F0 (headings) · Lagoon #2F8391
   - Solid section background: Ayna Green #3D7361 — always with
     Moonwhite text on top (5.5:1, approved pairing)
   - Primary CTA: Sigil Red #A81E33 → hover #C22A41, label #F5E4E6.
     Sigil Red never carries body text on dark grounds.
   - Editorial / focus: Ayna Gold #D3BD78 (9.4:1 on Abyss)
   - Type: Marcellus (display, weight 400) · Albert Sans (body)
     · JetBrains Mono (labels, uppercase, wide tracking)
   - Dark only: the Ayna brand has no light theme. Grant logo
     plates stay constant white (EU rules: never recolour logos).

   Difference from the Nur reference, by request:
   - Screenshot frames are LARGER — media column widened
     (0.62fr / 1.38fr vs 0.85fr / 1.15fr), 16:9 game-capture
     ratio, wider 1240px grid, deeper drop shadow with a faint
     spirit-teal glow — the visuals should stick out.
   ========================================================= */

.ayna-page {
  /* ---- Static brand palette ---- */
  --ayna-void: #060F14;
  --ayna-abyss: #081820;
  --ayna-deep-sea: #0E2A33;
  --ayna-kelp: #16404A;
  --ayna-undertow: #1A4E53;
  --ayna-current: #23606B;
  --ayna-lagoon: #2F8391;
  --ayna-glow: #6FD8C2;
  --ayna-pale: #C9F2DF;
  --ayna-moon: #EAF7F0;
  --ayna-green: #3D7361;
  --ayna-moss: #4E8B54;
  --ayna-fern: #8CC66B;
  --ayna-bone: #AEBEC4;
  --ayna-gold: #D3BD78;
  --ayna-red: #A81E33;
  --ayna-red-hover: #C22A41;
  --ayna-rose-pale: #F5E4E6;
  --ayna-ember: #E2662B;

  /* ---- Theme tokens (dark is the only theme) ---- */
  --ayna-surface: var(--ayna-abyss);
  --ayna-panel: var(--ayna-deep-sea);
  --ayna-border: var(--ayna-kelp);
  --ayna-text: var(--ayna-pale);
  --ayna-text-2: #7FA39C;
  --ayna-accent: var(--ayna-red);            /* primary CTA fill */
  --ayna-on-accent: var(--ayna-rose-pale);
  --ayna-highlight: var(--ayna-glow);        /* links, hover borders */
  --ayna-focus: var(--ayna-gold);            /* focus rings */
  --ayna-selection-wash: #10303B;
  --ayna-band: var(--ayna-green);            /* SOLID section background */
  --ayna-on-band: var(--ayna-moon);          /* only approved text on green */
  --ayna-credit-plate: #FFFFFF;
  --ayna-scrim: linear-gradient(180deg, rgba(8,24,32,0.12) 0%, rgba(8,24,32,0.55) 55%, rgba(8,24,32,0.95) 100%);
  --ayna-grid-dot: rgba(111, 216, 194, 0.10);

  /* ---- Type & layout ---- */
  --ayna-font: 'Albert Sans', system-ui, sans-serif;
  --ayna-display: 'Marcellus', 'Times New Roman', serif;
  --ayna-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
  --ayna-maxw: 1240px;                       /* wider grid → bigger screenshots */
  --ayna-radius-sm: 6px;
  --ayna-radius-md: 10px;
  --ayna-radius-lg: 16px;

  /* ---- Base ---- */
  background: var(--ayna-surface);
  color: var(--ayna-text);
  font-family: var(--ayna-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: block;
  overflow-x: clip;
}

/* ---- Scoped reset ---- */
.ayna-page *, .ayna-page *::before, .ayna-page *::after { box-sizing: border-box; }
.ayna-page h1, .ayna-page h2 {
  margin: 0;
  font-family: var(--ayna-display);
  font-weight: 400;                          /* Marcellus ships one weight */
  letter-spacing: 0.01em;
  color: var(--ayna-moon);
}
.ayna-page p { margin: 0; }
.ayna-page a { color: inherit; text-decoration: none; }
.ayna-page img, .ayna-page video { max-width: 100%; display: block; }
.ayna-page figure { margin: 0; }
.ayna-page ::selection { background: var(--ayna-glow); color: var(--ayna-void); }
.ayna-page :focus-visible {
  outline: 1px solid var(--ayna-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ayna-focus) 25%, transparent);
  border-radius: 4px;
}

/* Hero wordmark — renders over the hero art behind a dark scrim,
   so it stays at its native (white) fill regardless of context. */
.ayna-hero__logo {
  display: block;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  margin: 0 0 28px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.ayna-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ayna-font);
  font-weight: 600; font-size: 14.5px; white-space: nowrap;
  border-radius: var(--ayna-radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
/* Store logo as the button's sole content (label lives in the link's
   aria-label). The filter tints the SVG artwork white regardless of
   its intrinsic fills. */
.ayna-btn__icon {
  height: 28px;
  width: auto;
  display: block;
  flex: none;
  /* overhang the button padding so the logo reads large while the
     button stays the same height as its text-label siblings */
  margin-block: -6px;
  filter: brightness(0) invert(1);
}
/* Primary = Sigil Red fill with Pale Rose label (5.6:1) */
.ayna-btn--primary {
  padding: 13px 26px;
  background: var(--ayna-accent);
  color: var(--ayna-on-accent);
  border: 1px solid transparent;
}
.ayna-btn--primary:hover {
  background: var(--ayna-red-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ayna-red-hover) 30%, transparent);
}
.ayna-btn--primary:active { background: var(--ayna-red); }
/* Ghost = Lagoon outline that warms to Spirit Glow (per guide demo) */
.ayna-btn--ghost {
  padding: 13px 26px;
  background: transparent;
  border: 1px solid var(--ayna-lagoon);
  color: #9FDCCF;
}
.ayna-btn--ghost:hover { border-color: var(--ayna-glow); color: var(--ayna-pale); }
.ayna-btn--text { background: none; border: none; color: var(--ayna-text); border-bottom: 1px solid transparent; border-radius: 0; padding: 2px 0; }
.ayna-btn--text:hover { border-bottom-color: var(--ayna-highlight); color: var(--ayna-highlight); }

/* =========================================================
   VIEWPORT — media frame for game captures
   Larger and louder than the Nur reference: 16:9 game-capture
   ratio, deep shadow plus a faint spirit-teal glow so the
   screenshots stick out from the abyss.
   ========================================================= */
.ayna-viewport {
  position: relative;
  border-radius: var(--ayna-radius-md);
  background:
    radial-gradient(circle at 1px 1px, var(--ayna-grid-dot) 1px, transparent 1px) 0 0/20px 20px,
    var(--ayna-panel);
  overflow: hidden;
  /* Cursor tilt: --ayna-tilt-x/y are set by the viewport-tilt script (-1 to 1) */
  --ayna-tilt-x: 0;
  --ayna-tilt-y: 0;
  --ayna-tilt-max: 4deg;
  transform: perspective(800px)
    rotateY(calc(var(--ayna-tilt-x) * var(--ayna-tilt-max)))
    rotateX(calc(var(--ayna-tilt-y) * var(--ayna-tilt-max) * -1));
  transition: transform 0.25s ease;
  will-change: transform;
}
.ayna-viewport:hover {
  transition: transform 0.06s linear;
}
/* 16:9 by default — these are game screenshots, not app windows */
.ayna-viewport__media { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/9; }
.ayna-viewport--video .ayna-viewport__media { aspect-ratio: 16/9; background: var(--ayna-void); }
.ayna-viewport--gallery .ayna-viewport__media { aspect-ratio: 16/9; }

/* =========================================================
   HERO — full-bleed
   ========================================================= */
.ayna-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }
.ayna-hero__media { position: absolute; inset: 0; }
.ayna-hero__bg { width: 100%; height: 100%; object-fit: cover; }
.ayna-hero__scrim { position: absolute; inset: 0; background: var(--ayna-scrim); }
.ayna-hero__content {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--ayna-maxw); margin: 0 auto; padding: 0 28px 72px;
}
/* Hero copy renders over key art behind the scrim, so it stays
   at fixed light values. Scoped under .ayna-page to outrank the
   h1 reset above. */
.ayna-page .ayna-hero__title {
  font-family: var(--ayna-display);
  font-size: clamp(32px, 4.6vw, 56px); font-weight: 400; line-height: 1.08;
  margin-bottom: 30px; color: var(--ayna-moon);
}
.ayna-page .ayna-hero__sub { max-width: 560px; font-size: 18px; color: rgba(217,239,230,0.88); margin-bottom: 44px; }
.ayna-hero__kicker {
  font-family: var(--ayna-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ayna-glow); margin: 0 0 14px;
  animation: ayna-glow-pulse 3s ease-in-out infinite;
}
@keyframes ayna-glow-pulse { 0%,100%{opacity:.75} 50%{opacity:1} }
.ayna-hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ayna-hero .ayna-btn--text { color: var(--ayna-moon); }
.ayna-hero .ayna-btn--text:hover { color: var(--ayna-glow); }

/* =========================================================
   FEATURE PILL NAV
   ========================================================= */
.ayna-feature-nav {
  display: flex; gap: 10px; overflow-x: auto;
  max-width: var(--ayna-maxw); margin: 0 auto; padding: 22px 28px;
  scrollbar-width: none;
}
.ayna-feature-nav::-webkit-scrollbar { display: none; }
.ayna-feature-nav a {
  flex: none; font-size: 13.5px; font-weight: 500; color: var(--ayna-text-2);
  padding: 9px 16px; border: 1px solid var(--ayna-border); border-radius: 999px;
  background: var(--ayna-panel);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ayna-feature-nav a:hover {
  color: var(--ayna-pale);
  border-color: var(--ayna-highlight);
  background: var(--ayna-selection-wash);
}

/* =========================================================
   FEATURE ROWS — alternating
   Media column is deliberately dominant (0.62fr / 1.38fr, vs the
   0.85fr / 1.15fr Nur split): the screenshots carry the pitch.
   ========================================================= */
.ayna-feature {
  max-width: var(--ayna-maxw); margin: 0 auto; padding: 84px 28px;
  display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 52px; align-items: center;
  scroll-margin-top: 90px;
}
/* Alternating full-bleed SOLID bands in Ayna Green — each even
   feature reads as its own chapter. Only Moonwhite text sits on
   Ayna Green (approved 5.5:1 pairing). */
.ayna-feature:nth-of-type(even) {
  background: var(--ayna-band);
  box-shadow: 0 0 0 100vmax var(--ayna-band);
  clip-path: inset(0 -100vmax);
  border-top: 1px solid rgba(234,247,240,0.16);
  border-bottom: 1px solid rgba(234,247,240,0.16);
}
.ayna-feature:nth-of-type(even) .ayna-feature__title { color: var(--ayna-on-band); }
.ayna-feature:nth-of-type(even) .ayna-feature__body { color: rgba(234,247,240,0.88); }
.ayna-feature:nth-of-type(even) .ayna-viewport {
  /* keep the frame abyssal so the capture pops off the green */
  background:
    radial-gradient(circle at 1px 1px, var(--ayna-grid-dot) 1px, transparent 1px) 0 0/20px 20px,
    var(--ayna-surface);
}
.ayna-feature--reverse { direction: rtl; }
.ayna-feature--reverse > * { direction: ltr; }
.ayna-feature__title { font-family: var(--ayna-display); font-size: clamp(28px, 3.4vw, 42px); font-weight: 400; line-height: 1.1; margin-bottom: 18px; color: var(--ayna-moon); }
.ayna-feature__body { color: var(--ayna-text-2); font-size: 16px; max-width: 420px; }
.ayna-feature__media {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.ayna-feature__media .ayna-viewport {
  flex: 1;
  min-width: 0;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.65),
    0 0 70px -24px rgba(111,216,194,0.22);
}
/* Vertical single-word feature label in Ayna Gold on the outer
   edge of the screenshot — always reading bottom-to-top, and
   deliberately larger than the feature titles so it dominates
   the row. Decorative — pill nav and titles carry the semantics. */
.ayna-feature__label {
  flex: none;
  order: 1;                                  /* default row: media right → label on outer right */
  writing-mode: vertical-rl;
  transform: rotate(180deg);                 /* read bottom-to-top */
  font-family: var(--ayna-display);
  font-weight: 700;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ayna-gold);
  user-select: none;
}
.ayna-feature--reverse .ayna-feature__label {
  order: -1;                                 /* reversed row: media left → label on outer left */
}

/* =========================================================
   SECTION HEAD (shared)
   ========================================================= */
.ayna-section-head { max-width: 680px; margin: 0 auto 48px; padding: 0 28px; text-align: center; }
.ayna-section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.ayna-section-head__sub { color: var(--ayna-text-2); font-size: 15.5px; }

/* =========================================================
   PRESS QUOTES
   ========================================================= */
.ayna-quotes { max-width: var(--ayna-maxw); margin: 0 auto; padding: 24px 28px 96px; }
.ayna-quotes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ayna-quotes__item {
  background: var(--ayna-panel); border: 1px solid var(--ayna-border);
  border-left: 3px solid var(--ayna-glow);
  border-radius: var(--ayna-radius-md); padding: 26px 28px; margin: 0;
}
.ayna-quotes__item blockquote { margin: 0 0 14px; font-family: var(--ayna-display); font-size: 19px; line-height: 1.45; color: var(--ayna-pale); }
.ayna-quotes__source { font-family: var(--ayna-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ayna-text-2); }

/* =========================================================
   SHOWCASE — big 16:9 captures, two-up (not four-up):
   the gallery exists to promote the game's visuals.
   ========================================================= */
.ayna-showcase { padding: 96px 28px; max-width: var(--ayna-maxw); margin: 0 auto; }
.ayna-showcase__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* =========================================================
   TECH GRID — PC graphics / audio / controls
   ========================================================= */
.ayna-tech { max-width: var(--ayna-maxw); margin: 0 auto; padding: 0 28px 96px; }
.ayna-tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ayna-tech__card {
  background: var(--ayna-panel); border: 1px solid var(--ayna-border);
  border-radius: var(--ayna-radius-md); padding: 26px 28px;
}
.ayna-tech__card h3 {
  margin: 0 0 10px; font-family: var(--ayna-display); font-weight: 400;
  font-size: 20px; letter-spacing: 0.01em; color: var(--ayna-glow);
}
.ayna-tech__card p { color: var(--ayna-text-2); font-size: 14.5px; }

/* =========================================================
   VIDEO
   ========================================================= */
.ayna-video { padding: 0 28px 96px; max-width: 980px; margin: 0 auto; }

/* =========================================================
   CTA — Ayna cover art band with the Sigil Red primary.
   A dark abyss scrim sits over the art so the Moonwhite copy
   keeps its contrast; Ayna Green stays as the loading fallback.
   ========================================================= */
.ayna-cta { padding: 0 28px 96px; max-width: var(--ayna-maxw); margin: 0 auto; }
.ayna-cta__inner {
  background-image: url("/images/games/ayna/cover_ayna.avif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(234,247,240,0.18);
  border-radius: var(--ayna-radius-lg);
  padding: 68px 40px; text-align: center;
}
.ayna-cta__inner h2 { font-size: clamp(28px, 3.2vw, 36px); margin-bottom: 10px; color: var(--ayna-on-band); text-shadow: 1px 1px #000; }
.ayna-cta__sub {  color: var(--ayna-on-band); margin-bottom: 28px; text-shadow: 0.75px 0.75px #000; }
.ayna-cta__buttons { justify-content: center; }
.ayna-cta__inner .ayna-btn--ghost { border-color: rgba(234,247,240,0.45); color: var(--ayna-moon); }
.ayna-cta__inner .ayna-btn--ghost:hover { border-color: var(--ayna-gold); color: var(--ayna-gold); }

/* =========================================================
   FAQ
   ========================================================= */
.ayna-faq { max-width: 760px; margin: 0 auto; padding: 0 28px 120px; }
.ayna-faq__list { border-top: 1px solid var(--ayna-border); }
.ayna-faq__item { border-bottom: 1px solid var(--ayna-border); padding: 22px 0; }
.ayna-faq__item summary {
  cursor: pointer; list-style: none; font-weight: 500; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ayna-pale);
}
.ayna-faq__item summary::-webkit-details-marker { display: none; }
.ayna-faq__item summary::after {
  content: '+'; font-family: var(--ayna-mono); font-size: 18px;
  color: var(--ayna-text-2); transition: transform 0.2s ease, color 0.15s ease;
}
.ayna-faq__item summary:hover::after { color: var(--ayna-highlight); }
.ayna-faq__item[open] summary::after { transform: rotate(45deg); }
.ayna-faq__item p { color: var(--ayna-text-2); font-size: 14.5px; margin-top: 14px; max-width: 600px; }

/* =========================================================
   CREDITS — financial support / grant logos
   Full-colour funding marks sit on a constant white plate
   (EU rules: never recolour), framed by brand chrome.
   ========================================================= */
.ayna-credits { max-width: var(--ayna-maxw); margin: 0 auto; padding: 0 28px 120px; }
.ayna-credits__list {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; max-width: 900px;
}
.ayna-credits__item { flex: 1 1 240px; max-width: 320px; }
.ayna-credits__link {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px; padding: 22px 28px;
  background: var(--ayna-credit-plate, #FFFFFF);
  border: 1px solid var(--ayna-border);
  border-radius: var(--ayna-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ayna-credits__link:hover {
  border-color: var(--ayna-highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ayna-highlight) 14%, transparent);
}
.ayna-credits__logo {
  display: block; width: 100%; height: auto;
  max-height: 64px; object-fit: contain;
}
/* Scoped with .ayna-page so its margins beat the `.ayna-page p` reset */
.ayna-page .ayna-credits__disclaimer {
  max-width: 640px; margin: 28px auto 0; text-align: center;
  color: var(--ayna-text-2); font-size: 13px; line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .ayna-feature { grid-template-columns: 1fr; gap: 32px; padding: 56px 28px; }
  .ayna-feature--reverse { direction: ltr; }
  .ayna-feature__body { max-width: none; }
  /* Single column: the vertical label would steal width from the
     screenshot, so it goes horizontal above the image instead.
     Label + image lead the row; the description text follows. */
  .ayna-feature__media { order: -1; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ayna-feature__media .ayna-viewport { flex: none; width: 100%; }
  .ayna-feature__label,
  .ayna-feature--reverse .ayna-feature__label {
    order: -1;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(36px, 8vw, 52px);
  }
  .ayna-quotes__grid { grid-template-columns: 1fr; }
  .ayna-tech__grid { grid-template-columns: 1fr; }
  .ayna-showcase__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ayna-hero { min-height: 76vh; }
  .ayna-hero__content { padding: 0 20px 48px; }
  .ayna-hero__cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ayna-feature, .ayna-quotes, .ayna-tech, .ayna-showcase, .ayna-video, .ayna-faq, .ayna-cta, .ayna-credits { padding-left: 20px; padding-right: 20px; }
  .ayna-credits__item { flex-basis: 100%; max-width: 340px; }
  .ayna-credits__link { min-height: 92px; padding: 18px 22px; }
  .ayna-cta__inner { padding: 48px 24px; }
  .ayna-section-head { padding: 0 20px; margin-bottom: 36px; }
}

@media (max-width: 480px) {
  .ayna-page .ayna-hero__title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .ayna-page * { transition-duration: 0.001ms !important; animation: none !important; }
  .ayna-page .ayna-viewport { transform: none !important; }
}

/* =========================================================
   SAFE AREAS (iPhone notch / Dynamic Island / home indicator)
   Content is padded by max(gutter, inset); the page surface,
   hero media/scrim, and the full-bleed green bands keep
   painting edge-to-edge underneath.
   Requires viewport-fit=cover on the page's viewport meta.
   ========================================================= */
@supports (padding: max(0px)) {
  .ayna-page {
    --ayna-safe-l: env(safe-area-inset-left, 0px);
    --ayna-safe-r: env(safe-area-inset-right, 0px);
    --ayna-safe-b: env(safe-area-inset-bottom, 0px);
    --ayna-gutter: 28px;
    padding-bottom: var(--ayna-safe-b);
  }

  .ayna-page .ayna-hero__content,
  .ayna-page .ayna-feature-nav,
  .ayna-page .ayna-feature,
  .ayna-page .ayna-section-head,
  .ayna-page .ayna-quotes,
  .ayna-page .ayna-tech,
  .ayna-page .ayna-showcase,
  .ayna-page .ayna-video,
  .ayna-page .ayna-cta,
  .ayna-page .ayna-faq,
  .ayna-page .ayna-credits {
    padding-left: max(var(--ayna-gutter), var(--ayna-safe-l));
    padding-right: max(var(--ayna-gutter), var(--ayna-safe-r));
  }

  @media (max-width: 720px) {
    .ayna-page { --ayna-gutter: 20px; }
  }
}