/* AtoZ Arizona splash page. Brand colours and type from the AtoZ design system. */
@font-face {
  font-family: Lexend;
  src: url('../fonts/lexend.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Archivo;
  src: url('../fonts/archivo.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --teal-dark: #02393d;
  --turquoise: #46c9c0;        /* link on the dark card: about 9.8:1 against the glass */
  --turquoise-hover: #3aaea6;  /* link hover: slightly darker, about 7.4:1 */
  --night: #02040c;
  --sand: #ffd9b0;             /* focus ring */
  --white: #fff;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--white); font: 400 18px/1.6 Archivo, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
html.js, html.js body { height: 100%; overflow: hidden; overscroll-behavior: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--sand); outline-offset: 4px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Backdrop ----------
   main.js sizes the world to cover the screen (--ww, --wh) and places it; everything in it is positioned on the photo. */
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); }
.backdrop { position: absolute; inset: 0; }
.world { position: absolute; left: 0; top: 0; width: var(--ww, 100vw); height: var(--wh, 67vw); }
.landscape { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.landscape, .dawn, .sun, .rays, .haze, .glints, .flare > span { opacity: 0; pointer-events: none; }

/* Warm glow along the horizon. */
.dawn {
  position: absolute; left: 0; top: calc(var(--wh) * -.9); width: 100%; height: calc(var(--wh) * 1.5);
  background:
    radial-gradient(90% 22% at 82% 80%, rgba(255, 150, 70, .42), rgba(255, 120, 55, .12) 45%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(255, 145, 75, .08) 40%, rgba(255, 160, 90, .2) 60%, rgba(255, 150, 80, .14) 78%, transparent 92%);
}
/* The sun, where it sits in the photo. */
.sun {
  position: absolute; left: 95.5%; top: 30%; width: calc(var(--wh) * 1.3); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 244, 220, .95), rgba(255, 214, 150, .55) 7%, rgba(255, 166, 88, .26) 22%, rgba(255, 128, 60, .1) 45%, transparent 72%);
}
/* Sun rays fanning across the valley: painted once by main.js; only their opacity breathes. */
.rays { position: absolute; left: 95.5%; top: 30%; width: calc(var(--wh) * 2.6); height: calc(var(--wh) * 2.6); translate: -50% -50%; }
/* Morning haze drifting over the valley. */
.haze { position: absolute; inset: 0; overflow: hidden; }
.haze span { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 228, 196, .18), rgba(255, 228, 196, .06) 55%, transparent); }
.haze span:nth-child(1) { left: 18%; top: 30%; width: 72%; height: 15%; }
.haze span:nth-child(2) { left: 42%; top: 43%; width: 56%; height: 11%; }
.haze span:nth-child(3) { left: -12%; top: 50%; width: 62%; height: 14%; }
/* Sun glints sparkling on the river; drawn by main.js. */
.glints { position: absolute; mix-blend-mode: screen; }

/* Lens flare, in screen space: main.js places each piece on the line from the sun through the screen's centre. */
.flare { position: absolute; inset: 0; overflow: hidden; }
.flare > span { position: absolute; left: 0; top: 0; border-radius: 50%; mix-blend-mode: screen; }
.flare-halo { width: 44vmin; aspect-ratio: 1; background: radial-gradient(closest-side, transparent 58%, rgba(255, 200, 150, .2) 68%, rgba(170, 220, 255, .12) 76%, transparent 86%); }
.flare-streak { width: 96vw; height: 22px; border-radius: 0 !important; background: radial-gradient(closest-side, rgba(255, 236, 212, .6), rgba(255, 196, 140, .18) 30%, transparent 80%); }
.flare-streak::after { content: ''; position: absolute; inset: 10.4px 0; background: linear-gradient(90deg, transparent 8%, rgba(255, 232, 206, .3) 32%, rgba(255, 248, 236, .7) 50%, rgba(255, 232, 206, .3) 68%, transparent 92%); }
.ghost.g1 { width: 5vmin; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 214, 160, .45), rgba(255, 214, 160, .15) 65%, transparent); }
.ghost.g2 { width: 1.8vmin; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 244, 226, .7), transparent); }
.ghost.g3 { width: 10vmin; aspect-ratio: 1; background: radial-gradient(closest-side, transparent 50%, rgba(120, 214, 226, .3) 72%, transparent 92%); }
.ghost.g4 { width: 4.4vmin; aspect-ratio: 1; border-radius: 0 !important; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: radial-gradient(closest-side, rgba(200, 160, 255, .4), rgba(200, 160, 255, .2)); }
.ghost.g5 { width: 17vmin; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 176, 96, .14), rgba(255, 176, 96, .1) 80%, rgba(255, 200, 150, .22) 92%, transparent); }
.ghost.g6 { width: 7vmin; aspect-ratio: 1; background: radial-gradient(closest-side, transparent 58%, rgba(255, 222, 180, .26) 80%, transparent); }

/* Shade for legibility: a soft patch behind the hero text (wider on phones) plus an overall vignette.
   Together they keep every line of text at WCAG AA contrast over the brightest parts of the photo. */
.scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(var(--hero-shade, 62% 36%) at 50% 40%, rgba(3, 10, 16, .56), rgba(3, 10, 16, .25) 60%, transparent 85%), radial-gradient(80% 62% at 50% 52%, rgba(3, 10, 16, .62), rgba(3, 10, 16, .3) 60%, rgba(3, 10, 16, .12)), linear-gradient(rgba(3, 10, 16, .3), transparent 22%, transparent 72%, rgba(3, 10, 16, .5)); }

/* ---------- Content ---------- */
/* No scrollbar ever (the text sliding in can overflow by a pixel, and a scrollbar flashing would shift the layout);
   very small screens can still scroll the content if it doesn't fit. */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; overflow-y: auto; scrollbar-width: none; padding: max(40px, env(safe-area-inset-top)) 24px 72px; text-align: center; }
.scene::-webkit-scrollbar { display: none; }
.scene-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.brand { width: clamp(170px, 17vw, 236px); height: auto; margin-bottom: clamp(22px, 3.8vh, 40px); filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .4)); }
h1 { font: 900 clamp(46px, 8.4vw, 122px)/1 Lexend, Arial, sans-serif; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 4px 40px rgba(0, 0, 0, .45); }
.tagline { margin-top: clamp(24px, 4.2vh, 42px); font: 700 clamp(19px, 1.9vw, 25px)/1.4 Archivo, Arial, sans-serif; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.introduction { max-width: 34em; margin-top: 10px; color: rgba(255, 255, 255, .92); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; text-wrap: pretty; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

/* DES card. With WebGL it becomes a pane of dark glass (main.js) that fades in over this tinted panel, which stays as the fallback. */
.des-card {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 28px; width: min(100%, 720px); margin-top: clamp(40px, 8vh, 76px); padding: 20px 20px 20px 28px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgba(5, 9, 14, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -24px rgba(0, 0, 0, .65);
}
.glass { position: absolute; inset: -1px; z-index: -1; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .9s ease-out; }
.des-card.is-glass .glass { opacity: 1; }
.des-text { flex: 1; }
h2 { margin-bottom: 4px; font: 600 18px/1.35 Lexend, Arial, sans-serif; letter-spacing: -.01em; }
.des-text p { color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.55; }
.text-link { color: var(--turquoise); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease-out; }
.text-link:hover { color: var(--turquoise-hover); text-decoration: none; }
/* Outline by default; fills solid on hover, and on keyboard focus so the cue is the same. */
.button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 22px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 8px; background: transparent; color: var(--white); font-size: 16px; font-weight: 650; line-height: 1.4; text-decoration: none; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.button span { font-size: 18px; line-height: 1; transition: transform .35s var(--ease-out); }
.button:hover, .button:focus-visible { border-color: var(--white); background: var(--white); color: var(--teal-dark); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7); }
.button:hover span, .button:focus-visible span { transform: translateX(4px); }

.site-footer { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 10px; color: rgba(255, 255, 255, .82); font-size: 13px; letter-spacing: .04em; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scene-inner > *, .site-footer { animation: arrive 1.5s var(--ease-out) both; }
  .scene-inner > :nth-child(2) { animation-delay: .12s; }
  .scene-inner > :nth-child(3) { animation-delay: .28s; }
  .scene-inner > :nth-child(4) { animation-delay: .38s; }
  .scene-inner > :nth-child(5) { animation-delay: .52s; }
  .site-footer { animation-delay: .7s; }
  .haze span { will-change: transform; }
  .haze span:nth-child(1) { animation: drift 34s ease-in-out infinite alternate; }
  .haze span:nth-child(2) { animation: drift 41s ease-in-out -12s infinite alternate-reverse; }
  .haze span:nth-child(3) { animation: drift 47s ease-in-out -20s infinite alternate; }

  @keyframes arrive { from { opacity: 0; transform: translateY(22px); } }
  @keyframes drift { from { transform: translateX(-7%); } to { transform: translateX(8%); } }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 720px) {
  .des-card { flex-direction: column; gap: 16px; padding: 22px 20px 20px; text-align: center; }
  .des-card .button { width: 100%; }
}

@media (max-width: 480px) {
  .scrim { --hero-shade: 110% 40%; }
  .scene { padding-inline: 18px; }
  h1 { font-size: clamp(40px, 12.4vw, 60px); }
  .tagline { font-size: 19px; }
  .introduction { font-size: 15.5px; }
  .des-text p { font-size: 14.5px; }
}

@media (max-height: 700px) and (min-width: 721px) {
  .brand { margin-bottom: 18px; }
  h1 { font-size: clamp(40px, 13vh, 96px); }
  .des-card { margin-top: 32px; }
}

/* Short screens (small phones, phones held sideways): tighten everything and let the footer follow the content. */
@media (max-width: 480px) and (max-height: 740px) {
  .scene { padding-block: 28px 20px; }
  .brand { width: 150px; margin-bottom: 16px; }
  h1 { font-size: clamp(36px, 11vw, 48px); }
  .tagline { margin-top: 20px; font-size: 17px; }
  .introduction { font-size: 14.5px; line-height: 1.55; }
  .des-card { margin-top: 28px; padding: 18px 16px 16px; gap: 12px; }
  .des-text p { font-size: 13.5px; }
  .button { min-height: 46px; }
  .site-footer { position: static; margin-top: 18px; font-size: 12px; }
}

@media (max-height: 560px) {
  .scene { padding-block: 16px; }
  .brand { width: 132px; margin-bottom: 10px; }
  h1 { font-size: clamp(32px, 12vh, 56px); }
  .tagline { margin-top: 14px; font-size: 16px; }
  .introduction { max-width: 42em; margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
  .des-card { margin-top: 18px; padding: 12px 12px 12px 18px; gap: 16px; border-radius: 16px; }
  h2 { font-size: 15px; }
  .des-text p { font-size: 12.5px; line-height: 1.45; }
  .button { min-height: 42px; padding: 9px 16px; font-size: 14px; }
  .site-footer { position: static; margin-top: 12px; font-size: 11px; }
}

/* ---------- Without JavaScript: the photo, still, behind the same content ---------- */
html:not(.js) .stage { position: relative; min-height: 100vh; }
html:not(.js) .backdrop { position: fixed; }
html:not(.js) .world { width: 100%; height: 100%; }
html:not(.js) .landscape { opacity: 1; object-fit: cover; object-position: 64% 50%; }
html:not(.js) .world > :not(.landscape), html:not(.js) .flare { display: none; }
html:not(.js) .scene { position: relative; min-height: 100vh; }

@media (forced-colors: active) {
  .backdrop, .glass { display: none; }
  .des-card, .button { border: 1px solid CanvasText; }
}