/* Crystal Clear Customs: crystal → seat → logo intro, and the centered docking header.
   Loaded last so it can refine the existing header without editing earlier stylesheets. */

:root {
  --cc-bg: #030609;
  --cc-blue: #2f8cff;
  --cc-ice: #bfe4ff;
  --cc-line: rgba(160, 200, 230, .14);
  --cc-header-h: 92px;
  --cc-logo: 82px; /* fits inside the bar with room to spare: never cropped */
}

/* ---------- Header: slim, translucent, logo centered ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(3, 6, 9, .74) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid var(--cc-line) !important;
}

header .brand {
  display: block;
  padding: 0;
  max-width: none;
}

header .brand img.brand-logo {
  display: block;
  width: var(--cc-logo) !important;
  height: var(--cc-logo) !important;
  object-fit: contain;
  mix-blend-mode: normal;
}

@media (min-width: 761px) {
  header .nav {
    display: block !important;
    position: static !important;
    width: min(1360px, calc(100% - 48px)) !important;
    min-height: var(--cc-header-h) !important;
    margin: 0 auto;
  }

  header .brand {
    position: absolute !important;
    left: 50%;
    top: 50%;
    height: var(--cc-logo) !important;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  header .header-book {
    position: absolute;
    top: 50%;
    right: max(24px, calc((100vw - 1360px) / 2));
    transform: translateY(-50%);
    z-index: 2;
  }

  /* Three categories either side of an empty logo column, so the logo sits dead center */
  header .navlinks,
  header .navlinks.open {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) calc(var(--cc-logo) + 40px) repeat(3, minmax(0, 1fr)) !important;
    margin: 0 150px !important;
    min-height: var(--cc-header-h) !important;
    border: 0 !important;
    background: transparent !important;
  }

  header .navlinks > .nav-menu:nth-of-type(4) { grid-column: 5; }

  header .nav-menu > summary {
    min-height: var(--cc-header-h) !important;
    font-size: 13px;
    letter-spacing: .01em;
    background: transparent !important;
    position: relative;
  }

  /* Electric-blue indicator instead of a filled block */
  header .nav-menu > summary::before {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 18px;
    height: 1px;
    background: var(--cc-blue);
    box-shadow: 0 0 10px var(--cc-blue);
    transform: scaleX(0);
    transition: transform .25s ease;
  }

  header .nav-menu > summary:hover::before,
  header .nav-menu[open] > summary::before { transform: scaleX(1); }

  header .nav-menu > div { max-height: calc(100svh - var(--cc-header-h)) !important; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --cc-logo: 72px; --cc-header-h: 84px; }
  header .navlinks, header .navlinks.open { margin: 0 132px !important; }
  header .nav-menu > summary { font-size: 12px; padding-inline: 4px; }
}

@media (max-width: 760px) {
  :root { --cc-logo: 60px; }

  header .nav {
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
  }

  header .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 68px !important;
    display: flex;
    align-items: center;
  }

  /* Compact emblem (diamond + seat) instead of the full lockup */
  header .brand img.brand-logo {
    width: 72px !important;
    height: 60px !important;
  }

  header .header-book {
    grid-column: 3 !important;
    grid-row: 1;
    justify-self: end;
  }
}

/* ---------- Intro ---------- */

.cc-intro { display: none; }

/* The last viewport of the intro overlaps the hero, so the page rises in beneath the docking logo */
html.cc-intro-on .cc-intro {
  display: block;
  position: relative;
  z-index: 5;
  height: 500svh;
  margin-top: calc(-1 * var(--cc-header-h-measured, var(--cc-header-h)));
  margin-bottom: -100svh;
  padding: 0 !important; /* the site's mobile section padding would offset the sticky stage */
  pointer-events: none;
}

html.cc-intro-on .cc-skip { pointer-events: auto; }

.cc-backdrop {
  position: absolute;
  inset: 0;
  background: var(--cc-bg);
}

@media (max-width: 760px) {
  html.cc-intro-on .cc-intro { height: 420svh; }
}

/* While the intro plays, the header waits invisibly in place and the logo slot stays empty */
html.cc-intro-on:not(.cc-docked) header .brand img.brand-logo { opacity: 0; }
html.cc-intro-on header.cc-header-wait { pointer-events: none; }

.cc-stick {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.cc-atmos {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(30, 110, 255, .16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, #000 100%);
}

/* A faint carbon fiber weave behind the stage, fading out toward the edges: atmosphere, never wallpaper */
.cc-atmos::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: url("/media/brand/carbon-hybrid.png") 0 0 / 224px 224px repeat;
  opacity: .45;
  -webkit-mask: radial-gradient(ellipse 55% 55% at 50% 50%, #000 20%, transparent 75%);
  mask: radial-gradient(ellipse 55% 55% at 50% 50%, #000 20%, transparent 75%);
  z-index: -1;
}

.cc-atmos { isolation: isolate; }

.cc-floor {
  position: absolute;
  left: 50%;
  bottom: 9svh;
  width: min(70vw, 900px);
  height: 18svh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(47, 140, 255, .22), transparent 70%);
  filter: blur(10px);
}

.cc-stage {
  position: relative;
  width: min(74svh, 90vw);
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 2;
}

.cc-stage > * { position: absolute; }

.cc-glow {
  left: 15%;
  top: 4%;
  width: 70%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 160, 255, .55), rgba(30, 90, 255, .18) 45%, transparent 70%);
  filter: blur(24px);
  opacity: .5;
}

.cc-float {
  inset: 0;
  animation: cc-float 6s ease-in-out infinite;
}

@keyframes cc-float {
  50% { transform: translateY(-1.2%); }
}

.cc-crystal,
.cc-crystal-sheen {
  position: absolute;
  left: 13%;
  top: 13%;
  width: 74%;
  height: 74%;
}

.cc-crystal { object-fit: contain; filter: drop-shadow(0 0 30px rgba(47, 140, 255, .45)); }

.cc-crystal-sheen {
  -webkit-mask: url("/media/brand/crystal.webp") center / contain no-repeat;
  mask: url("/media/brand/crystal.webp") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(220, 242, 255, .85) 50%, transparent 58%) 120% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: cc-sheen 5s ease-in-out infinite;
}

@keyframes cc-sheen {
  0%, 35% { background-position: 120% 0; }
  70%, 100% { background-position: -20% 0; }
}

/* Seat rectangle measured from the logo artwork (see media/brand/geometry.json) */
.cc-seat-box {
  left: 33.49%;
  top: 12.92%;
  width: 33.65%;
  height: 47.85%;
  --wipe: -12%;
}

.cc-seat-box > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.cc-seat {
  object-fit: fill;
  opacity: 0;
  -webkit-mask: linear-gradient(to bottom, #000 var(--wipe), transparent calc(var(--wipe) + 10%));
  mask: linear-gradient(to bottom, #000 var(--wipe), transparent calc(var(--wipe) + 10%));
}

/* The seat silhouette filled with crystal facets: the bridge between the two objects */
.cc-glass-seat {
  opacity: 0;
  background:
    linear-gradient(160deg, rgba(190, 230, 255, .35), rgba(20, 70, 200, .25) 55%, rgba(120, 200, 255, .4)),
    url("/media/brand/crystal.webp") 50% 30% / 135% auto no-repeat,
    #0b2a66;
  -webkit-mask: url("/media/brand/seat-mask.png") 0 0 / 100% 100% no-repeat,
    linear-gradient(to bottom, transparent var(--wipe), #000 calc(var(--wipe) + 10%));
  -webkit-mask-composite: source-in;
  mask: url("/media/brand/seat-mask.png") 0 0 / 100% 100% no-repeat,
    linear-gradient(to bottom, transparent var(--wipe), #000 calc(var(--wipe) + 10%));
  mask-composite: intersect;
  filter: brightness(1.25) saturate(1.2);
  overflow: hidden;
}

/* The seat's own contours, inverted, so the glass reads as a seat rather than a flat cut-out */
.cc-glass-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: grayscale(1) invert(1) contrast(1.5) brightness(.95);
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Light line that rides the glass-to-carbon boundary, clipped to the seat's shape */
.cc-scan {
  opacity: 0;
  background: linear-gradient(to bottom,
    transparent calc(var(--wipe) + 2%),
    rgba(150, 215, 255, .95) calc(var(--wipe) + 5%),
    transparent calc(var(--wipe) + 8%));
  -webkit-mask: url("/media/brand/seat-mask.png") 0 0 / 100% 100% no-repeat;
  mask: url("/media/brand/seat-mask.png") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px #4aa8ff);
}

.cc-logo-gem,
.cc-logo-word {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Diamond part of the logo; the notch keeps the diamond's tip and leaves the lettering out */
.cc-logo-gem {
  --r: 0%;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 58% 66%, 53% 75%, 47% 75%, 42% 66%, 0 66%);
  -webkit-mask: radial-gradient(circle at 50% 37%, #000 var(--r), transparent calc(var(--r) + 14%));
  mask: radial-gradient(circle at 50% 37%, #000 var(--r), transparent calc(var(--r) + 14%));
}

.cc-logo-word {
  --w: -12%;
  clip-path: polygon(0 66%, 42% 66%, 47% 75%, 53% 75%, 58% 66%, 100% 66%, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(to right, #000 var(--w), transparent calc(var(--w) + 12%));
  mask: linear-gradient(to right, #000 var(--w), transparent calc(var(--w) + 12%));
}

/* Four-point glints at the diamond's vertices */
.cc-spark {
  left: var(--x);
  top: var(--y);
  width: 9%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, #e8f6ff 50%, transparent) 50% 50% / 100% 2px no-repeat,
    linear-gradient(0deg, transparent, #e8f6ff 50%, transparent) 50% 50% / 2px 100% no-repeat,
    radial-gradient(circle, rgba(170, 220, 255, .9), transparent 30%);
  filter: drop-shadow(0 0 6px #4aa8ff);
}

.cc-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, 6svh);
  display: grid;
  justify-items: center;
  gap: 10px;
  z-index: 3;
  color: #9fb4c4;
  font: 11px/1.4 SpaceGrotesk, Arial, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cc-copy .cc-cue {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--cc-ice));
  animation: cc-cue 2.2s ease-in-out infinite;
}

@keyframes cc-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.cc-skip {
  position: absolute;
  left: max(16px, 3vw);
  bottom: max(20px, 4svh);
  z-index: 4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(186, 203, 211, .22);
  background: rgba(10, 18, 26, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #dfe9f1;
  font: 12px SpaceGrotesk, Arial, sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
}

.cc-skip:hover { border-color: rgba(157, 199, 232, .55); }
.cc-skip:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 3px; }

@media (max-width: 760px) {
  .cc-copy { bottom: 92px; }
  .cc-skip { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-float, .cc-crystal-sheen, .cc-copy .cc-cue { animation: none; }
}

/* "Scroll down": a gently lit hint just above the crystal, shown after a pause (cc-intro.js) */
.cc-hint {
  position: absolute;
  left: 50%;
  top: calc(50svh - min(37svh, 45vw) - 34px);
  margin: 0;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  font: 500 11px/1 SpaceGrotesk, Arial, sans-serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #d9f0ff;
}
.cc-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.cc-hint span {
  padding-left: .42em; /* balances the trailing letter-spacing */
  text-shadow: 0 0 10px rgba(80, 170, 255, .9), 0 0 26px rgba(47, 140, 255, .55);
}
.cc-hint.is-on span { animation: cc-hint-glow 2.8s ease-in-out infinite; }
.cc-hint i {
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(190, 228, 255, .9), transparent);
  box-shadow: 0 0 8px rgba(80, 170, 255, .8);
}
.cc-hint.is-on i { animation: cc-hint-drop 2.8s ease-in-out infinite; }
@keyframes cc-hint-glow { 50% { opacity: .55; } }
@keyframes cc-hint-drop { 0% { transform: scaleY(.3) translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1) translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-hint span, .cc-hint i { animation: none !important; } }