@font-face {
  font-family: 'CeleScript';
  src: url('../Fonts/Celescript (2).ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NaNTresor';
  src: url('../Fonts/NaNTresor/NaNTresorM-ExtraLight.ttf') format('truetype');
  font-weight: 200;
}

@font-face {
  font-family: 'NaNTresor';
  src: url('../Fonts/NaNTresor/NaNTresorM-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'NaNTresor';
  src: url('../Fonts/NaNTresor/NaNTresorM-Bold.ttf') format('truetype');
  font-weight: 700;
}

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

:root {
  --black:  #111111;
  --white:  #ffffff;
  --brown:  #5B2915;   /* brand accent — buttons, underlines */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--white);
}

/* ── Page ── */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

/* Background image on an explicit layer — hidden by default,
   fades in when a section is opened */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../Background/Asset 15-100.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.55s ease, background-image 0s;
  pointer-events: none;
}
.spiral-open    .page-bg { opacity: 1; background-image: url('../Background/Asset 15-100.jpg'); }
.shell-open     .page-bg { opacity: 1; background-image: url('../Background/Asset_7_BG.png'); }
.o2-open        .page-bg { opacity: 1; background-image: url('../Background/Asset_9_BG.png'); }
.sargassum-open .page-bg { opacity: 1; background-image: url('../Background/Asset_14_BG.png'); }
.acid-open      .page-bg { opacity: 1; background-image: url('../Background/Asset_11_BG.png'); }

/* ── Header — 1rem (16px) from each corner ── */
.header {
  position: relative;
  z-index: 12;   /* above ::before bg layer (z-index:1) */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem 1rem 0;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

/* ── Colour shifts when spiral panel is open ── */

/* All text/UI that needs to flip dark→white on spiral open */
.brand-title,
.brand-sub,
.tagline,
.tagline-cursor,
.btn-circle,
.btn-filled,
.btn-outline { transition: color 0.35s, background 0.35s, border-color 0.35s; }

/* ── Brand ── */
.brand-title {
  font-family: 'NaNTresor', serif;
  font-weight: 200;          /* ExtraLight */
  font-size: clamp(52px, 7.5vw, 108px);
  line-height: 1;
  color: var(--black);
  letter-spacing: -0.02em;
}
.spiral-open .brand-title { color: var(--white); }

.brand-sub {
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.2vw, 18px);
  color: var(--black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.spiral-open .brand-sub { color: var(--white); }

.brand-line {
  width: clamp(36px, 3.5vw, 55px);
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* ── Nav buttons ── */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;   /* pins to top of header — same 1rem from top as brand */
}

.btn {
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.1vw, 16px);
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.btn:active { transform: scale(0.96); }

.btn-circle {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: transparent;
  color: var(--black);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-circle:hover { background: var(--black); color: var(--white); }
.spiral-open .btn-circle {
  border-color: var(--white);
  background: rgba(255,255,255,0.12);
  color: var(--white);
}
.spiral-open .btn-circle:hover { background: var(--white); color: var(--black); }

.btn-filled {
  background: var(--black);
  color: var(--white);
  padding: 0.55rem 1.4rem;
  border-radius: 2rem;
  border: none;
}
.btn-filled:hover { background: #333; }
.spiral-open .btn-filled {
  background: var(--brown);
}
.spiral-open .btn-filled:hover { background: #7a3620; }

.btn-outline {
  background: transparent;
  color: var(--black);
  padding: 0.55rem 1.4rem;
  border-radius: 2rem;
  border: 1.5px solid var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); }
.spiral-open .btn-outline {
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}
.spiral-open .btn-outline:hover { background: var(--white); color: var(--black); }

/* ── Tagline — position set by JS to align with ? button ── */
.tagline {
  position: absolute;
  z-index: 10;
  top: 28%;
  right: 1rem;
  font-family: 'CeleScript', cursive;
  font-size: clamp(15px, 1.8vw, 26px);
  color: var(--black);
  letter-spacing: 0.08em;
  line-height: 1.55;
  width: clamp(200px, 28vw, 420px);
  white-space: normal;
  text-align: left;
}
.spiral-open .tagline {
  color: var(--white);
  z-index: 0;          /* drops below .page-bg (z-index:1) — hidden under the image */
}

.tagline-dash { display: inline; }
.tagline-text { display: inline; }

/* ── Typewriter cursor ── */
.tagline-cursor {
  display: inline-block;
  width: 1.5px;
  height: 0.85em;
  background: var(--black);
  margin-left: 1px;
  vertical-align: -0.05em;
  animation: cursor-blink 0.72s step-end infinite;
}
.spiral-open .tagline-cursor { background: var(--white); }

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Spiral illustration — clickable ── */
.illus-spiral {
  pointer-events: auto;
  cursor: pointer;
}

.illus-spiral img {
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.illus-spiral:hover img {
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
  opacity: 0.85;
}

/* ── Spiral click panel — "sexy dunes" card ── */
#spiral-panel {
  position: absolute;
  z-index: 15;
  /* JS will fine-tune; fallback: left-centre, mid page */
  left: 18%;
  top: 50%;
  transform: translateY(-40%);
  width: clamp(180px, 20vw, 280px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
  transform-origin: left center;
}

#spiral-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-40%) translateX(0);
}

.spiral-title {
  font-family: 'NaNTresor', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
  line-height: 1.1;
}

.spiral-body {
  font-family: 'CeleScript', cursive;
  font-size: clamp(10px, 1vw, 13px);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  margin-bottom: 0.9rem;
}

.spiral-bold {
  font-family: 'NaNTresor', serif;
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--brown);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* ── Spiral floating CTA button ── */
#spiral-cta {
  position: absolute;
  z-index: 15;
  right: 20%;
  top: 46%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  /* width controls size; height is set by the SVG aspect ratio */
  width: clamp(200px, 26vw, 360px);
}

#spiral-cta.active {
  opacity: 1;
  pointer-events: auto;
}

/* SVG fills the button — acts as the shape/container */
.cta-wave {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Text sits centered over the SVG */
.cta-pill-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  /* sit in the visual centre of the drawn blob (not the full bounding box) */
  padding-bottom: 10%;
}

/* ── Page disclaimer — bottom right ── */
.page-disclaimer {
  position: absolute;
  z-index: 15;
  bottom: 1.4rem;
  right: 1.6rem;
  font-family: 'NaNTresor', serif;
  font-size: clamp(8px, 0.75vw, 11px);
  color: rgba(255,255,255,0.6);
  max-width: 220px;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.2s;
}

.page-disclaimer.active {
  opacity: 1;
}

.page-disclaimer strong {
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

/* ── Illustrations — sit at page bottom, fall and stay there ── */
.illustrations {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;    /* rest at the bottom edge */
  justify-content: space-around;
  padding: 0 4vw 1vh;
  z-index: 5;
  pointer-events: none;
  /* no overflow:hidden here — page already clips; hidden here would crop
     illustrations translated upward to their --y-rest positions */
}

.illus {
  display: flex;
  align-items: flex-end;
  transform: translateY(-110vh) rotate(var(--rot-start, 0deg));
  will-change: transform;
  /* --y-rest: per-illus vertical offset from bottom (negative = raised up) */
  transition: opacity 0.4s ease;
}

.illus img {
  display: block;
  width: var(--size, 18vw);
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  transform-origin: bottom center;
  transition: filter 0.4s ease;
}

/* ── Spiral state when panel is open ── */

/* All other illustrations fade out */
.spiral-open .illus:not(.illus-spiral) {
  opacity: 0;
}

/* Spiral SVG flips to white */
.spiral-open .illus-spiral img {
  filter: invert(1) brightness(10);
}

/* ─────────────────────────────────────────────────────────
   Animation: fall → land at bottom → bounce-wiggle → rest
   translateY(0) = final resting position (bottom of page)
──────────────────────────────────────────────────────────*/
@keyframes drop-wiggle {
  0% {
    transform: translateY(-110vh) rotate(var(--rot-start, -4deg));
    animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.6);
  }
  /* land */
  55% {
    transform: translateY(var(--y-rest, 0px)) scaleY(0.88) rotate(var(--rot-end, 2deg));
    animation-timing-function: ease-out;
  }
  /* first bounce up */
  61% {
    transform: translateY(calc(var(--y-rest, 0px) - 28px)) scaleY(1.06)
               rotate(calc(var(--rot-end, 2deg) - 7deg));
  }
  /* back down */
  67% {
    transform: translateY(var(--y-rest, 0px)) scaleY(1)
               rotate(calc(var(--rot-end, 2deg) + 7deg));
  }
  /* small bounce */
  71% { transform: translateY(calc(var(--y-rest, 0px) - 10px)) rotate(calc(var(--rot-end, 2deg) - 3deg)); }
  75% { transform: translateY(var(--y-rest, 0px))               rotate(calc(var(--rot-end, 2deg) + 3deg)); }
  /* wiggle settle */
  80% { transform: translateY(var(--y-rest, 0px)) rotate(calc(var(--rot-end, 2deg) - 4deg)); }
  86% { transform: translateY(var(--y-rest, 0px)) rotate(calc(var(--rot-end, 2deg) + 4deg)); }
  91% { transform: translateY(var(--y-rest, 0px)) rotate(calc(var(--rot-end, 2deg) - 2deg)); }
  96% { transform: translateY(var(--y-rest, 0px)) rotate(calc(var(--rot-end, 2deg) + 1deg)); }
  100% { transform: translateY(var(--y-rest, 0px)) rotate(var(--rot-end, 2deg)); }
}

.illus.animate {
  animation: drop-wiggle var(--duration, 2s) var(--delay, 0s)
             cubic-bezier(0.4, 0, 1, 1) both;
}

/* ── Overlay (shared) ── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

.overlay-box {
  background: var(--white);
  color: var(--black);
  border: 1.5px solid var(--black);
  border-radius: 1.2rem;
  padding: 2.8rem 3.2rem;
  max-width: 720px;
  width: 90%;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

.overlay.active .overlay-box { transform: translateY(0); }

.overlay-close {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--black);
  cursor: pointer;
  font-family: 'NaNTresor', serif;
}

.overlay-title {
  font-family: 'NaNTresor', serif;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.overlay-body {
  font-family: 'CeleScript', cursive;
  font-size: 15pt;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   MOBILE  ≤ 768 px
   Illustrations switch from a bottom flex-row to
   absolute scatter across the full viewport height.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header ── */
  .header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.75rem 0.75rem 0;
  }

  .brand { gap: 0.6rem; }

  .brand-title { font-size: clamp(28px, 10vw, 52px); }

  .brand-sub { font-size: clamp(9px, 2.5vw, 14px); }

  .nav-buttons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-self: flex-start;
  }

  .btn         { font-size: clamp(9px, 2.6vw, 13px); }
  .btn-circle  { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .btn-filled,
  .btn-outline { padding: 0.4rem 0.9rem; }

  /* ── Tagline — floats in white space above the drawings ── */
  .tagline {
    width: calc(100vw - 1.5rem) !important;
    left: 0.75rem !important;
    top: 30% !important;      /* overrides JS inline style */
    bottom: auto;
    font-size: clamp(12px, 3.8vw, 18px);
  }

  /* ── Illustration container: full viewport, block layout ── */
  .illustrations {
    display: block;
    padding: 0;
    /* still position:absolute bottom:0 left:0 width:100% from base,
       but height must stretch up to cover the full page */
    top: 0;
    height: 100%;
  }

  /* Each illus becomes absolutely placed inside the container */
  .illus {
    position: absolute;
    display: block;
    align-items: initial;
  }

  /* Reset inline --y-rest so translateY(0) = the CSS top position.
     Specificity trick: set on the element directly via JS (see script),
     but also set here as a fallback for browsers that respect it. */
  .illus { --y-rest: 0px; }

  /* ── Individual placement — all in the bottom 45% so text panels
     have clear space above them when a section is opened ── */

  /* 1: Asset 7 (Shell) — bottom-left */
  .illustrations .illus:nth-child(1) {
    top: 58%;
    left: 2vw;
  }
  .illustrations .illus:nth-child(1) img { width: 36vw; max-height: none; }

  /* 2: Spiral — bottom-centre */
  .illus-spiral {
    top: 55%;
    left: 30vw;
  }
  .illus-spiral img { width: 32vw !important; max-height: none; }

  /* 3: Asset 11 (Acid) — bottom-right, above the others */
  .illustrations .illus:nth-child(3) {
    top: 55%;
    right: 4vw;
    left: auto;
  }
  .illustrations .illus:nth-child(3) img { width: 20vw; max-height: none; }

  /* 4: Asset 14 (Sargassum) — lower-left */
  .illustrations .illus:nth-child(4) {
    top: 72%;
    left: 6vw;
  }
  .illustrations .illus:nth-child(4) img { width: 42vw; max-height: none; }

  /* 5: Asset 9 (O₂) — lower-right */
  .illustrations .illus:nth-child(5) {
    top: 68%;
    right: 6vw;
    left: auto;
  }
  .illustrations .illus:nth-child(5) img { width: 28vw; max-height: none; }

  /* ── All text panels: appear just below the header ── */
  #spiral-panel,
  #shell-panel,
  #o2-panel,
  #sargassum-panel,
  #acid-panel {
    left: 1rem !important;
    top: 18% !important;
    width: calc(100vw - 2rem);
    transform: none !important;
  }

  /* ── All CTA buttons: JS positions them above the illustration ── */
  #spiral-cta,
  #shell-cta,
  #o2-cta,
  #sargassum-cta,
  #acid-cta {
    right: auto !important;
    transform: none !important;
  }

  /* ── Disclaimer ── */
  .page-disclaimer {
    bottom: 1rem;
    right: auto;
    left: 1rem;
    max-width: calc(100vw - 2rem);
  }

  /* ── Overlay box ── */
  .overlay-box {
    padding: 2rem 1.6rem;
  }

  /* ── Hide corner buttons on mobile ── */
  #shell-corner-btn,
  #o2-corner-btn,
  #sargassum-corner-btn,
  #acid-corner-btn { display: none !important; }

  /* ── Panel text: boost sizes and allow titles to wrap ── */
  .spiral-title, .shell-title, .o2-title,
  .sargassum-title, .acid-title {
    font-size: clamp(26px, 7vw, 40px);
    white-space: normal;
  }

  .spiral-body, .shell-body, .o2-body,
  .sargassum-body, .acid-body {
    font-size: 13px;
  }

  .spiral-bold, .shell-bold, .o2-bold,
  .sargassum-bold, .acid-bold {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════
   SHELL CREAM — Asset 7  |  #00652e dark forest green
══════════════════════════════════════════════════════ */
:root { --green: #00652e; }

.illus-shell { pointer-events: auto; cursor: pointer; }
.illus-shell img { transition: filter 0.3s ease, opacity 0.3s ease; }
.illus-shell:hover img { filter: drop-shadow(0 0 10px rgba(0,101,46,0.4)); opacity: 0.85; }

.shell-open .illus:not(.illus-shell) { opacity: 0; }
.shell-open .illus-shell img { filter: invert(1) brightness(10); }

.shell-open .brand-title,
.shell-open .brand-sub    { color: var(--white); }
.shell-open .tagline      { color: var(--white); z-index: 0; }
.shell-open .tagline-cursor { background: var(--white); color: var(--white); }
.shell-open .btn-circle   { border-color: var(--white); background: rgba(255,255,255,0.12); color: var(--white); }
.shell-open .btn-circle:hover { background: var(--white); color: var(--black); }
.shell-open .btn-filled   { background: var(--green); }
.shell-open .btn-filled:hover { background: #004d22; }
.shell-open .btn-outline  { opacity: 0; pointer-events: none; }

#shell-corner-btn {
  position: absolute; z-index: 15; top: 1rem; right: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.1s;
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--white);
  border: 1.5px solid var(--green);
  padding: 0.55rem 1.4rem; border-radius: 2rem;
  cursor: pointer; white-space: nowrap;
}
#shell-corner-btn.active { opacity: 1; pointer-events: auto; }
#shell-corner-btn:hover  { background: rgba(0,101,46,0.2); }

#shell-panel {
  position: absolute; z-index: 15;
  left: 40%; top: 50%; transform: translateY(-40%);
  width: clamp(180px, 20vw, 280px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#shell-panel.active { opacity: 1; pointer-events: auto; transform: translateY(-40%) translateX(0); }

.shell-title {
  font-family: 'NaNTresor', serif; font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--white); letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 0.8rem; white-space: nowrap;
}
.shell-body {
  font-family: 'CeleScript', cursive;
  font-size: clamp(10px, 1vw, 13px);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; margin-bottom: 0.9rem;
}
.shell-bold {
  font-family: 'NaNTresor', serif; font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 4px; text-decoration-thickness: 3px;
}

#shell-cta {
  position: absolute; z-index: 15;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: clamp(200px, 26vw, 360px);
}
#shell-cta.active { opacity: 1; pointer-events: auto; }
#shell-cta .cta-pill-text { background: transparent; border: none; border-radius: 0; color: var(--white); }

#shell-disclaimer {
  background: rgba(0,101,46,0.82);
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  color: rgba(255,255,255,0.75); backdrop-filter: blur(4px);
}
#shell-disclaimer strong { color: rgba(255,255,255,0.95); }

/* ══════════════════════════════════════════════════════
   DELUXE O₂ — Asset 9  |  #f3ec07 yellow
══════════════════════════════════════════════════════ */
:root { --yellow: #f3ec07; }

.illus-o2 { pointer-events: auto; cursor: pointer; }
.illus-o2 img { transition: filter 0.3s ease, opacity 0.3s ease; }
.illus-o2:hover img { filter: drop-shadow(0 0 10px rgba(243,236,7,0.5)); opacity: 0.85; }

.o2-open .illus:not(.illus-o2) { opacity: 0; }
.o2-open .illus-o2 img { filter: brightness(0) invert(1); }

.o2-open .brand-title,
.o2-open .brand-sub    { color: var(--white); }
.o2-open .tagline      { color: var(--white); z-index: 0; }
.o2-open .tagline-cursor { background: var(--white); }
.o2-open .btn-circle   { border-color: var(--yellow); color: var(--yellow); background: transparent; }
.o2-open .btn-circle:hover { background: var(--yellow); color: var(--black); }
.o2-open .btn-filled   { background: var(--yellow); color: var(--black); }
.o2-open .btn-filled:hover { background: #d4cc00; }
.o2-open .btn-outline  { opacity: 0; pointer-events: none; }

#o2-corner-btn {
  position: absolute; z-index: 15; top: 1rem; right: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.1s;
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--white);
  border: 1.5px solid var(--yellow);
  padding: 0.55rem 1.4rem; border-radius: 2rem;
  cursor: pointer; white-space: nowrap;
}
#o2-corner-btn.active { opacity: 1; pointer-events: auto; }
#o2-corner-btn:hover  { background: rgba(243,236,7,0.15); }

#o2-panel {
  position: absolute; z-index: 15;
  right: 55%; top: 50%; transform: translateY(-40%);
  width: clamp(180px, 22vw, 300px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#o2-panel.active { opacity: 1; pointer-events: auto; transform: translateY(-40%) translateX(0); }

.o2-title {
  font-family: 'NaNTresor', serif; font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--yellow); letter-spacing: -0.01em; line-height: 1;
  margin-bottom: 0.8rem; white-space: nowrap;
}
.o2-title sub { font-size: 0.6em; vertical-align: sub; }
.o2-body {
  font-family: 'CeleScript', cursive;
  font-size: clamp(10px, 1vw, 13px);
  color: var(--white); letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; margin-bottom: 0.9rem;
}
.o2-bold {
  font-family: 'NaNTresor', serif; font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px; text-decoration-thickness: 3px;
}

#o2-cta {
  position: absolute; z-index: 15;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: clamp(200px, 26vw, 360px);
}
#o2-cta.active { opacity: 1; pointer-events: auto; }
#o2-cta .cta-pill-text { background: transparent; border: none; border-radius: 0; color: var(--white); }

#o2-disclaimer {
  background: transparent; left: 1.6rem; right: auto;
  color: rgba(255,255,255,0.75);
}
#o2-disclaimer strong { color: rgba(255,255,255,0.95); }

/* ══════════════════════════════════════════════════════
   SARGASSUM CITY — Asset 14  |  #5fc821 green
══════════════════════════════════════════════════════ */
:root { --sargassum: #5fc821; }

.illus-sargassum { pointer-events: auto; cursor: pointer; }
.illus-sargassum img { transition: filter 0.3s ease, opacity 0.3s ease; }
.illus-sargassum:hover img { filter: drop-shadow(0 0 10px rgba(95,200,33,0.4)); opacity: 0.85; }

.sargassum-open .illus:not(.illus-sargassum) { opacity: 0; }
.sargassum-open .illus-sargassum img { filter: invert(1) brightness(10); }

.sargassum-open .brand-title,
.sargassum-open .brand-sub    { color: var(--white); }
.sargassum-open .tagline      { color: var(--white); z-index: 0; }
.sargassum-open .tagline-cursor { background: var(--white); }
.sargassum-open .btn-circle   { border-color: var(--white); background: rgba(255,255,255,0.12); color: var(--white); }
.sargassum-open .btn-circle:hover { background: var(--white); color: var(--black); }
.sargassum-open .btn-filled   { background: var(--sargassum); color: var(--white); }
.sargassum-open .btn-filled:hover { background: #4aaa18; }
.sargassum-open .btn-outline  { opacity: 0; pointer-events: none; }

#sargassum-corner-btn {
  position: absolute; z-index: 15; top: 1rem; right: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.1s;
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--white);
  border: 1.5px solid var(--sargassum);
  padding: 0.55rem 1.4rem; border-radius: 2rem;
  cursor: pointer; white-space: nowrap;
}
#sargassum-corner-btn.active { opacity: 1; pointer-events: auto; }
#sargassum-corner-btn:hover  { background: rgba(95,200,33,0.15); }

#sargassum-panel {
  position: absolute; z-index: 15;
  right: 55%; top: 50%; transform: translateY(-40%);
  width: clamp(180px, 22vw, 300px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#sargassum-panel.active { opacity: 1; pointer-events: auto; transform: translateY(-40%) translateX(0); }

.sargassum-title {
  font-family: 'NaNTresor', serif; font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--white); letter-spacing: -0.01em; line-height: 1;
  margin-bottom: 0.8rem; white-space: nowrap;
}
.sargassum-body {
  font-family: 'CeleScript', cursive;
  font-size: clamp(10px, 1vw, 13px);
  color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; margin-bottom: 0.9rem;
}
.sargassum-bold {
  font-family: 'NaNTresor', serif; font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--sargassum);
  text-underline-offset: 4px; text-decoration-thickness: 3px;
}

#sargassum-cta {
  position: absolute; z-index: 15;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: clamp(200px, 26vw, 360px);
}
#sargassum-cta.active { opacity: 1; pointer-events: auto; }
#sargassum-cta .cta-pill-text { background: transparent; border: none; border-radius: 0; color: var(--white); }

#sargassum-disclaimer {
  background: transparent; left: 1.6rem; right: auto;
  color: rgba(255,255,255,0.75);
}
#sargassum-disclaimer strong { color: rgba(255,255,255,0.95); }

/* ══════════════════════════════════════════════════════
   ACID TABS — Asset 11  |  #d0429c pink/magenta
══════════════════════════════════════════════════════ */
:root { --pink: #d0429c; }

.illus-acid { pointer-events: auto; cursor: pointer; }
.illus-acid img { transition: filter 0.3s ease, opacity 0.3s ease; }
.illus-acid:hover img { filter: drop-shadow(0 0 10px rgba(208,66,156,0.4)); opacity: 0.85; }

.acid-open .illus:not(.illus-acid) { opacity: 0; }
.acid-open .illus-acid img { filter: invert(1) brightness(10); }
.acid-open .page-bg { background-image: url('../Background/Asset_11_BG.png'); opacity: 1; }

.acid-open .brand-title,
.acid-open .brand-sub    { color: var(--white); }
.acid-open .tagline      { color: var(--white); z-index: 0; }
.acid-open .tagline-cursor { background: var(--white); }
.acid-open .btn-circle   { border-color: var(--white); background: rgba(255,255,255,0.12); color: var(--white); }
.acid-open .btn-circle:hover { background: var(--white); color: var(--black); }
.acid-open .btn-filled   { background: var(--pink); color: var(--white); }
.acid-open .btn-filled:hover { background: #a8327e; }
.acid-open .btn-outline  { opacity: 0; pointer-events: none; }

#acid-corner-btn {
  position: absolute; z-index: 15; top: 1rem; right: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.1s;
  font-family: 'CeleScript', cursive;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--white);
  border: 1.5px solid var(--pink);
  padding: 0.55rem 1.4rem; border-radius: 2rem;
  cursor: pointer; white-space: nowrap;
}
#acid-corner-btn.active { opacity: 1; pointer-events: auto; }
#acid-corner-btn:hover  { background: rgba(208,66,156,0.15); }

#acid-panel {
  position: absolute; z-index: 15;
  left: 24%; top: 50%; transform: translateY(-40%);
  width: clamp(180px, 22vw, 300px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#acid-panel.active { opacity: 1; pointer-events: auto; transform: translateY(-40%) translateX(0); }

.acid-title {
  font-family: 'NaNTresor', serif; font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  color: var(--white); letter-spacing: -0.01em; line-height: 1;
  margin-bottom: 0.8rem; white-space: nowrap;
}
.acid-body {
  font-family: 'CeleScript', cursive;
  font-size: clamp(10px, 1vw, 13px);
  color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; margin-bottom: 0.9rem;
}
.acid-bold {
  font-family: 'NaNTresor', serif; font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-underline-offset: 4px; text-decoration-thickness: 3px;
}

#acid-cta {
  position: absolute; z-index: 15;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: clamp(200px, 26vw, 360px);
}
#acid-cta.active { opacity: 1; pointer-events: auto; }
#acid-cta .cta-pill-text { background: transparent; border: none; border-radius: 0; color: var(--white); }

#acid-disclaimer {
  background: transparent; left: 1.6rem; right: auto;
  color: rgba(255,255,255,0.75);
}
#acid-disclaimer strong { color: rgba(255,255,255,0.95); }