/* ============================================================
   SENSI — The Internet of Fragrance
   style.css  ·  mobile-first  ·  built for Hostinger
   ------------------------------------------------------------
   TABLE OF CONTENTS
   1.  Design tokens (colors, type, spacing)
   2.  Reset & base
   3.  Utilities (wrap, eyebrow, reveal, dots)
   4.  Cursor aura + scroll spine
   5.  01 Hero
   6.  02 Missing sense
   7.  03 Internet of Fragrance (network)
   8.  04 Digital → Physical
   9.  05 Aurora
   10. 06 Momentum
   11. 07 Italy × Dubai
   12. 08 What's next (status board)
   13. 09 Connect
   14. Footer
   15. Responsive (tablet / desktop)
   16. Reduced motion
   ============================================================ */

/* ============ 1. DESIGN TOKENS ============ */
:root {
  /* Surfaces — black / graphite / titanium */
  --black:      #050507;
  --graphite:   #0d0d12;
  --titanium:   #16161d;
  --line:       rgba(201, 204, 214, 0.10);

  /* Metals / text */
  --silver:     #c9ccd6;
  --white:      #f4f5f8;
  --muted:      #7c7f8c;

  /* Luminous accents — violet LED → electric blue → cyan (used sparingly) */
  --violet:     #8b5cff;
  --blue:       #2e6bff;
  --cyan:       #35e0d0;
  --accent-grad: linear-gradient(120deg, var(--violet), var(--blue));

  /* Type */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-mono:    "Montserrat", system-ui, sans-serif;

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(5rem, 16vw, 11rem);
  --maxw: 1200px;
}

/* ============ 2. RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;               /* no horizontal scroll on mobile */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--violet); color: #fff; }

/* Focus visibility (accessibility floor) */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--white); color: #000;
  padding: .6rem 1rem; font-family: var(--font-mono); font-size: .8rem;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ============ 2b. INTRO GATE ============ */
/* Full-screen entry overlay. The button click is a genuine gesture, so it
   reliably unlocks Web Audio (tick + jet sounds) — which the browser blocks
   on scroll alone. */
.intro {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--pad);
  background: var(--black);
  opacity: 1; visibility: visible;
  transition: opacity .7s ease, visibility 0s linear .0s;
}
.intro.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.intro__ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%,  rgba(46,107,255,.18), transparent 55%),
    radial-gradient(90% 70% at 80% 90%,  rgba(139,92,255,.22), transparent 55%),
    radial-gradient(80% 60% at 15% 80%,  rgba(53,224,208,.08), transparent 55%),
    var(--black);
  animation: drift 18s ease-in-out infinite alternate;
}
.intro__inner { position: relative; z-index: 1; max-width: min(92vw, 40rem); }
.intro__logo {
  display: block; width: auto; height: clamp(58px, 8vw, 92px);
  margin: 0 auto clamp(1.2rem, 4vw, 2rem);
}
.intro__tag {
  font-family: "Techovier", var(--font-display);
  font-size: clamp(.95rem, 3.4vw, 1.4rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--white);
}
.intro__hint {
  margin-top: clamp(1.4rem, 5vw, 2rem);
  font-family: var(--font-mono); font-size: clamp(.72rem, 2.6vw, .86rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.intro__actions {
  margin-top: clamp(1.6rem, 5vw, 2.4rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1rem;
}
.intro__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--white);
  cursor: pointer; padding: .95rem 1.8rem; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s, transform .3s;
}
.intro__btn:hover, .intro__btn:focus-visible { transform: translateY(-2px); }
.intro__btn--audio {
  border-color: rgba(139,92,255,.55);
  background: rgba(139,92,255,.12);
  box-shadow: 0 0 30px rgba(139,92,255,.22);
}
.intro__btn--audio:hover, .intro__btn--audio:focus-visible {
  background: rgba(139,92,255,.2); border-color: rgba(139,92,255,.8);
  box-shadow: 0 0 40px rgba(139,92,255,.35);
}
.intro__btn--silent { color: var(--silver); }
.intro__btn--silent:hover, .intro__btn--silent:focus-visible {
  color: var(--white); border-color: rgba(201,204,214,.4); background: rgba(255,255,255,.05);
}
.intro__ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Lock page scroll while the gate is open */
body.intro-open { overflow: hidden; }

/* ============ 3. UTILITIES ============ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 1.25rem;
}

/* Scroll reveal: blur-to-focus + rise */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1), filter .9s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Headings always wrap on whole words (never split mid-word), balanced lines */
h1, h2, h3,
.hero__title, .hero__sub, .missing__q, .missing__cta, .iof__title,
.aurora__title, .app__title, .app__lede, .origin__title,
.status__title, .connect__title {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Manual line breaks apply only on wider screens; phones wrap naturally */
@media (max-width: 560px) { br.mbr { display: none; } }

/* Status dots */
.dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; margin-right: .55em; vertical-align: middle;
  background: var(--muted);
}

/* Live / active indicators: a luminous beacon that breathes light and
   emits an expanding "ping" ring in a loop — reads as switched-on, alive
   and repeating. Never a static light dot. */
.dot--live  { background: var(--cyan);   --beacon: 53,224,208;  animation: beacon 1.6s ease-in-out infinite; }
.dot--pulse { background: var(--violet); --beacon: 139,92,255;  animation: beacon 1.6s ease-in-out infinite; }

/* Breathing core glow */
@keyframes beacon {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--beacon), .6),
                0 0 10px rgba(var(--beacon), .3);
  }
  50% {
    box-shadow: 0 0 13px rgba(var(--beacon), 1),
                0 0 26px rgba(var(--beacon), .75),
                0 0 40px rgba(var(--beacon), .4);
  }
}

/* Expanding radar "ping" ring on every beat */
.dot--live::after,
.dot--pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(var(--beacon), .55);
  animation: dotPing 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes dotPing {
  0%       { transform: scale(1);   opacity: .6; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* ============ 4. CURSOR AURA + SCROLL SPINE ============ */
.cursor-aura {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 340px; height: 340px; margin: -170px 0 0 -170px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139,92,255,.16), transparent 62%);
  opacity: 0; transition: opacity .4s ease, width .3s ease, height .3s ease;
  mix-blend-mode: screen;
}
.cursor-aura.is-hot { background: radial-gradient(circle, rgba(139,92,255,.30), transparent 62%); }

.spine {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 2px; height: 100vh; pointer-events: none;
  background: var(--line);
}
.spine__fill {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--violet), var(--blue), transparent);
  box-shadow: 0 0 12px rgba(139,92,255,.6);
}

/* ============ 5. HERO ============ */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;   /* correct mobile viewport */
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 6rem var(--pad) 5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Ambient background — always renders, so no "broken" state before video */
.hero__ambient {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 50% 0%,  rgba(46,107,255,.18), transparent 55%),
    radial-gradient(90% 70% at 80% 90%,  rgba(139,92,255,.20), transparent 55%),
    radial-gradient(80% 60% at 15% 80%,  rgba(53,224,208,.08), transparent 55%),
    var(--black);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-2%); } }

.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ease the video in on first play so it never "pops" over the
     ambient background — the poster matches frame 0, so no visible cut. */
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__video.is-playing { opacity: .9; }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,5,7,.35) 0%, rgba(5,5,7,.15) 40%, rgba(5,5,7,.85) 100%);
}

.hero__inner { max-width: min(92vw, 62rem); }

.hero__brand {
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .55em; text-transform: uppercase;
  color: var(--silver); margin-bottom: clamp(1.2rem, 4vw, 2rem); padding-left: .55em;
}

/* Logo image in place of the SENSI wordmark */
.hero__logo {
  display: block; width: auto;
  height: clamp(66px, 9vw, 104px);
  margin: 0 auto clamp(1.4rem, 4vw, 2.2rem);
}

.hero__title {
  font-size: clamp(3rem, 14vw, 8rem);
  font-weight: 700; line-height: .92; letter-spacing: -.02em;
  text-transform: uppercase; max-width: 100%;
  /* Soft "wave" of colour rising from the bottom (radial = curved edge,
     not a straight dividing line). Violet sits under blue, muted + premium. */
  background: radial-gradient(78% 135% at 50% 122%,
    #7f4fe6 0%, #9670ee 24%, #b39cf0 44%, #d7cff5 60%, #ffffff 76%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__sub {
  margin-top: clamp(1rem, 3vw, 1.6rem);
  font-size: clamp(.95rem, 3.4vw, 1.4rem);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--white);
}

.hero__lede {
  margin-top: clamp(1.4rem, 5vw, 2.2rem);
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 2.6vw, .9rem);
  line-height: 1.9; letter-spacing: .06em; color: var(--silver);
}
.hero__lede em { color: var(--violet); font-style: normal; }

/* Micro-status — telemetry strip, bottom of hero */
.hero__status {
  position: absolute; left: 0; right: 0; bottom: clamp(3.2rem, 9vh, 5rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 6vw, 4rem);
  padding-inline: var(--pad);
}
.stat { display: flex; flex-direction: column; gap: .35rem; font-family: var(--font-mono); }
.stat__key {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.stat__val { font-size: .72rem; letter-spacing: .06em; color: var(--silver); white-space: nowrap; }

.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  width: 22px; height: 34px; border: 1px solid var(--line); border-radius: 12px;
}
.hero__scroll span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; border-radius: 2px; background: var(--violet);
  animation: scrolldot 2s ease-in-out infinite;
}
@keyframes scrolldot { 0% { opacity: 0; top: 6px; } 40% { opacity: 1; } 80% { opacity: 0; top: 18px; } 100% { opacity: 0; } }

/* ============ 6. MISSING SENSE ============ */
.missing { padding-block: var(--section-y); position: relative; }
.missing .wrap { position: relative; z-index: 1; }
/* Ambient "scent diffusion" particle canvas behind the content */
.missing__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.missing__q {
  font-size: clamp(2rem, 8.5vw, 5rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.02em;
  max-width: 16ch;
}
.channels {
  list-style: none; margin: clamp(2.5rem, 8vw, 4.5rem) 0;
  display: flex; flex-wrap: wrap; gap: .8rem 1rem;
}
.channel {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: clamp(1rem, 4vw, 1.5rem); font-weight: 500;
  background: rgba(255,255,255,.015);
}
.channel .tick { color: var(--cyan); font-size: .9em; }
.channel--scent {
  border-color: rgba(139,92,255,.5);
  background: rgba(139,92,255,.06);
  box-shadow: 0 0 30px rgba(139,92,255,.12);
}
.channel--scent span { color: var(--white); }
.tick--q { color: var(--violet); font-weight: 700; }

/* Chips fade in ONE AT A TIME (cascade) as the row scrolls into view.
   They share the .reveal fade; a per-chip delay staggers them. Pure CSS,
   GPU-friendly — smooth on mobile and desktop alike. */
.channels .channel:nth-child(1) { transition-delay: .10s; }
.channels .channel:nth-child(2) { transition-delay: .28s; }
.channels .channel:nth-child(3) { transition-delay: .46s; }
.channels .channel:nth-child(4) { transition-delay: .64s; }
.channels .channel:nth-child(5) { transition-delay: .82s; }

.missing__note {
  font-family: var(--font-mono); font-size: clamp(.8rem, 3vw, 1rem);
  color: var(--silver); letter-spacing: .04em; max-width: 40ch;
}
.missing__cta {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 11vw, 7rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
  padding-bottom: .14em;          /* room for descenders (g/y) under the gradient */
  text-wrap: balance;            /* avoid a lone "it." on its own line */
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============ 7. INTERNET OF FRAGRANCE ============ */
.iof {
  padding-block: var(--section-y);
  text-align: center;
  border-top: 1px solid var(--line);
  background: #020204;
  position: relative; overflow: hidden; isolation: isolate;
}
/* Abstract background video kept very subtle; scrim keeps centre/bottom clean */
.iof__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .16; filter: brightness(.8) saturate(1.05);
}
.iof__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Keep the centre and especially the bottom deep, clean black. */
  background: linear-gradient(to bottom,
    rgba(2,2,4,.30) 0%, rgba(2,2,4,.68) 48%, rgba(2,2,4,.92) 100%);
}
/* Ambient purple light from the TOP edge: continuous across the full width,
   brightest at the very top, diffusing softly down to ~centre, then blending
   completely into black. Vertical multi-stop gradient + soft blur — no spotlight,
   no hard line, no waves, and the lower half stays pure black. */
.iof__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.iof__glow::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 62%;
  background: linear-gradient(to bottom,
    rgba(124,58,237,.42) 0%,     /* #7C3AED — intense at the top edge */
    rgba(139,92,255,.27) 15%,    /* #8B5CF6 — diffuse violet */
    rgba(90,45,160,.16) 32%,
    rgba(50,19,95,.08) 48%,      /* #32135F — deep purple, almost gone */
    rgba(2,2,4,0) 82%);          /* fully blended into black by ~centre */
  filter: blur(6px);
  animation: iofGlowBreathe 14s ease-in-out infinite alternate;
}
/* Same violet glow mirrored at the BOTTOM edge, full width */
.iof__glow::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 62%;
  background: linear-gradient(to top,
    rgba(124,58,237,.42) 0%,     /* #7C3AED — intense at the bottom edge */
    rgba(139,92,255,.27) 15%,    /* #8B5CF6 — diffuse violet */
    rgba(90,45,160,.16) 32%,
    rgba(50,19,95,.08) 48%,      /* #32135F — deep purple, almost gone */
    rgba(2,2,4,0) 82%);          /* fully blended into black by ~centre */
  filter: blur(6px);
  animation: iofGlowBreathe 14s ease-in-out infinite alternate;
}
@keyframes iofGlowBreathe { from { opacity: .9; } to { opacity: 1; } }
.iof .wrap, .iof .network, .iof__caption { position: relative; z-index: 1; }
.iof__title {
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.network {
  position: relative;
  width: 100%; max-width: 760px; margin: clamp(1.5rem,6vw,3rem) auto 0;
  aspect-ratio: 1 / 1;
}
.network__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Static labels overlay the canvas; positioned by JS. Hidden until placed. */
.network__labels { position: absolute; inset: 0; }
.node {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: clamp(.5rem, 1.7vw, .64rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver);
  text-align: center; line-height: 1.35; max-width: 108px;
  pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.network.is-ready .node { opacity: 1; }
.node--core {
  top: 50%; left: 50%; max-width: none;
  width: clamp(96px, 20vw, 168px); height: auto;
  filter: drop-shadow(0 0 20px rgba(139,92,255,.5));
}
.iof__caption {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  font-family: var(--font-mono); font-size: clamp(.72rem, 2.6vw, .88rem);
  color: var(--muted); letter-spacing: .06em;
}


/* ============ 8b. SENSI APP — full-bleed image, text on top ============ */
.app {
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--line);
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--pad) var(--section-y);
  text-align: center;
}
/* The icon cascade fills the whole section as a background,
   anchored low so the brightest icons stay in the lower half. */
.app__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
/* Solid dark band across the top holds the text; clears lower so
   the icons read cleanly — text and icons never share the same zone. */
.app__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,5,7,.98) 0%,
    rgba(5,5,7,.95) 28%,
    rgba(5,5,7,.60) 40%,
    rgba(5,5,7,.10) 54%,
    rgba(5,5,7,.50) 100%);
}
.app .wrap { position: relative; z-index: 1; }
.app__title {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  text-shadow: 0 2px 30px rgba(0,0,0,.7);
}
.app__lede {
  margin: clamp(.9rem, 2.5vw, 1.4rem) auto 0; max-width: 40ch;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem); color: var(--silver);
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
}
/* Mobile: the landscape image is shown whole below the text (no ugly crop) */
@media (max-width: 720px) {
  .app {
    min-height: auto;
    padding: clamp(3rem, 12vw, 4.5rem) var(--pad);
  }
  .app .wrap { order: 1; }
  .app__scrim { display: none; }
  .app__bg {
    position: relative; inset: auto; order: 2; z-index: 1;
    width: 100%; height: auto; object-fit: contain;
    margin-top: clamp(1.8rem, 7vw, 2.6rem);
    border-radius: 14px;
    filter: drop-shadow(0 24px 60px rgba(139,92,255,.28));
  }
  .app__title, .app__lede { text-shadow: none; }
}

/* ============ 9. AURORA ============ */
.aurora { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.aurora__grid { display: grid; gap: clamp(2.5rem, 8vw, 5rem); align-items: center; }
.aurora__media {
  position: relative; isolation: isolate;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, var(--titanium), var(--graphite));
  border: 1px solid var(--line);
}
.aurora__media img { width: 100%; height: auto; object-fit: cover; }
/* Original AURORA video — shown full (uncropped), looping */
.aurora__video { display: block; width: 100%; height: auto; }
/* Premium glass sound toggle */
.aurora__sound {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white);
  background: rgba(10,10,16,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(201,204,214,.18); border-radius: 100px;
  cursor: pointer; transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.aurora__sound:hover, .aurora__sound:focus-visible {
  border-color: rgba(139,92,255,.6);
  background: rgba(139,92,255,.14);
  box-shadow: 0 0 26px rgba(139,92,255,.25);
}
.aurora__sound.is-on {
  border-color: rgba(139,92,255,.7);
  background: rgba(139,92,255,.18);
  box-shadow: 0 0 24px rgba(139,92,255,.28);
}
.aurora__ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.aurora__ico--on { display: none; }
.aurora__sound.is-on .aurora__ico--off { display: none; }
.aurora__sound.is-on .aurora__ico--on { display: inline-block; }
.aurora__halo {
  position: absolute; inset: -20% -10% auto; height: 60%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(139,92,255,.35), transparent 70%);
  filter: blur(30px);
}
.aurora__title {
  font-size: clamp(2.6rem, 11vw, 6rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.aurora__lede {
  margin-top: 1.2rem; font-size: clamp(1rem, 4vw, 1.4rem);
  color: var(--silver); max-width: 26ch;
}
.aurora__spec {
  list-style: none; margin: clamp(1.6rem, 5vw, 2.4rem) 0;
  font-family: var(--font-mono); font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1.8; letter-spacing: .08em; color: var(--white);
}
.aurora__status {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver);
}

/* ============ 10. MOMENTUM ============ */
.momentum { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.miles { display: grid; gap: clamp(2.5rem, 7vw, 4rem); }
.mile { display: flex; flex-direction: column; gap: .6rem; }
.mile__fig {
  font-size: clamp(2.8rem, 15vw, 5rem);
  font-weight: 700; line-height: .9; letter-spacing: -.03em;
}
.mile--hero .mile__fig {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mile__lab {
  font-family: var(--font-mono); font-size: clamp(.72rem, 2.8vw, .85rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* Odometer — overlays the static number and clips to its exact box,
   so layout, size, baseline and spacing stay identical. */
.odo { position: relative; display: inline-block; }
.odo__static { display: inline-block; }
.odo__mask { position: absolute; inset: 0; overflow: hidden; }
.odo__reel { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.odo__reel-item { display: block; text-align: right; }
.mile__fig .nowrap { white-space: nowrap; }
/* Gradient on the $100K odometer number — applied in CSS (with
   -webkit-text-fill-color, required by Safari) so it never turns invisible. */
.mile--hero .odo__static,
.mile--hero .odo__reel-item {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============ 11. ITALY × DUBAI ============ */
.origins {
  padding-block: var(--section-y); border-top: 1px solid var(--line); text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
}
/* Interactive ambient background (Italy ↔ Dubai connection) */
.origins__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.origins .wrap, .origins__note { position: relative; z-index: 1; }
.origins__grid {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2rem, 6vw, 3rem);
}
.origin { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
/* Real national flags as premium circular medallions (Apple-style) */
.origin__flag {
  position: relative; display: inline-block; isolation: isolate;
  width: clamp(58px, 13vw, 88px); aspect-ratio: 1; border-radius: 50%;
  box-shadow:
    0 12px 34px rgba(0,0,0,.55),
    0 0 30px rgba(139,92,255,.22);
  transition: transform .5s cubic-bezier(.16,.8,.3,1), box-shadow .5s ease;
}
.origin__flag svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Glossy highlight + crisp inner ring for the medallion look */
.origin__flag::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(125% 125% at 30% 18%, rgba(255,255,255,.38), rgba(255,255,255,0) 44%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -8px 18px rgba(0,0,0,.38);
}
.origin__flag:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 40px rgba(139,92,255,.35);
}
.origin__title {
  font-size: clamp(2.2rem, 10vw, 5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.origin__place {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted);
}
.origins__link { width: 1px; height: clamp(48px, 14vw, 90px); overflow: hidden; }
/* Central violet dash removed — the element stays as a spacer so the
   two flags remain apart (the plane flies the connection instead). */
.origins__link span { display: none; }
.origins__link.is-in span { transform: scaleY(1); }
.origins__note {
  margin: clamp(2rem, 6vw, 3rem) auto 0;
  max-width: 62ch; padding-inline: var(--pad); text-align: center;
  font-family: var(--font-mono); font-size: clamp(.8rem, 3vw, 1rem);
  line-height: 1.9; letter-spacing: .06em; color: var(--silver);
}

/* ============ 11b. VIDEO REACTION ============ */
.reactions {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
  background: #020204;
}
/* Soft violet ambience from the top edge, blending into black */
.reactions__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(139,92,255,.16), transparent 60%),
    radial-gradient(70% 50% at 85% 100%, rgba(46,107,255,.10), transparent 60%);
}
.reactions .wrap { position: relative; z-index: 1; }
.reactions__title {
  font-family: "SportBreak", var(--font-display);
  font-size: clamp(2.4rem, 10vw, 5.5rem);
  font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
.reactions__lede {
  margin: clamp(1rem, 3vw, 1.6rem) auto 0; max-width: 44ch;
  font-size: clamp(1.02rem, 3.4vw, 1.4rem); line-height: 1.5;
  color: var(--silver);
}

/* Vertical Shorts grid (9:16 cards) */
.reactions__grid {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(.7rem, 2.5vw, 1.1rem);
}
.rcard {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--graphite);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.rcard:hover, .rcard:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(139,92,255,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 34px rgba(139,92,255,.28);
}
/* Facade thumbnail (loads first; iframe only appears on click) */
.rcard__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,.8,.3,1), filter .45s ease;
}
.rcard:hover .rcard__thumb { transform: scale(1.06); filter: brightness(1.05); }
/* Gradient veil so the play button always reads */
.rcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,7,.05) 0%, rgba(5,5,7,0) 40%, rgba(5,5,7,.55) 100%);
  transition: opacity .45s ease;
}
.rcard.is-live::after { opacity: 0; }
/* Play button */
.rcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: clamp(44px, 12%, 62px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(10,10,16,.42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.rcard:hover .rcard__play {
  background: rgba(139,92,255,.55);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 8px 28px rgba(139,92,255,.4);
  transform: translate(-50%, -50%) scale(1.08);
}
.rcard__play svg { width: 42%; height: 42%; fill: #fff; margin-left: 6%; }
/* Loaded player fills the card */
.rcard iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; z-index: 3;
}

/* ============ 12. WHAT'S NEXT — STATUS BOARD ============ */
.status { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.status__title {
  font-size: clamp(2.4rem, 11vw, 6rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}
.board { list-style: none; display: grid; }
.row {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name state" "meta state";
  gap: .2rem 1rem; align-items: center;
  padding: clamp(1.1rem, 4vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row__name { grid-area: name; font-size: clamp(1.05rem, 4.4vw, 1.6rem); font-weight: 600; }
.row__meta {
  grid-area: meta; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.row__state {
  grid-area: state; font-family: var(--font-mono);
  font-size: clamp(.66rem, 2.6vw, .78rem); letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver); white-space: nowrap;
}

/* ============ 13. CONNECT ============ */
.connect { padding-block: var(--section-y); border-top: 1px solid var(--line); text-align: center; }
.connect__title {
  font-size: clamp(2.6rem, 13vw, 7rem);
  font-weight: 700; letter-spacing: -.03em; line-height: .98;
}
.connect__sub {
  margin-top: 1.2rem; font-family: var(--font-mono);
  font-size: clamp(.8rem, 3vw, 1rem); letter-spacing: .1em; color: var(--silver);
}
.links {
  margin-top: clamp(2.2rem, 7vw, 3.2rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem;
}
.link {
  font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--silver);
  padding: .8rem 1.6rem; border: 1px solid var(--line); border-radius: 100px;
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.link:hover, .link:focus-visible {
  color: var(--white); border-color: rgba(139,92,255,.55);
  background: rgba(139,92,255,.06); box-shadow: 0 0 24px rgba(139,92,255,.15);
}

/* ============ 14. FOOTER ============ */
.foot { padding-block: clamp(2.5rem, 7vw, 4rem); border-top: 1px solid var(--line); }
.foot__grid {
  display: flex; flex-direction: column; gap: .5rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: var(--muted);
}
.foot__brand { align-self: flex-start; width: auto; height: clamp(34px, 7vw, 48px); margin-bottom: .35rem; }
.foot__tag { color: var(--silver); }
.foot__copy { margin-top: .8rem; }

/* ============ 15. RESPONSIVE ============ */

/* Tablet ≥ 720px */
@media (min-width: 720px) {
  .origins__grid { flex-direction: row; justify-content: center; }
  .origins__link { width: clamp(90px, 18vw, 220px); height: 1px; }
  .origins__link span { transform-origin: left; transform: scaleX(0); }
  .origins__link.is-in span { transform: scaleX(1); }
  .origin { align-items: flex-start; text-align: left; }
  .origin--right { align-items: flex-end; text-align: right; }
  .stage {
    /* horizontal pipeline on wider screens */
  }
}

/* Milestones go 3-across only when the row is wide enough to keep
   each figure (incl. "5 Years") on a single line. Below this they stack. */
@media (min-width: 1200px) {
  .miles { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* Desktop ≥ 960px */
@media (min-width: 960px) {
  .aurora__grid { grid-template-columns: 1fr 1fr; }
}

/* Large ≥ 1200px — a touch more air */
@media (min-width: 1200px) {
  .hero__lede { font-size: .95rem; }
}

/* Fine-pointer devices get the cursor aura; touch does not (JS also guards) */
@media (hover: none) { .cursor-aura { display: none; } }

/* ============ 16. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__ambient { animation: none; }
  .hero__video { display: none; }          /* show poster instead of looping motion */
  .hero { background: var(--black); }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero__scroll { display: none; }
}

/* ============ 17. CUSTOM BRAND FONTS ============ */
/* Upload the .otf files to assets/fonts/ (exact names below). */
@font-face {
  font-family: "Ethnocentric";
  src: url("assets/font/Ethnocentric-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Techovier";
  src: url("assets/font/Techovier.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Pirulen";
  src: url("assets/font/Pirulen-Rg.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: block;
}
/* COMING SOON */
.hero__title  { font-family: "Ethnocentric", var(--font-display); }
/* The Internet of Fragrances (hero) */
.hero__sub    { font-family: "Techovier", var(--font-display); }
/* Internet of Fragrances (section title) */
.iof__title   { font-family: "Techovier", var(--font-display); }
/* THE VISION (section eyebrow) */
.iof .eyebrow { font-family: "Pirulen", var(--font-mono); }
/* "We can send almost everything." + "We're working on it." → Montserrat */
.missing__q, .missing__cta { font-family: var(--font-display); }
@font-face {
  font-family: "SportBreak";
  src: url("assets/font/Sport-Break-Free-Version.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.aurora__title {
  font-family: "SportBreak", var(--font-display);
}
/* What's next — "AURORA" row in the SportBreak brand font */
.row__name--aurora {
  font-family: "SportBreak", var(--font-display);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Italy × Dubai headings ("Born in Italy." / "Built from Dubai.") — SportBreak */
.origin__title {
  font-family: "SportBreak", var(--font-display);
}