/* ============================================================
   AIS GAMES — about page sections
   Giant stat intro, globe fly-out map, crafts grid, timeline with
   floating app icons, closing CTA card.
   Requires: tokens.css, main.css — every value here is a token.
   ============================================================ */

/* ---------- Stat intro ---------- */
.about-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--hero-gap)) var(--pad-section);
  text-align: center;
}
/* Soft accent glow behind the figure */
.about-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--glow-y);
  width: var(--w-glow);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: var(--glow-accent);
  pointer-events: none;
}
.about-hero > * { position: relative; }

.about-figure {
  font-size: var(--text-figure-xl);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-year);
  /* Solid accent first, the gradient only where text clipping works */
  color: var(--accent-text);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .about-figure {
    background-image: var(--grad-text-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.about-figure-sub {
  font-size: var(--text-figure-sub);
  font-weight: var(--w-heading);
  font-stretch: var(--stretch-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
  margin-top: var(--sp-3);
}

.about-hero .page-lead {
  margin-inline: auto;
  margin-top: var(--sp-6);
  text-align: center;
}

/* Accent arrow links (.arrow-links / .arrow-link) come from main.css */

/* ---------- Globe map ----------
   The section is a tall scroll runway; the stage inside sticks to the
   viewport while js/about.js flies the camera out (progress 0 → 1 lands
   in --map-p). The globe is drawn on the canvas; the flat sheet below it
   is the no-WebGL fallback. */
.map-section {
  position: relative;
  height: var(--map-runway);
}

.map-stage {
  --map-p: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--map-bg); /* page background: night sky or daylight paper */
}

.world-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease);
}
.map-stage.is-ready .world-globe { opacity: 1; }
/* The stage's bottom edge dissolves into the page instead of cutting the
   globe off; the caption sits above the fade */
.map-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--map-fade);
  background: linear-gradient(to bottom, transparent, var(--map-bg));
  pointer-events: none;
  z-index: var(--z-pin);
}

/* Fallback: the flat sheet centered in the stage, pin in sheet coordinates */
.map-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 152vh); /* the sheet is 1010 × 666 */
  transform: translate(-50%, -50%);
}
.world-map { width: 100%; }

/* WebGL mode: the pin layer covers the stage, the sheet stays unused */
.map-stage.is-3d .map-inner {
  inset: 0;
  width: auto;
  transform: none;
}
.map-stage.is-3d .world-map { display: none; }
/* Türkiye pin: a pixel in the map's own ink, so it reads on top of the
   accent-colored country, ringed by the page background, plus a pulsing
   ring and the label chip */
.map-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  /* js scales the chip up while the camera is close */
  transform: translate(-50%, -100%) scale(var(--pin-scale, 1));
  transform-origin: 50% 100%;
  z-index: var(--z-pin);
  text-align: center;
  line-height: var(--lh-snug);
  pointer-events: none;
  padding-bottom: var(--pin-gap);
  transition: opacity var(--dur-reveal) var(--ease);
}
/* Wait for the globe before showing the pin over it */
.map-stage.is-3d:not(.is-ready) .map-pin { opacity: 0; }
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--pin-dot-lift);
  width: var(--pin-dot);
  height: var(--pin-dot);
  transform: translateX(-50%);
  background: var(--map-ink);
  outline: var(--pin-outline) solid var(--map-bg);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--map-ink) var(--pulse-mix), transparent);
  animation: pin-pulse var(--dur-pulse) var(--ease) infinite;
}
@keyframes pin-pulse {
  70% { box-shadow: 0 0 0 var(--pulse-ring) transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.map-pin strong {
  display: block;
  font-size: var(--text-pin);
  font-weight: var(--w-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--map-ink);
  text-shadow: var(--map-text-shadow);
}
.map-pin span {
  font-size: var(--text-pin-sub);
  color: var(--map-ink-dim);
  text-shadow: var(--map-text-shadow);
}

.map-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--map-caption-gap);
  z-index: var(--z-caption);
  text-align: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  /* Rises into view over the last stretch of the fly-out */
  opacity: clamp(0, calc((var(--map-p) - var(--caption-start)) / var(--caption-span)), 1);
  transform: translateY(calc((1 - var(--map-p)) * var(--reveal-shift-lg)));
}
.map-caption h2 {
  font-size: var(--text-display-lg);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
  color: var(--map-ink);
  text-shadow: var(--map-text-shadow-lg);
}
.map-caption p {
  margin-top: var(--sp-2);
  font-weight: var(--w-ui);
  letter-spacing: var(--tracking-ui);
  color: var(--map-ink);
  text-shadow: var(--map-text-shadow);
}

.where-text {
  padding-block: var(--pad-where);
}
.where-text p {
  font-size: var(--text-lead);
  font-weight: var(--w-ui);
  letter-spacing: var(--tracking-lead);
  line-height: var(--lh-copy);
}
.where-text p + p { margin-top: var(--sp-5); }

/* ---------- Who we are ---------- */
.who {
  text-align: center;
  padding-block: var(--sp-6) var(--pad-section);
}
.who h2 {
  font-size: var(--text-display);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
}
.who-sub {
  margin-top: var(--sp-3);
  font-weight: var(--w-ui);
  letter-spacing: var(--tracking-ui);
  color: var(--ink-dim);
}
.who .where-text { padding-bottom: 0; text-align: left; }
.who .arrow-links { justify-content: flex-start; }

/* ---------- What we do ----------
   Four surface cards, icon beside the copy, like the contact channels.
   Card sections carry the site's card width, the same as the closing CTA
   below and the grids on the other pages. */
.crafts {
  width: var(--w-cards);
  margin-inline: auto;
  padding-block: var(--sp-6) var(--pad-section);
}
.crafts h2 {
  font-size: var(--text-display);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
  text-align: center;
  margin-bottom: var(--sp-6);
}
.craft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
}
.craft {
  display: flex;
  align-items: flex-start; /* titles line up across the row whatever the copy length */
  gap: var(--sp-5);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
}
.craft img {
  width: var(--icon-craft);
  flex-shrink: 0;
  border-radius: var(--radius-icon);
  box-shadow: var(--shadow-pop);
}
.craft h3 {
  font-size: var(--text-h3);
  font-weight: var(--w-heading);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--sp-3);
}
.craft p {
  color: var(--ink-dim);
  font-size: var(--text-body);
  line-height: var(--lh-copy);
}

/* ---------- Timeline ----------
   A giant two-line year in the accent, the story in a left-aligned column,
   and app icons floating at the sides that ride over the closing card
   below (the section stacks above it) while js drifts them upward. */
.timeline {
  position: relative;
  z-index: var(--z-float);
  padding-block: var(--pad-section) var(--pad-timeline-bottom);
}
.era {
  position: relative;
  padding-inline: var(--gutter); /* the section is full-bleed; the copy is not */
  text-align: center;
}
/* The same accent glow as the stat intro, behind the year */
.era::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--w-glow);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -30%);
  background: var(--glow-accent);
  pointer-events: none;
}
.era > * { position: relative; }

.era-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--text-year);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-year);
  color: var(--accent-text);
}
/* Second line steps to the right, like a typed date range */
.era-year .era-to { translate: var(--year-step) 0; }

/* The section runs full width for the year and the floating icons; the
   reading column keeps the same measure as the rest of the page's copy */
.era-copy {
  width: min(var(--w-narrow), 100%);
  margin: var(--sp-8) auto 0;
  text-align: left;
}
.era-copy h3 {
  font-size: var(--text-h2-lg);
  font-weight: var(--w-ui);
  font-stretch: var(--stretch-text);
  letter-spacing: var(--tracking-tight);
}
.era-copy p {
  margin-top: var(--sp-4);
  font-size: var(--text-copy);
  font-weight: var(--w-copy);
  letter-spacing: var(--tracking-lead);
  line-height: var(--lh-copy);
}

/* Floating app icons: sized by the token, placed by --x/--y (per icon,
   in the markup), scaled a touch by --k. js moves them on scroll. */
.float-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.float-icons .pwrap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--icon-float) * var(--k, 1));
}
.float-icons img {
  width: 100%;
  border-radius: var(--radius-icon);
  filter: var(--shadow-icon);
  opacity: var(--float-icons-alpha);
  will-change: transform;
}

/* ---------- Closing CTA ---------- */
.about-cta {
  padding-block: var(--section-pad) var(--pad-section);
}
/* Same card width as the other pages' card sections */
.about-cta.container-wide { width: var(--w-cards); }
.about-cta .card {
  background: var(--grad-cta);
  color: var(--ink-on-art); /* navy card stays dark in both themes */
  text-align: center;
  padding: var(--pad-cta-y) var(--pad-cta-x);
}
.about-cta .card::before { content: none; }
/* Giant brand-style headline, like the reference card */
.about-cta h2 {
  font-size: var(--text-cta);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  word-spacing: var(--word-display);
  margin-bottom: var(--gap-cta-title);
}
.cta-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cta);
  max-width: var(--w-cta);
  margin-inline: auto;
  text-align: left;
}
.cta-duo h3 {
  font-size: var(--text-h3);
  font-weight: var(--w-sub);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-4);
}
.cta-duo p {
  color: var(--ink-on-art-soft);
  font-weight: var(--w-copy);
  margin-bottom: var(--sp-5);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .craft-grid { grid-template-columns: 1fr; }
  .craft { gap: var(--sp-4); }
  /* Stacked blocks stay left-aligned under the centered headline, like the reference */
  .cta-duo { grid-template-columns: 1fr; }
  .float-icons { display: none; }
  .crafts,
  .about-cta.container-wide { width: calc(100% - var(--gutter) * 2); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* No fly-out: a plain full-height stage showing the whole world */
  .map-section { height: auto; }
  .map-stage { position: relative; }
  .map-caption { opacity: 1; transform: none; }
  .world-globe, .map-pin { transition: none; }
  .float-icons img { will-change: auto; }
  .map-pin::after { animation: none; }
}