/* ============================================================
   layout.css — high-level page chrome (header / main / footer).
============================================================ */

:root { --header-h: 3.4rem; }

/* ── Loading screen ── */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cp, #8c75ff);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
#loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}
#loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-cat {
  width: clamp(80px, 15vw, 140px);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.35));
  animation: cat-bob 1.4s ease-in-out infinite;
}
@keyframes cat-bob {
  0%   { transform: translateY(0)     rotate(-1.5deg); }
  50%  { transform: translateY(-14px) rotate(1.5deg);  }
  100% { transform: translateY(0)     rotate(-1.5deg); }
}
.loading-label {
  display: block;
  margin-top: 1.2rem;
  position: relative;
  z-index: 1;
  font-family: 'Syne', sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
}
.loading-dots span {
  opacity: 0;
  animation: dot-blink 1.2s infinite;
}
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.3s; }
.loading-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dot-blink {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

/* Skip nav — visible only on keyboard focus */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  background: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.5rem;
  height: var(--header-h);
  box-sizing: border-box;
  background: transparent;
  color: #fe86f4;
  position: relative;
  z-index: 9001;
}
.site-header { overflow: visible; isolation: isolate; }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
 

}
.site-header .brand {
  display: block;
  position: relative;
  /* This box's width is a pure flex-layout reservation, not the logo's real
     size — the logo (.brand-3d/.brand-overlay) is absolutely positioned and
     doesn't touch this value at all. Measured real footprint (.brand-overlay,
     the widest of the two) peaks at ~285px around 1199px viewport and settles
     at 274px above ~1300px, so 495px was reserving up to ~235px more than
     the logo ever visually needs — space nav could use instead. Trimmed to
     clear the measured peak with a comfortable margin. */
  width: clamp(160px, 24vw, 340px);
  /* .brand's own children (.brand-3d/.brand-overlay) are all position:absolute,
     so this box has ~0 in-flow content and flex-shrink would otherwise crush
     it toward 0 to make room for nav's un-shrinkable text — even though the
     logo itself (absolutely positioned) wouldn't visually move, nav would
     then render into the space the logo occupies. Never let it shrink. */
  flex-shrink: 0;
  height: var(--header-h);
  color: #fe86f4;
}
.brand-link {
  display: block;
  text-decoration: none;
}
.brand-overlay {
  /* Match the visual footprint of .brand-3d, which overflows the .brand
     container: it is ~45px left of brand, extends ~190px below it, and
     is 6× header-height tall (≈326px).  Using the same geometry as
     .brand-3d but with a small extra padding keeps hover/click accurate. */
  position: absolute;
  left: calc(35px - 5rem - 10px);          /* same left as .brand-3d minus 10px padding */
  top: calc(40% + 60px - (var(--header-h) * 3) - 10px); /* visual top of .brand-3d minus 10px */
  width: calc(clamp(85px, 20vw, 260px) + 20px);          /* same width as .brand-3d + 20px padding */
  height: calc(var(--header-h) * 6 + 20px);              /* same height as .brand-3d + 20px padding */
  z-index: 5;
  cursor: pointer;
  /* Keep this invisible click hit-area eased in step with .brand-3d above,
     so it doesn't snap to the new section's position/size ahead of the
     logo it's supposed to match. */
  transition: left 0.5s cubic-bezier(.22, .61, .36, 1),
              top 0.5s cubic-bezier(.22, .61, .36, 1),
              width 0.5s cubic-bezier(.22, .61, .36, 1),
              height 0.5s cubic-bezier(.22, .61, .36, 1) !important;
}
.brand-3d {
  position: absolute;
  left: calc(35px - 5rem);
  top: 40%;
  margin-top: 60px;
  transform: translateY(-50%);
  transform-origin: top left;
  /* .cfg-section-active also changes width and margin-left (see below) —
     both were missing here, so those two snapped instantly while the rest
     eased, producing a jump. All six now ease together on the same curve.
     !important because model-viewer's own JS sets an inline
     style="transition: opacity 0.3s" on this element (its built-in
     poster-fade behavior) — a normal inline style beats a normal external
     rule, but !important in an external stylesheet still wins over it. */
  transition: transform 0.5s cubic-bezier(.22, .61, .36, 1),
              left 0.5s cubic-bezier(.22, .61, .36, 1),
              top 0.5s cubic-bezier(.22, .61, .36, 1),
              margin-top 0.5s cubic-bezier(.22, .61, .36, 1),
              margin-left 0.5s cubic-bezier(.22, .61, .36, 1),
              width 0.5s cubic-bezier(.22, .61, .36, 1),
              opacity 0.3s ease !important;
  width: clamp(85px, 20vw, 260px);
  height: calc(var(--header-h) * 6);
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  --poster-color: transparent;
  background: transparent;
  pointer-events: none;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .brand-3d {
    left: calc(-2vw + 35px);
  }
  .brand-overlay {
    left: calc(-2vw + 35px - 10px);
  }
}
@media (min-width: 1200px) {
  .brand-3d {
    left: calc(60px - 5rem);
  }
  .brand-overlay {
    left: calc(60px - 5rem - 10px);
  }
}
@media (min-width: 768px) {
  .cfg-section-active .brand-3d {
    left: 10px;
    top: 10px;
    margin-top: 0;
    margin-left: 0;
    transform: scale(0.45);
    width: 260px;
  }
  /* When cfg-section is active the logo shrinks via scale(0.45), so shrink the overlay too */
  .cfg-section-active .brand-overlay {
    left: 0px;
    top: 0px;
    width: calc(260px * 0.45 + 20px);
    height: calc(var(--header-h) * 6 * 0.45 + 20px);
  }
}
.brand-png {
  display: none;
  height: 2rem;
  width: auto;
  pointer-events: none;
}
/* Tablet portrait: base left is -45px and translateY(-50%) pushes logo above header — fix both */
@media (min-width: 769px) and (max-width: 1023px) {
  .site-header .brand { padding-left: 1rem; padding-top: 0.5rem; }
  .brand-3d {
    left: 1.5rem;
    top: 0.5rem;
    margin-top: 0;
    transform: none;
  }
}
@media (max-width: 768px) {
  .brand-png { display: none !important; }
  .site-header .brand { padding-left: 20px; padding-top: 20px; }
  .brand-3d { margin-left: 45px; width: clamp(102px, 24vw, 312px); }
  /* On mobile brand-3d has margin-left: 45px and a wider clamp width */
  .brand-overlay {
    left: calc(35px - 5rem + 45px - 10px); /* base left + mobile margin-left + padding */
    width: calc(clamp(102px, 24vw, 312px) + 20px);
  }
  .hero-logo-3d { transform: translateX(0); }
}
.site-header nav { display: flex; align-items: center; gap: 1.25rem; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.18em; color: #fe86f4; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 1024px) {
  /* Deliberate breathing room on the right beyond the header's base 1.5rem
     padding, so the cart icon isn't flush to the edge (this is also folded
     into the font formula below via the 64px = 24+40 padding total). */
  .site-header { padding-right: 2.5rem; }

  /* Text nav stays visible (no hamburger) from 1024px up. The available
     room for nav (the whole element — .nav-links AND .cart-btn, which sits
     after it in the same flex row) is viewport − header padding (64px) −
     logo box width; the logo box is clamp(160px, 24vw, 340px), reused
     verbatim below instead of approximated since it's a piecewise curve
     (flat / linear / flat again past ~1417px) a plain linear font formula
     can't track. nav's full width vs. font-size was measured directly
     (.cart-btn is a fixed-size icon that doesn't scale with font, so it's
     an affine fit, not pure proportion): width ≈ 198.28px + 57.49 ×
     font-size-px (measured 658.2px@8px, 1003.1px@14px, 1348.0px@20px —
     fits to <1px error). Solving for font-size from the real available
     space: font = (available − 198.28) / 57.49. Must come after the base
     .site-header nav/.nav-links rules above — same specificity, so source
     order decides the winner. */
  .site-header nav {
    font-size: clamp(0.5rem, calc((100vw - 64px - clamp(160px, 24vw, 340px) - 198.28px) / 57.49), 1.25rem);
    gap: clamp(0.5rem, calc((100vw - 64px - clamp(160px, 24vw, 340px) - 198.28px) / 57.49), 1.25rem);
  }
  .nav-links {
    gap: clamp(0.5rem, calc((100vw - 64px - clamp(160px, 24vw, 340px) - 198.28px) / 57.49), 1.25rem);
  }
}
@keyframes instax-shake {
  0%,100% { transform: rotate(0deg); }
  15%      { transform: rotate(-8deg); }
  30%      { transform: rotate(8deg); }
  45%      { transform: rotate(-6deg); }
  60%      { transform: rotate(6deg); }
  75%      { transform: rotate(-3deg); }
  90%      { transform: rotate(3deg); }
}
.nav-instax-icon {
  display: inline-block;
  height: 26px;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
}
.nav-instax-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.15rem 0.45rem;
  text-decoration: none;
}
a:hover .nav-instax-icon,
.nav-instax-link:hover .nav-instax-icon { animation: instax-shake 0.55s ease; }
a.nav-active .nav-instax-icon,
.nav-instax-link.nav-active .nav-instax-icon { filter: brightness(1.15) saturate(1.3); }
.site-header nav a { color: var(--ca, #fe86f4); white-space: nowrap; padding: 0.15rem 0.45rem; text-decoration: underline; }
body:not(.page-home) .site-header nav a { transition: color .25s ease; }
.site-header nav a:hover { color: var(--cp, #8c75ff); }
.site-header nav a.nav-active { opacity: 1; background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); }
.nav-dropdown__trigger.nav-active { opacity: 1; background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); }

/* Navigation dropdown */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown__trigger {
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, opacity 0.08s ease;
}
.nav-dropdown__trigger:active { transform: scale(0.93); opacity: 0.75; }
.nav-dropdown__menu a:active { transform: scale(0.96); opacity: 0.75; }
.nav-dropdown__trigger::after {
  content: '';
}
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--cp, #8c75ff);
  min-width: 120px;
  padding: 0.5rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--ca, #fe86f4);
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.25rem;
}
.nav-dropdown__menu a:hover {
  background: rgba(254,134,244,0.1);
  color: #8c75ff;
}
.nav-burger { display: none; }
/* Nav-bba-row hidden on desktop; shown inside mobile burger on non-home pages */
.nav-bba-row { display: none; }

/* ── Burger spans: animated → X ─────────────────────────────────────── */
.nav-burger span { transition: transform 0.22s ease, opacity 0.18s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* When nav or a product/work/interview modal is open, hide floating UI
   elements (theme + color-blind toggles, mini player) that would otherwise
   sit above the modal — #bba-bar is z-index 99998, far above any modal. */
body.nav-is-open #bba-bar,
body.nav-is-open #mini-player,
body.modal-open #bba-bar,
body.modal-open #mini-player,
body.viz-modal-open #bba-bar,
body.viz-modal-open #mini-player {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

@media (max-width: 1023px) {
  /* ── Full-screen brutalist overlay ───────────────────────────────── */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: var(--cp, #8c75ff);
    color: var(--ca, #fe86f4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5rem 0 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { color: var(--ca, #fe86f4); text-decoration: none; padding: 0.85rem 10vw; }
  .nav-links a:hover { color: #fff; background: rgba(254,134,244,0.1); }

  /* Mobile dropdown styles */
  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 2px solid rgba(254,134,244,0.3);
  }
  .nav-dropdown__trigger::after {
    display: none;
  }
  .nav-dropdown__menu {
    position: static;
    opacity: 1;
    visibility: inherit;
    transform: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    min-width: auto;
  }
  .nav-dropdown__menu a {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    opacity: 0.8;
  }
  .nav-dropdown__menu a:hover {
    opacity: 1;
  }

  .nav-burger { display: block; }
  /*
   * Iframes create their own GPU compositing layers that can render above
   * fixed overlays on mobile WebKit/Chrome regardless of z-index.
   * Hide them while the nav is open.
   */
  /* Lock scroll on both html (home) and body (other pages) while nav is open. */
  html:has(body.nav-is-open),
  body.nav-is-open { overflow: hidden !important; overflow-y: hidden !important; overscroll-behavior: none; }
  body.nav-is-open iframe { visibility: hidden; }
  /* Instax camera link — bigger icon + more breathing room in the burger */
  .nav-links .nav-instax-link {
    padding: 0.3rem 0.45rem;
    justify-content: center;
  }
  .nav-links .nav-instax-icon {
    height: 34px;
  }
  /* Brutalist nav links — centered, bounded font so nothing overflows */
  .nav-links > a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    padding: 0.85rem 10vw;
    color: var(--ca, #fe86f4);
    font-size: clamp(1.6rem, 9vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid rgba(254,134,244,0.3);
    transition: background 0.1s ease, color 0.1s ease;
    will-change: background, color;
  }
  .nav-links > a:first-child { border-top: 2px solid rgba(254,134,244,0.3); }
  .nav-links > a:hover,
  .nav-links > a:focus-visible {
    background: var(--ca, #fe86f4);
    color: var(--cp, #8c75ff);
    outline: none;
  }
  /* Make the dropdown container full-width in the flex nav so the trigger centers */
  .nav-links .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  /* Dropdown trigger — same size and centering as main links */
  .nav-links .nav-dropdown__trigger {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    width: 100%;
    padding: 0.60rem 10vw;
    color: var(--ca, #fe86f4);
    font-size: clamp(1.6rem, 9vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid rgba(254,134,244,0.3);
    transition: background 0.1s ease, color 0.1s ease;
  }
  .nav-links .nav-dropdown__trigger:hover,
  .nav-links .nav-dropdown__trigger:focus-visible,
  .nav-links .nav-dropdown__trigger.nav-active {
    background: var(--ca, #fe86f4);
    color: var(--cp, #8c75ff);
    outline: none;
  }
  /* Sub-menu: override desktop absolute/hidden so items are always visible inline */
  .nav-links .nav-dropdown__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    min-width: 0;
    transition: none;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  /* Sub-items — same font/size as main links, slightly dimmed */
  .nav-links .nav-dropdown__menu a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(1.6rem, 9vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid rgba(254,134,244,0.3);
    color: var(--ca, #fe86f4);
    opacity: 0.6;
    white-space: normal;
    word-break: break-word;
    transition: background 0.1s ease, color 0.1s ease, opacity 0.1s ease;
  }
  .nav-links .nav-dropdown__menu a:hover,
  .nav-links .nav-dropdown__menu a:focus-visible,
  .nav-links .nav-dropdown__menu a.nav-active {
    background: var(--ca, #fe86f4);
    color: var(--cp, #8c75ff);
    opacity: 1;
    outline: none;
  }
  /* Burger button */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    margin: 0;
    position: relative;
    z-index: 9003;
  }
  .nav-burger span {
    display: block;
    width: 24px;
    height: 4px;
    background: #fe86f4;
    border-radius: 3px;
  }
  /* Shrink the 3D logo hit-area and fix its vertical offset on small screens */
  .brand-3d {
    height: calc(var(--header-h) * 3);
    margin-top: 22px;
  }
  /* Overlay matches the smaller brand-3d on mobile: height = header-h*3, margin-top = 22px */
  .brand-overlay {
    top: calc(40% + 22px - (var(--header-h) * 1.5) - 10px);
    height: calc(var(--header-h) * 3 + 20px);
  }
  /* Header stays above overlay so burger remains tappable when closed */
  .site-header { z-index: 9003; }

  /*
   * When the overlay is open, lift the header's entire stacking context above
   * all page content (99991), then give brand/burger z-index above the nav
   * overlay (99990) within that context so they remain tappable.
   */
  .site-header.nav-open              { z-index: 99991 !important; }
  .site-header.nav-open .brand       { position: relative; z-index: 99995; }
  /* Slide the X to exactly where the cart icon was */
  .site-header.nav-open .nav-burger  {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99995;
  }
  .site-header.nav-open .cart-btn    { visibility: hidden; }

  /* Theme/colorblind buttons at the bottom of the burger — non-home pages only */
  body:not(.page-home) .nav-links .nav-bba-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    position: absolute;
    bottom: calc(2rem - 20px);
    left: 0;
    right: 0;
  }
  /* On non-home mobile, hide the floating bba-bar — buttons live in the burger now */
  body:not(.page-home) #bba-bar {
    display: none !important;
  }
}

main { display: block; min-height: 60vh; padding: 2rem 1.5rem; }
body.page-home main { padding: 0; min-height: 0; }

.site-footer {
  padding: 2rem 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 20%, transparent);
  color: var(--ca, #fe86f4);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ---------- Mini music player ---------- */
/* Hidden until track is replaced with a royalty-cleared one (see #hero-audio-btn) */
#mini-player { display: none !important; }
#mini-player.__unused {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  border: 1px solid var(--ca, #fe86f4);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: inherit;
  white-space: nowrap;
  transform: translateX(calc(-100% - 3rem));
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), bottom 0.3s ease;
  pointer-events: auto;
}
#mini-player.is-visible { transform: translateX(0); }
#mini-player__btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
}
#mini-player__btn:hover { opacity: 1; }
#mini-player__track { opacity: 0.8; }

/* ---------- Visualizer → next-section arrow ---------- */
#viz-next-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8999;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transform: translateX(calc(100% + 3rem));
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), opacity .18s ease, scale .12s ease;
}
#viz-next-btn.is-visible  { transform: translateX(0); }
#viz-next-btn:hover        { opacity: .88; }
#viz-next-btn:active       { scale: .96; }

/* Configurator invite → next-section arrow */
#cfg-invite-next-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8999;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid var(--ca, #fe86f4);
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, scale .12s ease;
}
#cfg-invite-next-btn.is-visible  { opacity: 1; pointer-events: auto; }
#cfg-invite-next-btn:hover        { opacity: .88; }
#cfg-invite-next-btn:active       { scale: .96; }

/* Configurator → next-section arrow (mirrors viz-next-btn) */
#cfg-next-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8999;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid var(--ca, #fe86f4);
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .25s ease, transform .25s ease, scale .12s ease;
  pointer-events: none;
}
#cfg-next-btn.is-visible  { opacity: 1; transform: translateY(0); pointer-events: auto; }
#cfg-next-btn:hover        { opacity: .88; }
#cfg-next-btn:active       { scale: .96; }

/* ---------- "No trends" wordmark blur when footer overlaps ---------- */
.brand-wordmark.is-footer-blur { filter: blur(4px); transition: filter 0.3s ease; }
.brand-tagline.is-footer-blur { filter: blur(4px); transition: filter 0.3s ease; }

#section-insta .brand-wordmark.is-footer-blur {
  filter: blur(10px);
  opacity: 0.35;
}

#section-insta .brand-tagline.is-footer-blur {
  filter: blur(10px);
  opacity: 0.35;
}

/* ---------- Brand navigation link style (used for more button) ---------- */
.brand-nav__link {
  color: var(--ca, #fe86f4);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.brand-nav__link:hover {
  background: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
}

@media (prefers-reduced-motion: reduce) {
  .loading-cat           { animation: none; }
  .loading-dots span     { animation: none; opacity: 1; }
  #loading-screen        { transition: none; }
  .nav-instax-link:hover .nav-instax-icon { animation: none; }
}