/* Appily Ninetyseven — Spectra Capstan (home nav)
   Right-edge color drum · slanted destination lugs · hex brand bolt
   Mobile: hex-twist → mid-screen route belt (not burger dropdown)
   Not: top-bar, sticky dual-tier, glass island, left stamp rail,
   ribbon/beads, festoon, sawtooth, hinge mast, sediment, bottom dock */

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

body.a97-chromafan {
  --sc-ink: var(--cf-ink, #0E1B2C);
  --sc-teal: var(--cf-teal, #00D4C8);
  --sc-teal-deep: var(--cf-teal-deep, #007A73);
  --sc-coral: var(--cf-coral, #FF4D6A);
  --sc-coral-deep: var(--cf-coral-deep, #C42A45);
  --sc-gold: var(--cf-gold, #FFC83D);
  --sc-lime: var(--cf-lime, #B8FF3D);
  --sc-mist: var(--cf-mist, #E8FBFF);
  --sc-plate: var(--cf-surface, #FFFFFF);
  --sc-radius: var(--radius-cap, 14px);
  --sc-radius-lug: var(--radius-lug, 8px);
  --sc-ease: var(--ease-fan, cubic-bezier(0.34, 1.4, 0.64, 1));
  --sc-motion: 280ms var(--sc-ease);
  --sc-drum-w: 168px;
}

body.sc-nav-open {
  overflow: hidden;
}

/* —— Capstan shell (right-edge drum, not a top bar) —— */
.sc-capstan {
  position: relative;
  z-index: 240;
  pointer-events: none;
}

.sc-capstan > * {
  pointer-events: auto;
}

.sc-bolt,
.sc-drum {
  position: absolute;
}

.sc-bolt {
  top: 14px;
  right: calc(var(--sc-drum-w) + 18px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--sc-ink);
  z-index: 3;
  transition: transform var(--sc-motion);
}

.sc-bolt:hover,
.sc-bolt:focus-visible {
  transform: translateY(-3px) rotate(-2deg);
}

.sc-bolt:focus-visible {
  outline: 3px solid var(--sc-coral);
  outline-offset: 4px;
  border-radius: 12px;
}

.sc-bolt-face {
  width: 58px;
  height: 58px;
  clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  background:
    linear-gradient(145deg, var(--sc-gold) 0%, var(--sc-coral) 55%, var(--sc-teal) 100%);
  border: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 0 var(--sc-ink);
}

.sc-bolt-face em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sc-ink);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.sc-bolt-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  background: var(--sc-plate);
  border: 3px solid var(--sc-ink);
  border-radius: var(--sc-radius);
  padding: 8px 12px 9px;
  box-shadow: 4px 4px 0 var(--sc-teal);
}

.sc-bolt-word small {
  font-family: var(--font-ui);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-coral-deep);
}

.sc-bolt-word strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--sc-ink);
}

/* —— Drum —— */
.sc-drum {
  top: 12px;
  right: 12px;
  width: var(--sc-drum-w);
  background:
    linear-gradient(180deg, #142638 0%, var(--sc-ink) 100%);
  border: 3px solid var(--sc-ink);
  border-radius: calc(var(--sc-radius) + 4px);
  box-shadow:
    -8px 10px 0 var(--sc-coral),
    0 18px 36px rgba(14, 27, 44, 0.28);
  padding: 12px 10px 14px;
  z-index: 2;
}

.sc-drum-kicker {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-gold);
  text-align: center;
}

.sc-lugs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sc-lug {
  --sc-lug-bg: var(--sc-teal);
  --sc-lug-fg: var(--sc-ink);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px 8px 14px;
  text-decoration: none !important;
  color: var(--sc-lug-fg);
  background: var(--sc-lug-bg);
  border: 2px solid var(--sc-ink);
  border-radius: var(--sc-radius-lug);
  transform: skewY(-4deg) translateX(0);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    transform var(--sc-motion),
    box-shadow var(--sc-motion),
    filter 180ms ease,
    background 180ms ease;
  animation: sc-lug-drop 420ms var(--sc-ease) both;
  animation-delay: calc(var(--sc-i, 0) * 45ms);
}

.sc-lug--teal { --sc-lug-bg: var(--sc-teal); --sc-lug-fg: var(--sc-ink); }
.sc-lug--coral { --sc-lug-bg: var(--sc-coral); --sc-lug-fg: #fff; }
.sc-lug--gold { --sc-lug-bg: var(--sc-gold); --sc-lug-fg: var(--sc-ink); }
.sc-lug--lime { --sc-lug-bg: var(--sc-lime); --sc-lug-fg: var(--sc-ink); }

.sc-lug-tick {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc-ink);
  opacity: 0.35;
  flex-shrink: 0;
  transition: transform var(--sc-motion), background var(--sc-motion), opacity var(--sc-motion);
}

.sc-lug-label {
  flex: 1;
  min-width: 0;
}

.sc-lug-count {
  font-style: normal;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--sc-ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}

.sc-lug:hover,
.sc-lug:focus-visible {
  transform: skewY(-4deg) translateX(-10px);
  box-shadow: 6px 5px 0 rgba(0, 0, 0, 0.4);
  filter: brightness(1.05);
  outline: none;
}

.sc-lug:focus-visible {
  outline: 3px solid var(--sc-lime);
  outline-offset: 2px;
}

.sc-lug.is-active,
.sc-lug[aria-current="page"] {
  transform: skewY(-4deg) translateX(-14px);
  box-shadow:
    7px 5px 0 rgba(0, 0, 0, 0.45),
    0 0 0 3px var(--sc-lime);
}

.sc-lug.is-active .sc-lug-tick,
.sc-lug[aria-current="page"] .sc-lug-tick {
  background: var(--sc-lime);
  opacity: 1;
  transform: scale(1.35);
  box-shadow: 0 0 0 2px var(--sc-ink);
}

@keyframes sc-lug-drop {
  from {
    opacity: 0;
    transform: skewY(-4deg) translateX(28px);
  }
  to {
    opacity: 1;
    transform: skewY(-4deg) translateX(0);
  }
}

/* Winch search */
.sc-winch {
  margin-top: 12px;
}

.sc-winch-form {
  display: flex;
  border: 2px solid var(--sc-ink);
  border-radius: var(--sc-radius-lug);
  overflow: hidden;
  background: var(--sc-mist);
  box-shadow: 3px 3px 0 var(--sc-gold);
}

.sc-winch-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sc-ink);
}

.sc-winch-form input::placeholder {
  color: #4A5563;
  opacity: 1;
}

.sc-winch-form button {
  border: 0;
  border-left: 2px solid var(--sc-ink);
  background: var(--sc-gold);
  color: var(--sc-ink);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0.7rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.sc-winch-form button:hover,
.sc-winch-form button:focus-visible {
  background: var(--sc-lime);
  outline: none;
}

.sc-winch-form button:focus-visible {
  outline: 3px solid var(--sc-coral);
  outline-offset: -3px;
}

/* Cleats — secondary destinations */
.sc-cleats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.sc-cleat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  text-decoration: none !important;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.sc-cleat--teal:hover,
.sc-cleat--teal:focus-visible,
.sc-cleat--teal[aria-current="page"] {
  background: var(--sc-teal);
  color: var(--sc-ink);
  border-color: var(--sc-teal);
}

.sc-cleat--coral:hover,
.sc-cleat--coral:focus-visible,
.sc-cleat--coral[aria-current="page"] {
  background: var(--sc-coral);
  color: #fff;
  border-color: var(--sc-coral);
}

.sc-cleat--gold:hover,
.sc-cleat--gold:focus-visible,
.sc-cleat--gold[aria-current="page"] {
  background: var(--sc-gold);
  color: var(--sc-ink);
  border-color: var(--sc-gold);
}

.sc-cleat--lime:hover,
.sc-cleat--lime:focus-visible,
.sc-cleat--lime[aria-current="page"] {
  background: var(--sc-lime);
  color: var(--sc-ink);
  border-color: var(--sc-lime);
}

.sc-cleat:focus-visible {
  outline: 3px solid var(--sc-lime);
  outline-offset: 2px;
}

.sc-cleat:hover {
  transform: translateY(-2px);
}

/* Twist control — mobile only */
.sc-twist {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 260;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 3px solid var(--sc-ink);
  border-radius: 999px;
  background: var(--sc-plate);
  color: var(--sc-ink);
  box-shadow: 4px 4px 0 var(--sc-coral);
  cursor: pointer;
  font-family: var(--font-ui);
}

.sc-twist-hex {
  width: 36px;
  height: 36px;
  clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  background: linear-gradient(145deg, var(--sc-teal), var(--sc-gold) 50%, var(--sc-coral));
  transition: transform 380ms var(--sc-ease);
}

.sc-capstan.is-open .sc-twist-hex {
  transform: rotate(150deg);
}

.sc-twist-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.sc-twist-copy strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.sc-twist-copy small {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-coral-deep);
}

.sc-twist:hover,
.sc-twist:focus-visible {
  background: var(--sc-mist);
  outline: none;
}

.sc-twist:focus-visible {
  outline: 3px solid var(--sc-teal);
  outline-offset: 3px;
}

/* —— Mobile route belt (not dropdown) —— */
.sc-belt {
  display: none;
}

@media (max-width: 900px) {
  .sc-bolt,
  .sc-drum {
    display: none;
  }

  .sc-twist {
    display: inline-flex;
  }

  .sc-belt {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 72px 12px 24px;
    background:
      radial-gradient(ellipse 80% 50% at 80% 0%, rgba(255, 77, 106, 0.35), transparent 55%),
      radial-gradient(ellipse 70% 45% at 10% 100%, rgba(0, 212, 200, 0.3), transparent 50%),
      rgba(14, 27, 44, 0.88);
  }

  .sc-capstan.is-open .sc-belt {
    display: flex;
  }

  .sc-belt[hidden] {
    display: none !important;
  }

  .sc-capstan.is-open .sc-belt[hidden] {
    display: flex !important;
  }

  .sc-belt-inner {
    width: min(100%, 520px);
    background: var(--sc-plate);
    border: 3px solid var(--sc-ink);
    border-radius: calc(var(--sc-radius) + 6px);
    box-shadow: 0 16px 0 var(--sc-teal);
    padding: 16px 14px 18px;
    max-height: min(82vh, 640px);
    overflow: auto;
    animation: sc-belt-rise 360ms var(--sc-ease) both;
  }

  @keyframes sc-belt-rise {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .sc-belt-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: start;
    margin-bottom: 14px;
  }

  .sc-belt-kicker {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-coral-deep);
  }

  .sc-belt-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
  }

  .sc-belt-close {
    border: 2px solid var(--sc-ink);
    background: var(--sc-gold);
    color: var(--sc-ink);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--sc-ink);
  }

  .sc-belt-close:hover,
  .sc-belt-close:focus-visible {
    background: var(--sc-lime);
    outline: 3px solid var(--sc-coral);
    outline-offset: 2px;
  }

  .sc-belt-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .sc-tile {
    --sc-tile-bg: var(--sc-teal);
    --sc-tile-fg: var(--sc-ink);
    flex: 0 0 148px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 132px;
    padding: 14px 12px;
    border: 3px solid var(--sc-ink);
    border-radius: var(--sc-radius);
    text-decoration: none !important;
    color: var(--sc-tile-fg);
    background: var(--sc-tile-bg);
    box-shadow: 4px 4px 0 var(--sc-ink);
    transform: rotate(-2deg);
    transition: transform var(--sc-motion), box-shadow var(--sc-motion);
    animation: sc-tile-in 380ms var(--sc-ease) both;
    animation-delay: calc(var(--sc-i, 0) * 40ms);
  }

  .sc-tile--teal { --sc-tile-bg: var(--sc-teal); --sc-tile-fg: var(--sc-ink); }
  .sc-tile--coral { --sc-tile-bg: var(--sc-coral); --sc-tile-fg: #fff; }
  .sc-tile--gold { --sc-tile-bg: var(--sc-gold); --sc-tile-fg: var(--sc-ink); }
  .sc-tile--lime { --sc-tile-bg: var(--sc-lime); --sc-tile-fg: var(--sc-ink); }

  .sc-tile:nth-child(even) { transform: rotate(2deg); }

  .sc-tile-num {
    font-family: var(--font-display);
    font-size: 1.1rem;
    opacity: 0.7;
  }

  .sc-tile strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .sc-tile:hover,
  .sc-tile:focus-visible,
  .sc-tile.is-active {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 6px 8px 0 var(--sc-ink);
    outline: none;
  }

  .sc-tile:focus-visible {
    outline: 3px solid var(--sc-ink);
    outline-offset: 3px;
  }

  .sc-tile.is-active {
    box-shadow:
      6px 8px 0 var(--sc-ink),
      0 0 0 3px var(--sc-lime);
  }

  @keyframes sc-tile-in {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.9);
    }
    to {
      opacity: 1;
    }
  }

  .sc-belt-search {
    display: flex;
    border: 3px solid var(--sc-ink);
    border-radius: 999px;
    overflow: hidden;
    background: var(--sc-mist);
    box-shadow: 3px 3px 0 var(--sc-coral);
  }

  .sc-belt-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sc-ink);
  }

  .sc-belt-search input::placeholder {
    color: #4A5563;
    opacity: 1;
  }

  .sc-belt-search button {
    border: 0;
    border-left: 3px solid var(--sc-ink);
    background: var(--sc-coral);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 1rem;
    cursor: pointer;
  }

  .sc-belt-search button:hover,
  .sc-belt-search button:focus-visible {
    background: var(--sc-coral-deep);
    outline: none;
  }
}

@media (min-width: 901px) {
  .sc-twist,
  .sc-belt {
    display: none !important;
  }

  /* Room for right drum so hero content doesn't collide */
  body.a97-chromafan .cf-bloom {
    padding-right: calc(var(--sc-drum-w) + 36px);
  }

  body.a97-chromafan .cf-bloom-copy {
    max-width: min(36rem, calc(100% - 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-lug,
  .sc-tile,
  .sc-belt-inner,
  .sc-twist-hex,
  .sc-bolt {
    animation: none !important;
    transition: none !important;
  }
}