/* Orðheimar homepage: hero with the shapes, intro text, the games, footer.
   The shapes are flat SVG here; home-shapes.js draws them as 3D blocks that scatter on scroll. */

:root {
  --navy: #003449;
  --teal: #58d6dc;
  --yellow: #ffc452;
  --coral: #ff734d;
  --line: #e6e6e6;
  --wrap: min(1152px, calc(100vw - 48px));
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body.home { margin: 0; background: #fff; color: var(--navy); font-family: Geograph, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero ---------- */
.home-hero { position: relative; z-index: 2; height: 540px; background: var(--teal); }
.home-nav { position: absolute; z-index: 3; top: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 40px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.home-nav a[aria-current] { font-weight: 700; }
.home-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-logo { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(607px, 42vw); aspect-ratio: 1115 / 367; margin: 0; transform: translate(-50%, -42%); }
.home-logo-anim, .home-logo-static { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-logo-anim svg { display: block; }
.home-logo [hidden] { display: none; }

/* The shapes scale with the window (full size at 1440px wide, never below 42%) and may run past the hero */
.shapes { position: absolute; z-index: 2; overflow: visible; height: auto; pointer-events: none; }
.shapes-right { top: 0; right: 0; width: clamp(153.7px, 25.42vw, 366px); }
.shapes-left { left: clamp(-251px, -17.43vw, -105.4px); top: clamp(93.2px, 15.42vw, 222px); width: clamp(237.7px, 39.31vw, 566px); }
/* once the 3D blocks are drawn, the flat ones step aside (they stay in the layout to place the blocks) */
.home-hero.is-3d .shapes { visibility: hidden; }

.shapes-3d { position: fixed; inset: 0; z-index: 5; width: 100vw; height: 100vh; pointer-events: none; }
.shapes-3d:not(.is-on) { display: none; }

/* ---------- Text ---------- */
/* the text and the dark games section sit above the 3D blocks, so the blocks pass behind them */
.home-text, .home-games { position: relative; z-index: 6; }
.home-text { width: var(--wrap); margin: 0 auto; padding: 120px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 364px)); justify-content: center; gap: 48px; font-size: 18px; line-height: 1.6; }
.home-text p { margin: 0; }
.home-text.is-single { grid-template-columns: minmax(0, 620px); text-align: center; font-size: 25px; font-weight: 500; line-height: 1.4; text-wrap: balance; }
/* lower text block: paragraphs stacked in one centred column */
.home-text.is-stack { grid-template-columns: minmax(0, 620px); gap: 24px; text-align: center; text-wrap: pretty; }
/* intro text sits on the page with no box; the 3D shapes pass behind the text (.home-text is above the canvas) */
.home-intro p + p { margin-top: 1.3em; font-size: .8em; font-weight: 400; } /* second paragraph: regular, a size down */

/* ---------- Games ---------- */
.home-games { background: var(--navy); padding: 120px 0; scroll-margin-top: 0; }
.home-col { width: min(760px, calc(100vw - 48px)); margin: 0 auto; }
.home-feature, .home-tile { display: block; overflow: hidden; border-radius: 8px; transition: transform .25s ease, box-shadow .25s ease; }
.home-feature img, .home-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
a.home-feature:hover, a.home-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
a.home-feature:focus-visible, a.home-tile:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.home-tiles { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-tile.is-soon { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--yellow); text-align: center; font-size: clamp(16px, 2.2vw, 24px); font-weight: 500; line-height: 1.2; }

/* ---------- Footer ---------- */
.home-footer { width: var(--wrap); margin: 0 auto; padding: 56px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; /* logo only, on the right */ gap: 24px; flex-wrap: wrap; }
.home-footer .logo svg { display: block; width: 134px; height: auto; }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 16px 40px; font-size: 14px; font-weight: 500; }
.home-footer nav a:hover { color: #2a8f95; }

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  /* phones: teal hero = top half of the screen, white intro = bottom half */
  .home-hero { height: 50vh; height: 50svh; min-height: 340px; }
  .home-nav { top: 28px; left: 24px; transform: none; gap: 28px; font-size: 14px; }
  .home-logo { top: 50%; width: 64vw; transform: translate(-50%, -40%); }
  .shapes-left { top: auto; bottom: -61px; width: 170px; left: -58px; } /* the point of the long dark piece sits on the line where teal meets white (the pieces below hang over the white); about a third off screen */
  .home-text { grid-template-columns: 1fr; gap: 24px; padding: 72px 0; font-size: 16px; }
  .home-text.is-single { font-size: 19px; min-height: 50vh; min-height: 50svh; align-content: center; padding: 32px 0; }
  .home-games { padding: 72px 0; }
  .home-tiles { gap: 12px; margin-top: 12px; }
  .home-footer { padding: 40px 0; }
  .home-footer nav { gap: 12px 24px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-feature, .home-tile { transition: none; }
}