/* HFF 9.0 web theme. This file is shared by the coming-soon page and the future landing page.
   Layout concept: a poster column (the "stage") centred on a sunburst sky,
   with props anchored to it the way they sit on Sanya's 1080x1440 posters. */

@font-face {
  font-family: "Magic Hat";
  src: url("../fonts/magic-hat.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Theme palette, from Sanya (Netsavvies) */
  --yellow: #f9c41c;
  --green: #4e9b57;
  --red: #db234f;
  --blue: #298fce;
  --purple: #7526dc;
  --cream: #fff9e1;   /* "white" */
  --ink: #282724;     /* "black" */
  --navy: #3f3791;    /* "dark blue" */
  --yellow-ray: #ffd84a; /* lighter sunburst ray tint, used only inside yellow sunbursts */

  /* Per-page roles. The approved Kirtidan combo: purple sky, green blocks, red speakers. */
  --sky: var(--purple);
  --block: var(--green);

  --display: "Magic Hat", "Archivo Black", Impact, "Arial Black", sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;

  --stage: min(100%, 640px);
  --edge: 4px;              /* cream border on blocks */
  --drop: 6px;              /* hard ink shadow */
  color-scheme: light;
}

@property --sky-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--cream);
  font: 500 1rem/1.5 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shared poster parts ---------- */

/* Sunburst rays behind everything */
.sky {
  position: relative;
  isolation: isolate;
  background:
    repeating-conic-gradient(from var(--sky-angle) at 50% var(--ray-y, 30%),
      color-mix(in srgb, var(--sky) 100%, white 0%) 0deg 7deg,
      color-mix(in srgb, var(--sky) 86%, white 14%) 7deg 14deg);
}

html.motion .sky { animation: sky-rays var(--ray-duration, 96s) linear infinite; }
html.motion .sky:nth-of-type(even) { --ray-duration: 124s; animation-direction: reverse; }
html.motion .ambient.is-idle-paused { animation-play-state: paused; }
html.motion .ambient.is-idle-paused .sky { animation-play-state: paused; }
@keyframes sky-rays { to { --sky-angle: 360deg; } }

/* Extruded display type, like "WE'RE HAPPY TO ANNOUNCE" */
.extrude {
  font-family: var(--display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink),
    4px 4px 0 var(--ink), 5px 5px 0 var(--ink);
}

/* Name block: palette fill, cream border, hard ink shadow, square corners */
.block {
  display: inline-block;
  background: var(--block);
  border: var(--edge) solid var(--cream);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
  color: var(--cream);
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 1;
  /* Magic Hat leaves extra space under the letters, so the bottom padding is smaller */
  padding: .34em .7em .24em;
}

.sticker {
  filter:
    drop-shadow(3px 0 0 var(--cream)) drop-shadow(-3px 0 0 var(--cream))
    drop-shadow(0 3px 0 var(--cream)) drop-shadow(0 -3px 0 var(--cream))
    drop-shadow(5px 7px 0 rgb(40 39 36 / .45));
}

/* Piano-key band */
.keys {
  height: clamp(28px, 6vw, 44px);
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, var(--ink) 11px 13px),
    linear-gradient(var(--cream), var(--cream));
  position: relative;
  border-block: 3px solid var(--ink);
}
.keys::after { /* black keys on the top 60%: two, gap, three, gap */
  content: "";
  position: absolute; inset: 0 0 40% 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 8px, var(--ink) 8px 16px, transparent 16px 21px, var(--ink) 21px 29px,
    transparent 29px 47px, var(--ink) 47px 55px, transparent 55px 60px, var(--ink) 60px 68px,
    transparent 68px 73px, var(--ink) 73px 81px, transparent 81px 91px);
}

/* Black-and-cream checker band: two rows of 18px squares */
.checker {
  height: 36px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--cream) 0 50%) 0 0 / 36px 36px;
}

/* Checker floor in perspective, in the sky colour and cream */
.floor {
  position: absolute; inset: auto -40% 0 -40%;
  height: 60%;
  z-index: -1;
  transform-origin: 50% 100%;
  transform: perspective(520px) rotateX(58deg);
  background: repeating-conic-gradient(var(--floor, var(--ink)) 0 25%, var(--cream) 0 50%) 50% 0 / 120px 120px;
}

/* Footer strip: dashed rules + date / venue / ticketing */
.strip {
  background: var(--block);
  color: var(--cream);
  border-top: 4px solid var(--ink);
  padding-block: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.strip__inner {
  max-width: 980px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px clamp(14px, 4vw, 36px);
  border-block: 2px dashed color-mix(in srgb, var(--cream) 70%, transparent);
  padding-block: 10px;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1rem, 3.6vw, 1.5rem); line-height: 1.05; text-align: center;
}
.strip__star { color: var(--yellow); font-family: var(--body); }
.strip img { height: clamp(26px, 6vw, 38px); width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}