/* Fonts, reset, type, section surfaces, textures, utilities, motion. */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* Archivo extended Latin, for the rupee sign. Only fetched on pages that use these characters.
   DM Sans has no rupee glyph, so in body text the sign comes from the system font. */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}
h1, h2, h3, p, ul, ol { margin: 0; }
:where(ul, ol)[role='list'] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
main { display: block; }

h1, h2, h3, .disp { font-family: var(--font-display); font-weight: var(--fw-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }

/* Icons come from the inline sprite in index.html */
.i { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: var(--s-2); z-index: 30; padding: var(--s-3) var(--s-4); border-radius: var(--r-block); background: var(--gold-500); color: var(--navy-900); font-weight: var(--fw-bold); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Focus: navy ring on light and gold surfaces, gold ring on navy */
:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.sec--navy :focus-visible, .nav :focus-visible, .regbar :focus-visible, .panel :focus-visible, .tile--navy :focus-visible { outline-color: var(--focus-ring); }

/* Sections are flat colour blocks */
.sec { position: relative; padding: var(--section-y) var(--gutter); overflow: hidden; }
.wrap { position: relative; z-index: 1; max-width: var(--max-width); margin-inline: auto; width: 100%; }
.sec--light { background: var(--surface-light); color: var(--ink-900); }
.sec--white { background: var(--surface-white); color: var(--ink-900); }
.sec--gold { background: var(--gold-500); color: var(--navy-900); }
.sec--navy {
  background-color: var(--navy-900);
  color: var(--surface-white);
  background-image:
    linear-gradient(var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-minor) 1px, transparent 1px),
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
  background-size: var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor), var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major);
}
/* Grain on navy */
.sec--navy::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: var(--grain-opacity); pointer-events: none; }

/* The logo circle, reused as a faint background shape */
.ring { position: absolute; border-radius: var(--r-circle); pointer-events: none; }

/* Section heading with its short rule */
.shead { display: flex; flex-direction: column; gap: var(--s-4); }
.rule { display: block; width: 48px; height: 7px; background: var(--gold-500); transform-origin: left center; }
.sec--gold .rule { background: var(--navy-900); }
.ink { color: var(--ink-600); }

@media (min-width: 48em) {
  .shead { gap: var(--s-5); }
  .rule { width: 64px; height: 8px; }
}

/* Motion: one curve, transform and opacity only, everything plays once except the ticker */
@keyframes enter { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Stage light switching on: three uneven flashes (two per second), never below 20% of the
   final brightness, ending on the element's own resting opacity. */
@keyframes lights-on {
  0% { opacity: calc(var(--light-on) * .2); }
  10% { opacity: var(--light-on); }
  22% { opacity: calc(var(--light-on) * .2); }
  45% { opacity: calc(var(--light-on) * .9); }
  60% { opacity: calc(var(--light-on) * .25); }
  85%, 100% { opacity: var(--light-on); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero [data-enter], .phead [data-enter] { animation: enter var(--dur-slow) var(--ease) both; }
  .phead__title { animation-delay: 120ms; }
  .phead__intro { animation-delay: 240ms; }
  .hero [data-enter='pop'] { animation-name: pop; animation-delay: 200ms; }
  .hero__line:nth-child(2) { animation-delay: 120ms; }
  .hero__line:nth-child(3) { animation-delay: 240ms; }
  .hero__eyebrow { animation-delay: 300ms; }
  .hero__sub { animation-delay: 370ms; }
  .hero__actions { animation-delay: 440ms; }
  .hero__ticket { animation-delay: 510ms; }
  /* Runs once (iteration count 1). "both" keeps the end state (forwards) and holds the dim
     first frame during the delay, so the light does not show at full before it flickers. */
  .hero__spot, .hero__pool { animation: lights-on var(--flicker-dur) linear var(--flicker-delay) 1 both; }

  /* Scroll reveal. The .motion class is set by main.js, so content is never hidden without it. */
  .motion [data-reveal] { opacity: 0; transform: translateY(var(--rise)); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); }
  .motion [data-reveal] .rule { transform: scaleX(0); }
  .motion [data-reveal].is-in .rule { transform: none; transition: transform var(--dur) var(--ease); transition-delay: calc(var(--d, 0ms) + 150ms); }
  .motion [data-draw='x'] { transform: scaleX(0); }
  .motion [data-draw='y'] { transform: scaleY(0); }
}

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