/* Mimyr Games — "The Vow: Vampire's Curse" landing.
   Clean rebuild of the Tilda page (S4). Design tokens per SPEC.md §4.
   Warm-dark pixel-art horror scene, mouse parallax, prefers-reduced-motion aware. */

:root {
  /* Palette (SPEC §4) */
  --c-heading:       #C9BFA9;   /* beige section headings           */
  --c-community:     #6B9268;   /* green community links + icons    */
  --c-partner:       #FFFFFF;   /* white partner links              */
  --c-partner-line:  #82200D;   /* warm dark-red partner outline    */
  --c-playdemo:      #B08F6B;   /* bronze PLAY DEMO text            */
  --c-bg:            #0A0A0A;   /* dark fill behind the art         */

  /* Typography — TildaSans self-host vs substitute decided later (SPEC §5). */
  --font-body: "TildaSans", Arial, Helvetica, sans-serif;
  /* Label/display face — AlbertusNova, self-hosted (see @font-face below). */
  --font-label: "AlbertusNova", Georgia, serif;

  /* --- Reserved actor lane (fluid layout, 640px→∞). See plan §After. ------ */
  /* Widest button row (311.6px, measured from AlbertusNova metrics)
     + .content inline padding (24px) + parallax travel (15px) + fallback-font headroom. */
  --content-min: 344px;

  /* izolda's IMAGE BOX. Width-led, as the reference does. Terms in order:
       max(46vw, 38vh)   nominal size (38vh keeps her present on tall/portrait)
       77vh              never taller than 94vh  (0.8208 x 94vh)
       740px             absolute cap == today's 900px height        [decision A]
       calc(...)/0.91    collision guard, measured against her PAINTED body */
  --woman-w: min(max(46vw, 38vh), 77vh, 740px,
                 calc((100vw - var(--content-min)) / 0.91));

  /* izolda's LANE. Her opaque edge is at 91% of the PNG box at button height
     (measured from the alpha channel), so the grid track stops there and the
     last 9% of her box hangs over the content track as transparent air.
     This is decision C: the box may overlap, the painted body may not. */
  --woman-lane: calc(var(--woman-w) * 0.91);

  /* Cards: reference is 276px at 1200 & 960, 218 at 640. Today renders ~45% too big. */
  --cards-w: clamp(210px, min(28vw, 48vh), 290px);

  /* Ultrawide: cap the FOREGROUND composition to a centered stage; the
     background art stays full-bleed. Inert below --stage (gutter = 0). */
  --stage:  1760px;
  --gutter: max(0px, (100vw - var(--stage)) / 2);
}

/* AlbertusNova — labels only (headings + buttons). Bold face covers the
   600-weight PLAY DEMO so no synthetic bolding is needed. */
@font-face {
  font-family: "AlbertusNova";
  src: url("assets/fonts/albertus_final/AlbertusNova.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AlbertusNova";
  src: url("assets/fonts/albertus_final/AlbertusNova-Bold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--c-partner);
  background: var(--c-bg);
}

img { display: block; max-width: 100%; }

/* ------------------------------------------------------------------ *
 * Hero shell                                                         *
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;                                /* was: flex */
  grid-template-columns: var(--woman-lane) 1fr; /* the actor lane + free space */
  align-items: center;
  /* 6vw side padding would offset the lane from .art (inset:0, resolves against
     the padding box), so the reserved track would no longer align with izolda.
     The ultrawide gutter uses this deliberately: it shifts the foreground grid
     inward (and izolda/cards re-anchor to it) while .art stays full-bleed. */
  padding: 5vh var(--gutter);
}

/* ------------------------------------------------------------------ *
 * Art scene (decorative, aria-hidden)                                *
 * ------------------------------------------------------------------ */
.art { position: absolute; inset: 0; z-index: 0; }

/* Red/orange sunset sky — original Tilda scene had no flat bg; art covers it. */
.art__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 55% 8%,
      #7a1f10 0%, #4a1408 32%, #1a0805 62%, var(--c-bg) 100%);
}

/* Full-bleed image layers. Slightly oversized so parallax never reveals edges. */
.layer {
  position: absolute;
  top: -5%; left: -5%;
  width: 110%; height: 110%;
  /* Override the global `img { max-width: 100% }`, which would otherwise clamp
     the 110% width back to 100% and, with left:-5%, leave a gap on the right. */
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

.layer--scene { object-position: center top; }

/* battleground.jpg is a JPG (opaque black around the lit village) — screen blend drops
   the black and keeps the glowing isometric village near the lower centre. */
.layer--base {
  object-position: center bottom;
  mix-blend-mode: screen;
}

/* Foreground actors: woman anchored bottom-left, cards bottom-right. */
.layer--woman,
.layer--cards {
  height: auto; top: auto; left: auto;
  object-fit: contain;
}
/* Width-led sizing (like the reference). aspect-ratio derives the height, so a
   tall/narrow viewport can no longer make either actor wide. main.js writes a
   pure translate3d (origin-independent), so transform-origin is not needed. */
.layer--woman {
  bottom: 0; left: var(--gutter);
  width: var(--woman-w);
  aspect-ratio: 985 / 1200;
}
.layer--cards {
  /* -20px eats the transparent right padding baked into card_hand.png so the
     painted fan sits flush to the (stage) edge; the strip hangs off-screen and
     is clipped by .hero overflow. Inward-only parallax keeps it from crossing. */
  bottom: 0; right: calc(var(--gutter) - 20px);
  width: var(--cards-w);
  aspect-ratio: 372 / 384;
}

/* Corner brush-strokes (white bg webp/png) — multiply keeps the speckle,
   drops the white, giving a dark vignette in the top corners. */
.corner {
  position: absolute;
  top: 0;
  height: 100%;                        /* full-height side framing (was: top corner) */
  width: clamp(180px, 22vw, 360px);
  /* black_stroke.png is 500x500 square; cover crops a full-height vertical slice
     of the grunge at the bounded width instead of ballooning to ~1vh wide. */
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: .9;
}
.corner--left  { left: 0; }
.corner--right { right: 0; transform: scaleX(-1); }

/* ------------------------------------------------------------------ *
 * Content column (over the art)                                      *
 * ------------------------------------------------------------------ */
.content {
  position: relative;
  z-index: 1;
  /* Load-bearing: the only in-flow child would auto-place into column 1 (the
     izolda lane) without this. */
  grid-column: 2;
  justify-self: center;
  /* An explicit width wider than the track overflows it (does not clamp), which
     at 640px would punch back over izolda — so cap at 100% of the track, not 92vw. */
  width: min(560px, 100%);
  padding-inline: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vh, 44px);
  text-align: center;
}

/* CTA wrapper (PLAY DEMO + community + partners). Transparent by default so the desktop
   and mobile layouts see its children as direct .content children; the tablet band turns
   it into a real grouped block. */
.cta { display: contents; }

.logo {
  width: min(440px, 70%);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6));
}

/* PLAY DEMO — bronze text over the ornate wooden button graphic. */
.play-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 30vw, 320px);
  aspect-ratio: 625 / 132;
  background: url("assets/block_play.png") center / contain no-repeat;
  color: var(--c-playdemo);
  font-family: var(--font-label);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
  transition: transform .15s ease, filter .15s ease, color .15s ease;
}
.play-demo:hover,
.play-demo:focus-visible {
  transform: scale(1.03);
  filter: brightness(1.08);
  color: #E4CBA4;
}

/* Community / partners blocks */
.block { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.block__title {
  color: var(--c-heading);
  font-family: var(--font-label);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: .5px;
}

.block__links { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; justify-content: center; }

/* Pill link buttons — transparent fill, 1px outline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 176px;
  padding: 9px clamp(12px, 1.4vw, 20px);
  border: 1px solid;
  border-radius: 3px;
  background: rgba(12, 8, 10, .70);
  box-shadow: inset 0 1px 0 rgba(176, 143, 107, .45);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
  /* Reference hover only brightens the border-color (no lift, no fill change). */
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease;
}

/* One icon box for both SVG icons and the blob image. */
.btn__icon, .btn__star { width: 20px; height: 20px; flex: none; object-fit: contain; }

.btn--community {
  border-color: #7FA97B;
  color: #A9CFA5;
  background: rgba(9, 6, 7, .80);
  box-shadow: inset 0 1px 0 rgba(176, 143, 107, .45), 0 0 10px rgba(107, 146, 104, .40);
}
.btn--community:hover,
.btn--community:focus-visible {
  border-color: #C3E3BF;
  color: #E4F3E1;
  background-color: rgba(107, 146, 104, .14);
  box-shadow: inset 0 1px 0 rgba(176, 143, 107, .55), 0 0 16px rgba(107, 146, 104, .65);
}

/* join us — matched to the soft green glow of the whole community pair. */
.btn--glow { box-shadow: inset 0 1px 0 rgba(176, 143, 107, .45), 0 0 10px rgba(107, 146, 104, .40); }

/* Partner pills — quiet second level: muted warm text, flat in rest. */
.btn--partner {
  border-color: var(--c-partner-line);
  color: #9A8E84;
  background: rgba(12, 8, 10, .70);
  box-shadow: inset 0 1px 0 rgba(176, 143, 107, .45);
}
.btn--partner:hover,
.btn--partner:focus-visible {
  border-color: #C60000;
  color: #F0E6DC;
  background-color: rgba(130, 32, 13, .20);
  box-shadow: inset 0 1px 0 rgba(176, 143, 107, .55), 0 0 16px rgba(198, 0, 0, .6);
}

/* Keyboard focus */
a:focus-visible { outline: 2px solid var(--c-heading); outline-offset: 3px; }

/* ------------------------------------------------------------------ *
 * Responsive (SPEC §8)                                               *
 * ------------------------------------------------------------------ */

/* The 640px→∞ band is one continuous fluid rule (the reserved actor lane above).
   The former 1199px and 959px tiers are gone — the lane replaces the fixed nudge
   and the opacity wash. Only a small legibility dulling of the cards remains. */
@media (max-width: 899px) {
  .layer--cards { opacity: .8; }
}

/* Ultrawide (> --stage): the content is centred and the background is full-bleed,
   so the cards — anchored to the stage's right edge — sit inset from the real
   scene edge and read as floating. Hide them past the stage width. */
@media (min-width: 1760px) {
  .layer--cards { display: none; }
}

/* Tablet / portrait (640–1024px): on a tall viewport the reserved izolda lane balloons
   (the 38vh term in --woman-w wins) and the desktop two-column grid scatters. Hide izolda
   here and centre the content as one clean stack (logo → PLAY DEMO → community → partners);
   the cards stay bottom-right and the background scene stays. */
@media (min-width: 640px) and (max-width: 1024px) {
  /* Drop the reserved lane — content is a single centred column now. */
  .hero { grid-template-columns: 1fr; }

  /* Scaled-up centred stack (mobile-like proportions, but the extra width keeps each
     button pair on ONE row). */
  .content {
    grid-column: 1;
    justify-self: center;
    width: min(680px, 90vw);
    gap: clamp(28px, 5vh, 60px);               /* content is auto-height, centred by the hero */
  }

  .logo { width: min(560px, 82%); }

  /* CTA stays a grouped block so PLAY DEMO sits centred over the button pairs. */
  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 4vh, 48px);
  }
  .cta .play-demo,
  .cta .block { margin: 0; }

  .play-demo { width: clamp(320px, 55vw, 460px); font-size: 26px; }

  .block { gap: 18px; }
  .block__title { font-size: 22px; line-height: 26px; }
  .block__links { gap: clamp(18px, 3.5vw, 40px); }

  /* Bigger pills — the pair still fits one row (2×210 + gap < inner width even at 640px). */
  .btn {
    font-size: 17px;
    min-width: 210px;
    padding: 13px 22px;
    gap: 12px;
    line-height: 18px;
    border-radius: 7px;
  }
  .btn__icon, .btn__star { width: 24px; height: 24px; }

  /* Hide ONLY izolda in this band (cards stay bottom-right). Desktop ≥1025px keeps her;
     mobile ≤639px already hides her. */
  .layer--woman { opacity: 0; }
}

/* Mobile — stack links, left-aligned; content flows, page may scroll. */
@media (max-width: 639px) {
  /* Content placed exactly like the Tilda mobile artboard: res-320 px -> vw
     (x0.3125). The hero becomes a width-scaled artboard (789px @320 = 246.6vw)
     and every element is absolutely positioned; buttons are uniform-width pills. */
  .hero {
    display: block;
    min-height: 0;
    height: 246.6vw;
    padding: 0;
  }
  .content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    display: block;
    gap: 0;
  }

  .logo { position: absolute; top: 16.25vw; left: 13.75vw; width: 75vw; margin: 0; }

  .play-demo { position: absolute; top: 75.9vw; left: 8.75vw; width: 82.5vw; }

  /* neutralise the flex wrappers — children are positioned absolutely below */
  .block, .block__links { position: static; display: block; }

  .block:first-of-type .block__title { position: absolute; top: 100.6vw; left: 28.75vw; width: 42.5vw; }
  .block:last-of-type  .block__title { position: absolute; top: 156.9vw; left: 26.9vw;  width: 46.25vw; }

  /* uniform pill buttons at exact Tilda coordinates */
  .btn {
    position: absolute;
    justify-content: center;
    min-width: 0;            /* desktop min-width must not fight the vw widths */
    height: 13.1vw;
    padding: 0 10px;
  }
  .block:first-of-type .btn:nth-child(1) { top: 112.5vw; left: 26.55vw; width: 46.9vw; }  /* wishlist  */
  .block:first-of-type .btn:nth-child(2) { top: 131.6vw; left: 26.55vw; width: 46.9vw; }  /* join us   */
  .block:last-of-type  .btn:nth-child(1) { top: 169.4vw; left: 26.55vw; width: 46.9vw; }  /* e-mail us */
  .block:last-of-type  .btn:nth-child(2) { top: 187.8vw; left: 26.55vw; width: 46.9vw; }  /* pitch deck*/

  /* Foreground actors hidden on mobile (Figma mobile has no woman/cards). */
  .layer--woman { opacity: 0; }
  .layer--cards { opacity: 0; }

  /* ---- Mobile art scene, rebuilt from the Figma mobile layer stack ----------
     Same assets as desktop, re-placed at Figma's res-320 coordinates (px -> vw
     via 100/320). Paint order back -> front: orange sky, battleground, strokes,
     map. All stay under .content (.art z-0 < .content z-1). dark_map's
     transparent sky + bottom let the lower layers show through. */

  /* orange bg: vivid sunset band (Tilda renders this as a gradient too). Width-
     scaled (vw) so the bright-orange horizon lands like Figma's res-320 band. */
  .art__sky {
    background:
      linear-gradient(to bottom,
        #7a1f0c 0, #c0471a 22vw, #e0691a 34vw, #f0851f 44vw,
        #8a2a10 56vw, var(--c-bg) 74vw);
  }

  /* battleground.jpg (screen): X-375 Y13 W640 H461 — lit village, lower-left.
     Painted IN FRONT of the map (screen blend) so its lit snowy village lights
     the scene; screen drops its black so only the lit gameplay area shows. */
  .layer--base {
    display: block;
    top: 4.1vw; left: -117.2vw;
    width: 200vw; height: 144.1vw;
    object-fit: fill; object-position: center;
    mix-blend-mode: screen;
    /* Very low opacity so battleground is only a faint snow-glow — its
       character/striped-barrier sprites should not read as a game screenshot. */
    opacity: 0.18;
    z-index: 3;
  }

  /* black_stroke.png x2 (multiply): grungy dark speckle framing L/R edges.
     max-width:none defeats the global img{max-width:100%}, which would else
     clamp the 114.7vw width and distort the square strokes. */
  .corner {
    display: block;
    width: 114.7vw; height: 114.7vw;
    max-width: none;
    z-index: 2;
  }
  .corner--left  { left: -72.8vw; top: -0.6vw; }
  .corner--right { left: 41.9vw;  top: -5.6vw; }

  /* map (dark_map.png): X-567 Y-90 W1177 H716 — dark scene silhouettes; sits
     over the orange sky (its transparent sky shows the sunset), under the
     battleground light. */
  .layer--scene {
    top: -28.1vw; left: -177.2vw;
    width: 367.8vw; height: auto;
    object-fit: fill;
    z-index: 1;
  }
}