/* Farbound Collective — component styles. Values come from tokens.css; motion lives here. */
:root {
  --ease-film: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur-quick: 160ms;
  --dur-scene: 900ms;
  --dur-drift: 14s;
}

body { margin: 0; font-family: var(--font-sans); background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* superellipse(3) is the corner standard wherever a radius is set. A true circle stays round.
   Browsers without corner-shape get the same outline from js/corners.js. */
*,
*::before,
*::after { corner-shape: superellipse(3); }
.adv-globe,
.adv-globe__sphere,
.adv-globe__halo,
.adv-globe__shell,
.adv-badge::before { corner-shape: round; }
.adv-pad { padding: var(--space-6); }
.adv-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.adv-stack { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* ---------- Button ---------- */
.adv-btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-film), color var(--dur-quick) var(--ease-film), border-color var(--dur-quick) var(--ease-film), transform var(--dur-quick) var(--ease-film);
}
.adv-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.adv-btn:active { transform: translateY(1px); }
.adv-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.adv-btn--lg { height: 52px; padding: 0 var(--space-8); font-size: 16px; }
/* primary: a warm tint with an orange rim, like a ticked checkbox; ink is cream on night glass, dark on day */
.adv-btn--primary { background: color-mix(in srgb, var(--blaze) 46%, transparent); border-color: var(--blaze); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--blaze) 70%, transparent); color: var(--ink); }
.adv-btn--primary:hover { background: color-mix(in srgb, var(--blaze) 62%, transparent); border-color: var(--blaze); }
/* on the cream ground the day blaze tints pink, so the tint takes the bright orange and a fuller mix */
[data-theme="day"] .adv-btn--primary { background: rgba(255, 91, 31, 0.62); border-color: var(--blaze); box-shadow: none; }
[data-theme="day"] .adv-btn--primary:hover { background: rgba(255, 91, 31, 0.78); }
/* night glass nested inside a day section (the trip facts) keeps the glass version */
[data-theme="day"] [data-theme="night"] .adv-btn--primary { background: color-mix(in srgb, var(--blaze) 46%, transparent); border-color: var(--blaze); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--blaze) 70%, transparent); }
[data-theme="day"] [data-theme="night"] .adv-btn--primary:hover { background: color-mix(in srgb, var(--blaze) 62%, transparent); border-color: var(--blaze); }
.adv-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.adv-btn--secondary:hover { border-color: var(--ink); }
.adv-btn--ghost { background: transparent; color: var(--ink); padding-inline: 0; height: auto; border-radius: 0; border-bottom: 1px solid var(--blaze); padding-bottom: 2px; }
.adv-btn--ghost:hover { color: var(--blaze); }
.adv-btn--on-image { background: transparent; color: var(--on-image); border-color: rgba(244, 241, 234, 0.6); }
.adv-btn--on-image:hover { background: var(--on-image); color: #070807; }
.adv-btn__arrow { font-family: var(--font-sans); font-weight: 400; transition: transform var(--dur-quick) var(--ease-film); }
.adv-btn:hover .adv-btn__arrow { transform: translateX(3px); }

/* ---------- FieldTag ---------- */
.adv-tag { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.adv-tag__place { color: var(--ink); }
.adv-tag--blaze .adv-tag__place { color: var(--ink); }
.adv-tag--on-image, .adv-tag--on-image .adv-tag__place { color: var(--on-image); }
.adv-tag__sep { display: none; }

/* ---------- Badge ---------- */
.adv-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--ground-raised); color: var(--ink); border: 1px solid var(--line); }
.adv-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adv-badge--blaze { background: var(--blaze-soft); color: var(--blaze); border-color: transparent; }
.adv-badge--glacier { background: var(--glacier-soft); color: var(--glacier); border-color: transparent; }
.adv-badge--dune { background: var(--dune-soft); color: var(--dune); border-color: transparent; }
.adv-badge--neutral::before { display: none; }

/* ---------- Grade ---------- */
.adv-grade { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.adv-grade__bars { display: inline-flex; align-items: flex-end; gap: var(--space-1); }
.adv-grade__bar { width: 6px; border-radius: 1px; background: var(--line); }
.adv-grade__bar.is-on { background: var(--blaze); }
.adv-grade__bar:nth-child(1) { height: 8px; } .adv-grade__bar:nth-child(2) { height: 11px; } .adv-grade__bar:nth-child(3) { height: 14px; } .adv-grade__bar:nth-child(4) { height: 17px; } .adv-grade__bar:nth-child(5) { height: 20px; }
.adv-grade__text b { color: var(--ink); font-weight: 500; }

/* ---------- TripFacts ---------- */
.adv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.adv-facts__item { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--line); }
.adv-facts dt { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); margin-bottom: var(--space-1); }
.adv-facts dd { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- Placeholder landscape (stands in for photography) ---------- */
.adv-scape { display: block; width: 100%; height: 100%; }
.adv-scape .sky { fill: var(--ground-raised); }
.adv-scape .far { fill: var(--line-strong); }
.adv-scape .mid { fill: var(--line); }
.adv-scape .near { fill: var(--ground-sunk); }
.adv-scape .sun { fill: var(--blaze); }
.adv-media { position: relative; overflow: hidden; background: var(--ground-sunk); border-radius: var(--radius-0); }
.adv-media img, .adv-media video, .adv-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- TripCard ---------- */
.adv-card { display: flex; flex-direction: column; background: var(--ground-raised); border-radius: var(--radius-md); overflow: hidden; color: var(--ink); text-decoration: none; max-width: 380px; transition: box-shadow var(--dur-scene) var(--ease-film), transform var(--dur-scene) var(--ease-film); }
.adv-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.adv-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.adv-card .adv-media { aspect-ratio: var(--aspect-card); }
.adv-card:hover .adv-media > * { transform: scale(1.03); }
.adv-card .adv-media > * { transition: transform 1.6s var(--ease-film); }
.adv-card__over { position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-4); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.adv-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.adv-card__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.005em; }
.adv-card__meta { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.adv-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.adv-card__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 22px; }
.adv-card__price small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); letter-spacing: 0.04em; }

/* ---------- Hero (always Night: the cinema is dark) ---------- */
.adv-hero { position: relative; overflow: hidden; background: #070807; color: var(--on-image); min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
.adv-hero__media { position: absolute; inset: 0; }
.adv-hero__media > * { animation: adv-drift var(--dur-drift) var(--ease-film) both; }
.adv-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim) 0%, rgba(7, 8, 7, 0.2) 55%, rgba(7, 8, 7, 0) 75%); }
.adv-hero__bar { position: absolute; left: 0; right: 0; height: 7%; background: #070807; z-index: 2; transition: height var(--dur-scene) var(--ease-film); }
.adv-hero__bar--top { top: 0; } .adv-hero__bar--bottom { bottom: 0; }
.adv-hero__slate { position: absolute; z-index: 3; top: calc(7% + var(--space-4)); left: var(--space-8); right: var(--space-8); display: flex; justify-content: space-between; gap: var(--space-4); }
.adv-hero__content { position: relative; z-index: 3; padding: 0 var(--space-8) calc(7% + var(--space-12)); max-width: 1100px; }
.adv-hero__title { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: clamp(48px, 9vw, 112px); line-height: 0.9; font-weight: 800; font-stretch: 125%; letter-spacing: -0.01em; text-transform: uppercase; }
.adv-hero__lede { margin: var(--space-6) 0 0; max-width: 34ch; font-family: var(--font-serif); font-size: 22px; line-height: 1.45; font-variation-settings: 'opsz' 24; color: var(--on-image); opacity: 0.92; }
.adv-hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.adv-hero .adv-btn--ghost { color: var(--on-image); }
@keyframes adv-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (max-width: 640px) {
  .adv-hero__slate { left: var(--space-4); right: var(--space-4); }
  .adv-hero__content { padding-inline: var(--space-4); }
  .adv-hero__slate .adv-tag:last-child { display: none; }
}

/* ---------- ChapterHeading ---------- */
.adv-chapter { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-4); align-items: start; }
.adv-chapter__index { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--blaze); padding-top: 10px; }
.adv-chapter__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); line-height: 0.95; font-weight: 800; letter-spacing: -0.015em; }
.adv-chapter__lede { margin: var(--space-6) 0 0; max-width: 40ch; font-family: var(--font-serif); font-size: 22px; line-height: 1.45; font-variation-settings: 'opsz' 24; color: var(--ink-muted); }
.adv-chapter--plain { grid-template-columns: 1fr; }
@media (max-width: 640px) { .adv-chapter { grid-template-columns: 1fr; } }

/* ---------- Quote ---------- */
.adv-quote { margin: 0; }
.adv-quote p { margin: 0; max-width: 28ch; font-family: var(--font-serif); font-style: italic; font-size: 32px; line-height: 1.25; font-variation-settings: 'opsz' 36; color: var(--ink); }
.adv-quote footer { margin-top: var(--space-4); }

/* ---------- WaitlistField ---------- */
.adv-wait { max-width: 520px; }
.adv-wait__label { display: block; margin-bottom: var(--space-2); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.adv-wait__row { display: flex; gap: var(--space-2); }
.adv-wait__input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 16px; color: var(--ink); background: var(--ground-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.adv-wait__input::placeholder { color: var(--ink-muted); }
.adv-wait__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.adv-wait__note { margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 480px) { .adv-wait__row { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  .adv-hero__media > *, .adv-card .adv-media > * { animation: none; transition: none; }
  .adv-card, .adv-btn { transition: none; }
}

/* =================== The living layers =================== */

/* ---------- EnergyField ---------- */
.adv-energy { display: block; width: 100%; height: 100%; }

/* ---------- GlassPanel: liquid glass with grain ---------- */
.adv-glass { --mx: 30%; --my: -20%; --lx: -0.6; --ly: -0.8; --ang: -37deg; --near: 0.6; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-glass); color: var(--ink);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35) brightness(1.1) contrast(1.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35) brightness(1.1) contrast(1.05);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -18px 30px -24px rgba(255, 255, 255, 0.25), var(--shadow-glass);
}
.adv-glass--strong { background: var(--glass-fill-strong); }
.adv-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(140deg, var(--glass-edge), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.02) 62%, var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* edge dispersion: the side of the rim facing the light splits warm, the far side cool — it moves with the pointer */
.adv-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.35 + var(--near, 0.5) * 0.65);
  box-shadow: inset calc(var(--lx, -0.6) * -3px) calc(var(--ly, -0.6) * -3px) 3px -2px rgba(255, 80, 90, 0.65), inset calc(var(--lx, -0.6) * -1.5px) calc(var(--ly, -0.6) * -1.5px) 3px -2px rgba(255, 210, 90, 0.5), inset calc(var(--lx, -0.6) * 3px) calc(var(--ly, -0.6) * 3px) 3px -2px rgba(70, 190, 255, 0.35), inset calc(var(--lx, -0.6) * 1.5px) calc(var(--ly, -0.6) * 1.5px) 3px -2px rgba(150, 110, 255, 0.3); }
/* the rim facing the light: a white-hot highlight with warm colours fanning out on one side and cool on the other */
.adv-glass { --spectrum: conic-gradient(from calc(var(--ang, -45deg) - 75deg), transparent 0deg, rgba(150, 90, 255, 0.55) 18deg, rgba(90, 120, 255, 0.85) 36deg, rgba(70, 210, 255, 0.95) 54deg, rgba(235, 252, 255, 1) 75deg, rgba(255, 236, 120, 0.95) 96deg, rgba(255, 150, 60, 0.9) 114deg, rgba(255, 60, 95, 0.75) 132deg, transparent 150deg, transparent 360deg); }
.adv-glass__edge { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: calc(0.4 + var(--near, 0.5) * 0.6); mix-blend-mode: screen; }
.adv-glass__rim { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; filter: blur(0.4px); background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.adv-glass__halo { position: absolute; inset: 0; border-radius: inherit; filter: blur(9px); opacity: 0.6; }
/* the blur is applied to the whole ring after masking, so the colour bleeds softly inward with no hard inner edge */
.adv-glass__halo-ring { position: absolute; inset: 0; border-radius: inherit; padding: 4px; background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* prism grain: sparse specks, each split into a tiny spectrum like light through a bead of glass */
.adv-glass__grain, .adv-glass__glint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.24' numOctaves='1' seed='9' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  22 0 0 0 -16.2' result='s'/%3E%3CfeColorMatrix in='s' values='0 0 0 0 1  0 0 0 0 0.25  0 0 0 0 0.35  0 0 0 0.9 0' result='r0'/%3E%3CfeOffset in='r0' dx='2' dy='1.3' result='r'/%3E%3CfeColorMatrix in='s' values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.2  0 0 0 0.7 0' result='y0'/%3E%3CfeOffset in='y0' dx='0.7' dy='0.45' result='y'/%3E%3CfeColorMatrix in='s' values='0 0 0 0 0.2  0 0 0 0 1  0 0 0 0 0.75  0 0 0 0.7 0' result='g0'/%3E%3CfeOffset in='g0' dx='-0.7' dy='-0.45' result='g'/%3E%3CfeColorMatrix in='s' values='0 0 0 0 0.3  0 0 0 0 0.55  0 0 0 0 1  0 0 0 0.9 0' result='b0'/%3E%3CfeOffset in='b0' dx='-2' dy='-1.3' result='b'/%3E%3CfeBlend in='r' in2='y' mode='screen' result='ry'/%3E%3CfeBlend in='g' in2='b' mode='screen' result='gb'/%3E%3CfeBlend in='ry' in2='gb' mode='screen'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.adv-glass__grain { opacity: 0.12; filter: grayscale(1); }
.adv-glass__glint { opacity: calc(0.35 + var(--near, 0.5) * 0.65); filter: brightness(2.2) saturate(1.8); -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 80%); mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 80%); }
.adv-glass__shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--glass-shine), transparent 45%); transition: background-position var(--dur-quick); }
.adv-glass__content { position: relative; z-index: 4; padding: var(--space-6); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }

/* ---------- ParallaxScene ---------- */
.adv-parallax { position: relative; overflow: hidden; background: #070807; color: var(--on-image); }
.adv-parallax__layer { position: absolute; inset: -6%; pointer-events: none; }
.adv-parallax__layer > img, .adv-parallax__layer > svg, .adv-parallax__layer > canvas, .adv-parallax__layer > .adv-weather { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-parallax__energy { opacity: var(--energy); mix-blend-mode: screen; }
.adv-parallax__fore { filter: blur(2px); }
.adv-parallax__content { position: absolute; inset: 0; z-index: 10; }

/* ---------- Plane ---------- */
.adv-plane { display: block; width: 120px; height: 60px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); }
.adv-plane--img { width: 140px; height: auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.45)); }
.adv-plane .body { fill: #f4f1ea; } .adv-plane .wing { fill: #d9d6ce; } .adv-plane .engine { fill: #8e9188; } .adv-plane .stripe { fill: var(--blaze); }

/* ---------- GlobeCTA ---------- */
.adv-globe { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-full); perspective: 800px; -webkit-tap-highlight-color: transparent; isolation: isolate; }
.adv-globe:focus-visible { outline: 2px solid var(--focus); outline-offset: calc(var(--globe-font) + 16px); }
.adv-globe__sphere { position: absolute; inset: 5%; width: 90%; height: 90%; border-radius: 50%; z-index: 2; transition: transform var(--dur-scene) var(--ease-film); }
.adv-globe__halo { position: absolute; inset: 1%; border-radius: 50%; z-index: 0; background: radial-gradient(circle, transparent 60%, rgba(140, 190, 255, 0.28) 64.5%, rgba(140, 190, 255, 0.08) 68%, transparent 74%); transition: transform var(--dur-scene) var(--ease-film), opacity var(--dur-scene) var(--ease-film); }
.adv-globe.is-hover .adv-globe__halo { transform: scale(1.03); }
.adv-globe__sphere { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
/* a thin liquid-glass shell over the planet: the same material as the panels */
.adv-globe__shell { position: absolute; inset: 5%; border-radius: 50%; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 10px 12px 22px -14px rgba(255, 255, 255, 0.55), inset -8px -10px 20px -14px rgba(120, 200, 255, 0.35);
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 28%), radial-gradient(ellipse 70% 34% at 50% 54%, rgba(4, 12, 26, 0.34), rgba(4, 12, 26, 0) 100%); }
.adv-globe__char { --lit: 1; position: absolute; left: 50%; top: 50%; pointer-events: none; font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: var(--globe-font); line-height: 1; letter-spacing: 0; white-space: pre; transform-style: preserve-3d; backface-visibility: visible; will-change: transform; }
/* the extruded body: stacked copies stepping back and down, plain grey into near-black, dimmed as the letter turns from the light */
.adv-globe__ext { position: absolute; left: 0; top: 0; color: color-mix(in srgb, var(--ext) calc(var(--lit) * 100%), #06080b); }
/* the deepest layer casts the shadow onto the planet: tight to keep the edge crisp on bright land, wide to lift it off */
.adv-globe__ext--back { text-shadow: 0 0.04em 0.05em rgba(4, 12, 26, 0.7), 0 0.14em 0.45em rgba(4, 12, 26, 0.55); }
/* the face: plain solid white, greying as it goes round the far side into the planet's shadow */
.adv-globe__face { position: relative; display: block; color: color-mix(in srgb, #ffffff calc(100% - var(--far, 0) * 60%), #4f5863); }
.adv-globe__planewrap { position: absolute; left: 50%; top: 50%; width: 52%; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) translateX(-82%) scale(0.5); transition: opacity 250ms var(--ease-film); }
/* hover: the plane comes round from behind the globe's left edge and flies to the middle — level, nose pointing straight right, growing as it nears */
.adv-globe.is-hover .adv-globe__planewrap { opacity: 1; transition: none; animation: adv-emerge 1100ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
.adv-globe.is-leave .adv-globe__planewrap { opacity: 1; transition: none; animation: adv-depart 900ms cubic-bezier(0.45, 0, 0.7, 1) forwards; }
/* leave: the mirror of the arrival — from the middle it flies on to the right, shrinking as it rounds the far horizon, and slips out of sight at the globe's right edge */
@keyframes adv-depart {
  0% { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(82%) scale(0.5); }
}
.adv-globe.is-launch .adv-globe__planewrap { opacity: 1; transition: none; transform: translate(-50%, -50%); }
@keyframes adv-emerge {
  0% { transform: translate(-50%, -50%) translateX(-82%) scale(0.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(0) scale(1); opacity: 1; }
}
.adv-globe__plane { display: block; width: 100%; height: auto; }
.adv-globe.is-hover .adv-globe__plane { animation: adv-breathe 3.2s ease-in-out 1100ms infinite; }
.adv-globe.is-launch .adv-globe__plane { animation: adv-takeoff 620ms cubic-bezier(0.45, 0, 0.75, 0.45) forwards; }
@keyframes adv-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes adv-takeoff { 0% { transform: none; } 100% { transform: translateX(120vw) scale(1.8); } }
.adv-globe.is-launch .adv-globe__sphere { transform: scale(0.96); }

/* ---------- ZipperReveal ---------- */
.adv-zip { position: relative; overflow: hidden; }
.adv-zip__front { position: relative; }
.adv-zip.is-done .adv-zip__front { visibility: hidden; }
.adv-zip__back { position: absolute; inset: 0; z-index: 20; }
.adv-zip__plane { position: absolute; left: 0; top: 50%; z-index: 22; opacity: 0; pointer-events: none; }
.adv-zip__plane .adv-plane { width: 240px; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.5)) drop-shadow(-60px 0 30px rgba(255, 91, 31, 0.35)); }

@media (prefers-reduced-motion: reduce) {
  .adv-globe__plane, .adv-globe__planewrap { animation: none !important; }
  .adv-globe.is-hover .adv-globe__planewrap { transform: translate(-50%, -50%); }
  .adv-globe__plane { transition: none; }
}

/* ---------- Weather ---------- */
.adv-weather { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.adv-weather canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.adv-weather__prism { z-index: 1; }
.adv-glass__weather { z-index: 1; border-radius: inherit; overflow: hidden; }

/* ---------- Destination switcher (glass chips) ---------- */
.adv-chips { display: inline-flex; gap: 6px; padding: 5px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.adv-chip { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--on-image); background: transparent; border: 0; padding: 8px 14px; border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--dur-quick) var(--ease-film), color var(--dur-quick) var(--ease-film); }
.adv-chip:hover { background: rgba(255, 255, 255, 0.1); }
.adv-chip[aria-pressed="true"] { background: var(--on-image); color: #070807; }
.adv-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.adv-rise { animation: adv-rise var(--dur-scene) var(--ease-film) both; }
@keyframes adv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- ParallaxScene, photo mode ---------- */
.adv-parallax__photo { animation: adv-photo-in 1.2s var(--ease-film) both; }
@keyframes adv-photo-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
.adv-parallax__tint { mix-blend-mode: soft-light; opacity: 0.8; }
.adv-parallax__shade { background: linear-gradient(90deg, rgba(7, 8, 7, 0.72) 0%, rgba(7, 8, 7, 0.35) 42%, rgba(7, 8, 7, 0) 70%), linear-gradient(0deg, rgba(7, 8, 7, 0.7) 0%, rgba(7, 8, 7, 0) 38%), linear-gradient(180deg, rgba(7, 8, 7, 0.45) 0%, rgba(7, 8, 7, 0) 18%); }
@media (prefers-reduced-motion: reduce) { .adv-parallax__photo { animation: none; } }

/* ---------- Weather grades the photograph ---------- */
.adv-parallax__layer:first-child { transition: filter 1.6s var(--ease-film); }
.adv-parallax--wx-clear .adv-parallax__layer:first-child { filter: brightness(1.06) saturate(1.12) contrast(1.03); }
.adv-parallax--wx-cloudy .adv-parallax__layer:first-child { filter: brightness(0.9) saturate(0.72) contrast(0.95); }
.adv-parallax--wx-fog .adv-parallax__layer:first-child { filter: brightness(0.95) saturate(0.6) contrast(0.82); }
.adv-parallax--wx-rain .adv-parallax__layer:first-child { filter: brightness(0.82) saturate(0.85); }
.adv-parallax--wx-storm .adv-parallax__layer:first-child { filter: brightness(0.62) saturate(0.7) contrast(1.12); }
.adv-parallax--wx-snow .adv-parallax__layer:first-child { filter: brightness(0.95) saturate(0.85); }
.adv-parallax--wx-blizzard .adv-parallax__layer:first-child { filter: brightness(1.02) saturate(0.55) contrast(0.8); }
.adv-parallax--wx-dust .adv-parallax__layer:first-child { filter: sepia(0.25) saturate(1.1) brightness(0.95); }
.adv-parallax--wx-night .adv-parallax__layer:first-child, .adv-parallax--wx-aurora .adv-parallax__layer:first-child { filter: brightness(0.38) saturate(0.65) hue-rotate(-12deg) contrast(1.1); }

/* ---------- Conditions picker ---------- */
.adv-wx { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: var(--space-3); }
.adv-chip--sm { font-size: 14px; padding: 5px 10px; text-align: left; text-transform: capitalize; }

/* Sigil — abstract marks engraved into the glass */
.adv-sigil { display: inline-block; flex: none; line-height: 0; }
.adv-sigil svg { display: block; overflow: visible; }
.adv-sigil g { stroke-width: 1.6px; }
/* the cut: a faint translucent groove */
.adv-sigil__cut { color: rgba(255, 255, 255, 0.26); mix-blend-mode: screen; }
/* the far wall of the groove catches the light (faces the pointer inside a GlassPanel) */
.adv-sigil__lit { color: rgba(255, 255, 255, calc(0.22 + var(--near, 0.4) * 0.34)); stroke-width: 0.8px; transform: translate(calc(var(--lx, -0.6) * 0.7px), calc(var(--ly, -0.8) * 0.7px)); }
/* the near wall falls into shadow */
.adv-sigil__shade { color: rgba(0, 0, 0, 0.28); stroke-width: 1.2px; transform: translate(calc(var(--lx, -0.6) * -0.9px), calc(var(--ly, -0.8) * -0.9px)); }

/* GlassStat — a fact on glass */
.adv-stat .adv-glass__content { padding: 21px 18px 21px 16px; }
.adv-stat__row { display: flex; align-items: center; gap: 14px; }
.adv-stat__text { display: flex; flex-direction: column; min-width: 0; }
.adv-stat__label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--on-image); opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-stat__value { margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: 26px; line-height: 30px; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--on-image); white-space: nowrap; }
.adv-stat__value--long { font-size: 19px; line-height: 30px; letter-spacing: -0.005em; }
