/* ==========================================================================
   NOURAN: main stylesheet
   --------------------------------------------------------------------------
   Contents
     1. Fonts (self-hosted, SIL Open Font License; see /assets/fonts)
     2. Design tokens (colours, type, spacing). Re-skin the site here.
     3. Base & reset
     4. Utilities & shared components (container, buttons, eyebrow, reveal)
     5. Hero
     6. Video
     7. Music player
     8. Biography
     9. Newsletter
    10. Footer
    11. Motion (only when the visitor has not asked for reduced motion)
    12. Large screens
   Mobile-first: base styles target small screens; min-width queries add up.
   ========================================================================== */


/* 1. Fonts ================================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* 2. Design tokens ======================================================== */

:root {
  /* Palette: Sandstone, from the album cover. A cream and sand page with
     dark brown text; terracotta buttons, ochre details, patina turquoise
     symbols. --c-night is the page colour, so overlays and button text are
     cream. Adjust these to re-skin the site; everything follows. */
  --c-night:    #F3E4CC;   /* page base: cream sandstone */
  --c-indigo:   #EAD5B5;   /* surfaces (cards) */
  --c-midnight: #2F5A56;   /* deep patina teal: the Golden drop's water */
  --c-deep:     #E2C59C;   /* middle of the page gradient: warmer sand */
  --c-amber:    #A55F2E;   /* terracotta: buttons, glows */
  --c-gold:     #7E5D35;   /* ochre: lines, labels, links */
  --c-rose:     #A8462F;   /* error text */
  --c-text:     #2B2119;   /* dark brown body text (≈13:1 on the page) */
  --c-muted:    #5E4E3E;   /* secondary text (≈7:1) */
  --c-accent:   #3F7470;   /* patina turquoise: the rosette symbols (heading icons, footer) */

  /* Translucent helpers, mixed from the palette above (so they follow it) */
  --c-line:       color-mix(in srgb, var(--c-gold) 22%, transparent);
  --c-line-soft:  color-mix(in srgb, var(--c-gold) 10%, transparent);
  --c-glass:      color-mix(in srgb, var(--c-indigo) 55%, transparent);
  --glow-amber:   color-mix(in srgb, var(--c-amber) 45%, transparent);

  /* Typography */
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-lead:    clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h2:      clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-mark:    clamp(2.75rem, 0.5rem + 10vw, 9.5rem);

  --ls-wide:    0.24em;    /* wordmark letter spacing (widens at 768px+) */
  --ls-eyebrow: 0.28em;

  /* Spacing & shape */
  --gutter:     clamp(1rem, 4vw, 2.5rem);
  --section-y:  clamp(5rem, 3rem + 9vw, 10rem);
  --radius:     1.25rem;
  --radius-pill: 999px;

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 400ms;
  --dur-reveal: 1100ms;
}

@media (min-width: 768px) {
  :root { --ls-wide: 0.32em; }
}

/* The hero sits on the dark teal water, so it keeps light text and dark overlays */
.hero {
  --c-night: #142624;
  --c-text:  #FBF2E4;
  --c-muted: #E6D6C0;
  --c-gold:  #E8C99A;
  --c-amber: #E3A36A;
}


/* 3. Base & reset ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-text);
  background-color: var(--c-night);
  /* The night-to-dawn journey down the page */
  background-image: linear-gradient(
    180deg,
    var(--c-night) 0%,
    var(--c-indigo) 28%,
    var(--c-deep) 52%,
    var(--c-indigo) 74%,
    var(--c-night) 100%
  );
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Fine film-grain overlay across the whole page (static, very light) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url("../assets/textures/grain.png");
  background-size: 128px 128px;
  opacity: 0.05;
}

img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.1;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--c-gold); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-amber); }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--c-amber); color: var(--c-night); }

/* Visible, consistent focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

section[id], header[id] { scroll-margin-top: 1rem; }


/* 4. Utilities & shared components ======================================= */

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-amber);
  color: var(--c-night);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--c-night); }

.container {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), 46rem); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__title {
  font-size: var(--fs-h2);
  letter-spacing: 0.02em;
}

/* Small uppercase label with the rosette symbol above each heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}
.eyebrow::before {                /* the album cover's rosette (assets/images/rosette-icon.svg) */
  content: "";
  width: 1.35em; height: 1.35em;
  background: var(--c-accent);
  -webkit-mask: url("../assets/images/rosette-icon.svg") center / contain no-repeat;
  mask: url("../assets/images/rosette-icon.svg") center / contain no-repeat;
}

.lead {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-text);
}

.icon {
  width: 1.15em; height: 1.15em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--c-gold);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--dur-hover) var(--ease-soft),
    box-shadow var(--dur-hover) var(--ease-soft),
    color var(--dur-hover) var(--ease-soft),
    border-color var(--dur-hover) var(--ease-soft);
}
.btn .icon { width: 0.95em; height: 0.95em; }
.btn:hover { color: var(--c-night); background: var(--c-gold); }

/* Ghost button with a soft halo */
.btn--glow {
  background: color-mix(in srgb, var(--c-night) 35%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 0 var(--glow-amber), inset 0 0 18px color-mix(in srgb, var(--c-gold) 12%, transparent);
}
.btn--glow:hover {
  color: var(--c-night);
  background: var(--c-amber);
  border-color: var(--c-amber);
  box-shadow: 0 0 40px 4px var(--glow-amber);
}

/* Solid amber button (newsletter) */
.btn--solid {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: var(--c-night);
}
.btn--solid:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  box-shadow: 0 0 36px 2px var(--glow-amber);
}
.btn[disabled] { opacity: 0.6; cursor: progress; }

.embed-note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-align: center;
}

/* Mist behind the whole page (sections without their own background let it
   show through): soft clouds of the palette's colours, drifting very slowly
   (section 11) */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(35% 28% at 22% 30%, color-mix(in srgb, var(--c-amber) 22%, transparent), transparent 100%),
    radial-gradient(30% 26% at 80% 55%, color-mix(in srgb, var(--c-rose) 16%, transparent), transparent 100%),
    radial-gradient(45% 30% at 40% 85%, color-mix(in srgb, var(--c-midnight) 90%, transparent), transparent 100%);
  opacity: 0.6;
}

/* Scroll reveal: hidden state applies only when JS runs AND motion is OK.
   main.js adds .is-visible as elements enter the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity var(--dur-reveal) var(--ease-soft),
      transform var(--dur-reveal) var(--ease-soft);
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}


/* 5. Hero ================================================================= */

.hero {
  --halo-size: min(86vmin, 44rem);   /* shared by the ring (.halo) and the mandala (.sigil) */
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;            /* avoids jumpy mobile browser bars */
  padding: 6rem var(--gutter) 7rem;
  overflow: hidden;
  text-align: center;
  color: var(--c-text);
}

.hero__media {
  position: absolute;
  inset: -6% 0 -6% 0;            /* extra height gives room for parallax */
  z-index: -3;
  /* Fade the artwork out above its horizon line (about 70% down the image),
     so the sky melts into the page gradient without a visible edge */
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}

/* Darkens edges and fades the artwork into the page below */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, transparent 0%, color-mix(in srgb, var(--c-night) 55%, transparent) 70%, color-mix(in srgb, var(--c-night) 90%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-night) 35%, transparent) 0%, transparent 30%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* The glowing ring motif ----------------------------------------------- */
.halo {
  position: absolute;
  left: 50%; top: 48%;
  width: var(--halo-size);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  pointer-events: none;
}
.halo > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.halo__core {
  inset: 22% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-amber) 42%, transparent) 0%, color-mix(in srgb, var(--c-amber) 14%, transparent) 45%, transparent 70%);
  filter: blur(8px);
}
/* The main ring: a bold gold outline with a warm glow */
.halo__ring {
  inset: 14% !important;
  border: 3px solid color-mix(in srgb, var(--c-gold) 85%, transparent);
  box-shadow:
    0 0 36px color-mix(in srgb, var(--c-amber) 35%, transparent),
    inset 0 0 36px color-mix(in srgb, var(--c-amber) 22%, transparent);
}
/* Ripples: with motion they travel out well beyond the ring (section 11);
   without motion they rest as wide concentric circles */
.halo__ripple {
  border: 2px solid color-mix(in srgb, var(--c-gold) 60%, transparent);
  opacity: 0.5;
  scale: 0.95;
}
.halo__ripple--2 { scale: 1.25; opacity: 0.32; }
.halo__ripple--3 { scale: 1.55; opacity: 0.18; }

/* Opening-sequence elements: hidden unless the intro is playing (section 11) */
.halo__spark {                    /* the first point of golden light */
  inset: 50% auto auto 50% !important;   /* top-left at the centre… */
  width: 10px; height: 10px;
  translate: -50% -50%;                  /* …then centred on it */
  background: radial-gradient(circle, #FFF6DC 0 35%, var(--c-amber) 75%);
  box-shadow:
    0 0 16px 5px color-mix(in srgb, var(--c-amber) 80%, transparent),
    0 0 70px 24px color-mix(in srgb, var(--c-amber) 35%, transparent);
  opacity: 0;
}
.halo__wave {                     /* vibrations spreading out from the light */
  border: 2px solid color-mix(in srgb, var(--c-gold) 70%, transparent);
  opacity: 0;
}
.hero::before {                   /* the darkness the light emerges from */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background: #020106;
  opacity: 0;
  pointer-events: none;
}

/* The Golden drop (js/pond.js): a dark pond in perspective; a clear drop
   falls in and its rings reach the edges, then an endless loop of rings
   flows out from where the glowing ring sits. While it runs (.has-pond) it
   replaces the artwork and the CSS halo; without WebGL2 they stay, and the
   spark-of-light opening plays instead. */
.pond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* melts into the light page below like a shoreline, fading across the
     whole first screen. Eased (an S-curve) rather than straight: against the
     light page a straight fade leaves a visible line where it ends */
  --shore: linear-gradient(180deg,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.991) 10%,
    rgb(0 0 0 / 0.942) 20%,
    rgb(0 0 0 / 0.837) 30%,
    rgb(0 0 0 / 0.683) 40%,
    rgb(0 0 0 / 0.5) 50%,
    rgb(0 0 0 / 0.317) 60%,
    rgb(0 0 0 / 0.163) 70%,
    rgb(0 0 0 / 0.058) 80%,
    rgb(0 0 0 / 0.009) 90%,
    rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: var(--shore);
  mask-image: var(--shore);
}
.has-pond :is(.hero__media, .hero__veil) { display: none; }
/* the CSS halo is hidden but kept in place: js/pond.js measures it (the water
   rings flow out from where its ring sits) and follows its clock */
.has-pond .halo { visibility: hidden; }
/* with ring: true in js/pond.js (.pond-ring): only the ring, tilted to float over the water */
.has-pond.pond-ring .halo { visibility: visible; scale: 1 0.73; }
.has-pond.pond-ring .halo > :not(.halo__ring) { visibility: hidden; }

/* Large mandala centred on the ring. Hidden at rest: js/hero-motion.js shows
   it only during the first-visit opening sequence, drawing it in the
   darkness and fading it away before the title arrives. */
.sigil {
  position: absolute;
  left: 50%; top: 48%;
  width: var(--halo-size);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  overflow: visible;
  color: var(--c-gold);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sigil__art { stroke-width: 0.22; }  /* in mandala units: about 1.5px at full size */
/* On the 404 page the rosette stays, drawn around the ring (it draws itself
   on load, section 11) */
.sigil--drawn { opacity: 0.7; visibility: visible; }
.sigil--drawn .sigil__art { stroke-width: 0.3; }

.hero__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.wordmark {
  font-size: var(--fs-mark);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  /* Letter-spacing adds space after the last letter; this re-centres it */
  padding-inline-start: var(--ls-wide);
  /* pure white with a soft shadow of the deep water behind it, so it stands
     clear of the bright water (js/hero-motion.js matches this shadow) */
  color: #FFFFFF;
  text-shadow: 0 0 32px rgb(14 34 32 / 0.55);
}

.hero__tagline {
  max-width: 30ch;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--c-text);
  opacity: 0.9;
}

.hero .btn { margin-top: 0.5rem; }

/* Thin animated line inviting the scroll */
.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: 2.75rem;
  height: 3.5rem;
}
.scroll-cue span {
  position: absolute;
  left: 50%; top: 0.25rem;
  width: 1px; height: 3rem;
  background: linear-gradient(var(--c-gold), transparent);
  opacity: 0.7;
}


/* 6. Video ================================================================ */

.video-frame {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-night);
  box-shadow:
    0 0 0 1px var(--c-line),
    0 30px 80px -30px rgb(0 0 0 / 0.8),
    0 0 120px -20px color-mix(in srgb, var(--c-amber) 22%, transparent);
}

.video-facade,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
}
.video-facade picture,
.video-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-facade img { transition: scale 1.6s var(--ease-soft), filter 1.6s var(--ease-soft); filter: brightness(0.85); }
.video-facade:hover img { scale: 1.03; filter: brightness(1); }
.video-facade:focus-visible { outline-offset: -6px; border-radius: var(--radius); }

/* Round play button with a ring halo */
.play-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 10vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  background: color-mix(in srgb, var(--c-night) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-text);
  transition: background-color var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft);
}
.play-btn::before,
.play-btn::after {
  content: "";
  position: absolute;
  inset: -0.6rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
  transition: inset 700ms var(--ease-soft), opacity 700ms var(--ease-soft);
}
.play-btn::after { inset: -1.3rem; opacity: 0.4; }
.play-btn .icon { width: 34%; height: 34%; translate: 6% 0; }

.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn {
  background: var(--c-amber);
  color: var(--c-night);
  box-shadow: 0 0 50px 6px var(--glow-amber);
}
.video-facade:hover .play-btn::before { inset: -0.9rem; }
.video-facade:hover .play-btn::after  { inset: -1.9rem; opacity: 0.7; }

.video-frame noscript .btn {
  position: absolute;
  left: 50%; bottom: 1.25rem;
  translate: -50% 0;
}


/* 7. Music player ========================================================= */

.section--listen { isolation: isolate; }

.player-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: calc(var(--radius) + 0.5rem);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px -40px rgb(70 45 20 / 0.45);   /* a soft warm shadow on the light page */
}

.player-card__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* A spinning record: the album artwork's star in a circle, with a glowing centre */
.player-card__disc {
  position: relative;
  width: 7.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--c-line), 0 0 60px -10px var(--glow-amber);
}
.player-card__disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.player-card__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-amber) 0 9%, var(--c-night) 9.5% 11%, transparent 11.5%);
}

.player-card__title {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1.2;
}
.player-card__artist {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}

.player-card iframe {
  width: 100%;
  border: 0;
  border-radius: 12px;
}

@media (min-width: 600px) {
  .player-card__inner {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
    gap: 1.75rem;
  }
}


/* 8. Biography ============================================================ */

/* A short centred intro, like the other sections */
.about { text-align: center; }
.about .section__title { margin-bottom: 1.75rem; }
.about p + p { margin-top: 1.1rem; }
.about p:not(.lead):not(.eyebrow) { color: var(--c-muted); }


/* 9. Newsletter =========================================================== */

/* Dawn: at the end of the night-to-dawn journey, the album artwork rises
   behind the newsletter and footer. Anchored to the bottom of the page and
   faded in from the top, so it doesn't matter exactly where the newsletter
   starts. A night veil keeps the text readable. */
body { position: relative; }
.dawn {
  --veil: color-mix(in srgb, var(--c-night) 50%, transparent);
  --shade: radial-gradient(ellipse 34rem 70% at 50% 42%, color-mix(in srgb, var(--c-night) 55%, transparent), transparent 100%);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(950px, 120vh, 1300px);
  z-index: -1;
  pointer-events: none;
  background-color: var(--c-night);
  background-image: var(--shade), linear-gradient(var(--veil), var(--veil)), url("../assets/images/album-wide-1600.jpg");
  background-image: var(--shade), linear-gradient(var(--veil), var(--veil)),
    image-set(url("../assets/images/album-wide-1600.webp") type("image/webp"), url("../assets/images/album-wide-1600.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 30%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 30%, #000 55%);
}
/* phones and other tall screens: the portrait version of the artwork */
@media (max-aspect-ratio: 4/5) {
  .dawn {
    background-image: var(--shade), linear-gradient(var(--veil), var(--veil)), url("../assets/images/album-tall-900.jpg");
    background-image: var(--shade), linear-gradient(var(--veil), var(--veil)),
      image-set(url("../assets/images/album-tall-900.webp") type("image/webp"), url("../assets/images/album-tall-900.jpg") type("image/jpeg"));
    /* a shorter fade, so the rosette in the middle of the artwork comes through */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.6) 16%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.6) 16%, #000 34%);
  }
}

/* A soft dawn glow behind the form, fading out before the section edges */
.section--signup {
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.section--signup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 38% at 50% 62%, color-mix(in srgb, var(--c-amber) 20%, transparent), color-mix(in srgb, var(--c-rose) 5%, transparent) 55%, transparent 100%);
}

.signup-intro {
  max-width: 34rem;
  margin: 1.25rem auto 2.5rem;
  color: var(--c-muted);
}

.signup {
  display: grid;
  gap: 1.25rem;
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}

.signup__label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-text);
  margin-bottom: -0.6rem;
}

.signup__row {
  display: grid;
  gap: 0.75rem;
}

.signup__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--c-text) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-night) 60%, transparent);
  color: var(--c-text);
  transition: border-color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft);
}
.signup__input::placeholder { color: color-mix(in srgb, var(--c-muted) 70%, transparent); }
.signup__input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 25%, transparent); }
.signup__input[aria-invalid="true"] { border-color: var(--c-rose); }

.signup__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-muted);
}
.signup__consent input {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--c-amber);
}
.signup__consent input[aria-invalid="true"] { outline: 2px solid var(--c-rose); outline-offset: 2px; }

.signup__status {
  min-height: 1.6em;
  font-size: var(--fs-small);
  font-weight: 500;
}
.signup__status[data-state="error"]   { color: var(--c-rose); }
.signup__status[data-state="pending"] { color: var(--c-muted); }

/* Shown in place of the form: just the words, no panel */
.signup__success {
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
  margin-inline: auto;
}
.signup[hidden],
.signup__success[hidden] { display: none; }
.signup__success:focus { outline: none; }
.signup__success-title {
  font-family: var(--f-display);
  font-size: 1.9rem;
  line-height: 1.2;
}
.signup__success p:last-child { color: var(--c-muted); }

@media (min-width: 480px) {
  .signup__row { grid-template-columns: 1fr auto; }
}


/* 10. Footer ============================================================== */

.footer {
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.footer__inner {
  display: grid;
  justify-items: center;
  gap: 2rem;
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--c-text);
  text-decoration: none;
}
.footer__ring {                   /* the album cover's rosette */
  width: 1.9rem; aspect-ratio: 1;
  background: var(--c-accent);
  -webkit-mask: url("../assets/images/rosette-icon.svg") center / contain no-repeat;
  mask: url("../assets/images/rosette-icon.svg") center / contain no-repeat;
}
.footer__word {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: var(--ls-wide);
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
}
.social a {
  display: grid;
  place-items: center;
  width: 2.9rem;             /* ≥ 44px touch target */
  aspect-ratio: 1;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-text);
  transition: color var(--dur-hover) var(--ease-soft), border-color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft), background-color var(--dur-hover) var(--ease-soft);
}
.social a:hover {
  color: var(--c-night);
  background: var(--c-gold);
  border-color: var(--c-gold);
  box-shadow: 0 0 28px var(--glow-amber);
}
.social .icon { width: 1.1rem; height: 1.1rem; }

.footer__legal a { color: var(--c-muted); }
.footer__legal a:hover { color: var(--c-gold); }

/* Privacy policy page (privacy.html): plain reading text */
.legal__back {
  display: block;
  width: fit-content;
  margin-bottom: 3rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-decoration: none;
}
.legal__back:hover { color: var(--c-gold); }
.legal .section__title { margin-bottom: 0.75rem; }
.legal__updated { color: var(--c-muted); font-size: var(--fs-small); margin-bottom: 3rem; }
.legal h2 {
  margin: 2.75rem 0 0.9rem;
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  color: var(--c-gold);
}
.legal p, .legal li { color: var(--c-muted); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.5rem; }
.legal strong { color: var(--c-text); font-weight: 600; }


/* 11. Motion ============================================================== */
/* Everything that moves lives here, so prefers-reduced-motion switches it
   all off by default (motion is opt-in, not opt-out). */

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

  /* Slow "breathing" of the sun core and main ring */
  .halo__core { animation: breathe 8s ease-in-out infinite; }
  .halo__ring { animation: breathe-ring 8s ease-in-out infinite; }

  /* Ripples expanding outward like sound from a tone field */
  .halo__ripple    { animation: ripple 15s linear infinite; }
  .halo__ripple--2 { animation-delay: -5s; }
  .halo__ripple--3 { animation-delay: -10s; }

  /* Wordmark and tagline arrive gently on load (when arriving on a #section
     link; otherwise the opening sequence below plays instead) */
  .hero__content > * { animation: rise 1.6s var(--ease-soft) both; }
  .hero__content > :nth-child(2) { animation-delay: 0.25s; }
  .hero__content > :nth-child(3) { animation-delay: 0.5s; }

  /* Opening sequence ---------------------------------------------------
     Plays on every load, except when arriving on a #section link (html then
     gets .intro-seen; see the first <script> in index.html). Timeline in seconds:
       0.0  darkness
       0.6  a spark of golden light appears at the centre
       1.2  the spark blooms into the glow; 2.0 / 2.7 / 3.4 waves spread out
       2.0  the main ring expands out of the light
       3.0  the darkness lifts, the artwork fades in
       3.4  NOURAN comes into focus; 4.5 tagline; 5.1 button; 5.8 scroll cue
     To shorten or lengthen it, scale the delays below together. */
  html:not(.intro-seen) .hero::before { animation: fade-out 3s ease-in-out 3s both; }
  html:not(.intro-seen) :is(.hero__media, .hero__veil) {
    animation: fade-in 3s ease-in-out 3s backwards;
  }
  /* The wordmark animation here is a fallback: js/hero-motion.js (GSAP)
     replaces it with the letter-by-letter NOURAN, and adds the mandala
     drawing itself. */

  html:not(.intro-seen) .halo__spark { animation: spark 3s ease-out 0.6s both; }
  html:not(.intro-seen) .halo__core {
    animation: glow-in 2.4s var(--ease-soft) 1.2s both, breathe 8s ease-in-out 3.6s infinite;
  }
  html:not(.intro-seen) .halo__ring {
    animation: ring-in 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 2s both, breathe-ring 8s ease-in-out 4.4s infinite;
  }
  html:not(.intro-seen) .halo__wave    { animation: wave 4.5s cubic-bezier(0.2, 0.6, 0.35, 1) 2s backwards; }
  html:not(.intro-seen) .halo__wave--2 { animation-delay: 2.7s; }
  html:not(.intro-seen) .halo__wave--3 { animation-delay: 3.4s; }
  /* the regular ripples take over once the waves have passed, evenly spaced */
  html:not(.intro-seen) .halo__ripple    { animation: ripple 15s linear 4.4s infinite backwards; }
  html:not(.intro-seen) .halo__ripple--2 { animation-delay: 9.4s; }
  html:not(.intro-seen) .halo__ripple--3 { animation-delay: 14.4s; }

  html:not(.intro-seen) .wordmark     { animation: title-in 2.4s var(--ease-soft) 3.4s both; }
  html:not(.intro-seen) .hero__tagline { animation: rise 1.6s var(--ease-soft) 4.5s both; }
  html:not(.intro-seen) .hero .btn    { animation: rise 1.6s var(--ease-soft) 5.1s both; }
  html:not(.intro-seen) .scroll-cue   { animation: fade-in 1.5s ease 5.8s backwards; }
  /* a keyboard user tabbing in early sees the button straight away */
  html:not(.intro-seen) .hero .btn:focus-visible { animation: none; }

  .scroll-cue span { animation: cue 3.2s var(--ease-soft) infinite; transform-origin: top; }

  /* 404 page: the rosette draws itself in the darkness, the central star,
     then the twelve petals, the points between them and the double circle */
  .sigil--drawn :is(.sigil__seed, .sigil__petal, .sigil__star, .sigil__ring) {
    stroke-dasharray: 1;              /* each part has pathLength="1" */
    animation: draw 1.2s var(--ease-soft) 0.3s both;
  }
  .sigil--drawn .sigil__petal { animation-delay: calc(0.9s + var(--i) * 0.1s); }
  .sigil--drawn .sigil__star  { animation-delay: calc(2s + var(--i) * 0.06s); }
  .sigil--drawn .sigil__ring  { animation: draw 1.6s ease-in-out calc(2.6s + var(--i) * 0.2s) both; }


  /* The mist behind the page drifts very slowly */
  body::before { animation: mist 40s ease-in-out infinite alternate; }


  .player-card__disc { animation: spin 40s linear infinite; }

  [data-parallax] { will-change: transform; }
}

@keyframes breathe {
  0%, 100% { scale: 0.92; opacity: 0.75; }
  50%      { scale: 1.06; opacity: 1; }
}
@keyframes breathe-ring {
  0%, 100% { scale: 0.985; opacity: 0.7; }
  50%      { scale: 1.015; opacity: 1; }
}
@keyframes ripple {
  0%   { scale: 0.72; opacity: 0; }    /* starts at the main ring */
  12%  { opacity: 0.8; }
  100% { scale: 2.2;  opacity: 0; }    /* fades out far beyond it */
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cue {
  0%   { scale: 1 0; opacity: 0; }
  30%  { opacity: 0.8; }
  60%  { scale: 1 1; }
  100% { scale: 1 1; opacity: 0; }
}

/* Opening sequence */
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes spark {
  0%   { opacity: 0; scale: 0.3; }
  25%  { opacity: 1; scale: 1; }
  45%  { opacity: 1; scale: 1.25; }
  100% { opacity: 0; scale: 4; }      /* dissolves into the glow */
}
@keyframes glow-in {
  from { scale: 0.05; opacity: 0; }
  to   { scale: 0.92; opacity: 0.75; }   /* = start of "breathe" */
}
@keyframes ring-in {
  0%   { scale: 0.1;   opacity: 0; }
  40%  { opacity: 1; }
  100% { scale: 0.985; opacity: 0.7; }   /* = start of "breathe-ring" */
}
@keyframes wave {
  0%   { scale: 0.12; opacity: 0; }
  15%  { opacity: 0.9; }
  100% { scale: 2.2;  opacity: 0; }
}
@keyframes title-in {
  from { opacity: 0; filter: blur(14px); scale: 0.97; }
  to   { opacity: 1; filter: blur(0);    scale: 1; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mist { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }


/* 12. Large screens ======================================================= */

@media (min-width: 1920px) {
  :root { --gutter: 4rem; }
  html { font-size: 112.5%; }      /* scales every rem-based size up a touch */
  .container { width: min(100% - 2 * var(--gutter), 80rem); }
}