/* ============================================================
   Yoonspace — bespoke styles
   Tailwind handles layout/spacing/responsive via the Play CDN.
   This file owns the signature bits: orbit motion, marquee,
   scroll reveals, type details, and the quality floor.
   ============================================================ */

:root {
  --void:       #05060F;
  --ink:        #070811;
  --ink-2:      #11142C;
  --paper:      #0E1124;
  --mist:       #161A33;
  --violet:     #7C5CFF;
  --violet-700: #5B3FE6;
  --coral:      #2FC6FF;  /* electric aurora cyan */
  --amber:      #FFD37A;  /* warm starlight */
  --pink:       #FF5DA2;
  --star:       #ECEEFB;
  --muted:      #A0A2CC;
}

/* ---- Base: the cosmos ---- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--void); }
body {
  color: var(--star);
  background: transparent;
  font-feature-settings: "ss01", "cv01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Animated starfield backdrop: nebula glows + two parallax star layers */
.cosmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(124,92,255,0.20), transparent 70%),
    radial-gradient(760px 560px at 2% 108%, rgba(47,198,255,0.14), transparent 70%),
    radial-gradient(700px 700px at 120% 60%, rgba(255,93,162,0.10), transparent 70%),
    var(--void);
}
.stars {
  position: absolute; left: 0; right: 0; top: -360px; bottom: -360px;
  background-repeat: repeat; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='40' r='0.8' opacity='0.8'/%3E%3Ccircle cx='80' cy='120' r='0.6' opacity='0.5'/%3E%3Ccircle cx='140' cy='30' r='1' opacity='0.9'/%3E%3Ccircle cx='210' cy='90' r='0.7' opacity='0.6'/%3E%3Ccircle cx='280' cy='50' r='0.9' opacity='0.7'/%3E%3Ccircle cx='40' cy='200' r='0.7' opacity='0.6'/%3E%3Ccircle cx='110' cy='260' r='0.6' opacity='0.5'/%3E%3Ccircle cx='180' cy='210' r='1' opacity='0.85'/%3E%3Ccircle cx='250' cy='270' r='0.7' opacity='0.6'/%3E%3Ccircle cx='300' cy='180' r='0.8' opacity='0.7'/%3E%3Ccircle cx='160' cy='150' r='0.6' opacity='0.45'/%3E%3Ccircle cx='60' cy='300' r='0.9' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");
}
.stars-a { background-size: 320px 320px; opacity: 0.9; animation: driftA 150s linear infinite; }
.stars-b { background-size: 210px 210px; opacity: 0.5; animation: driftB 95s linear infinite reverse; }
@keyframes driftA { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,320px,0); } }
@keyframes driftB { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,210px,0); } }

::selection { background: var(--coral); color: #04121a; }

/* Every interactive control gets a pointer cursor, not just the ones that remembered to ask */
button:not(:disabled), [role="button"], summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Fluid display type — handles "loads well on any device" for the big headings */
.display-xl { font-size: clamp(2.75rem, 9vw, 7.5rem); line-height: 0.92; letter-spacing: -0.03em; }
.display-lg { font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: 0.95; letter-spacing: -0.025em; }
.display-md { font-size: clamp(1.75rem, 4vw, 3rem);   line-height: 1.0;  letter-spacing: -0.02em; }
.eyebrow {
  font-family: "Space Mono", monospace;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
}

/* ---- Visible focus for keyboard users (quality floor) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Link underline that grows from the start ---- */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); }

/* ---- Buttons ---- */
.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s, color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ============================================================
   Signature: the orbit
   ============================================================ */
.orbit-stage { position: relative; display: inline-block; }
.orbit-body {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px;
  /* an ellipse drawn as a motion path; the body rides it */
  offset-path: path('M 0,-120 A 200,120 0 1,1 0,120 A 200,120 0 1,1 0,-120');
  offset-rotate: 0deg;
  animation: orbit 11s linear infinite;
  will-change: offset-distance;
}
.orbit-body.b2 {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  offset-path: path('M 0,-70 A 260,70 0 1,1 0,70 A 260,70 0 1,1 0,-70');
  animation-duration: 16s; animation-direction: reverse;
}
.orbit-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
@keyframes orbit { to { offset-distance: 100%; } }

/* Floating nav: tighten + add shadow once the page scrolls */
[data-nav][data-stuck] nav {
  box-shadow: 0 12px 40px -12px rgba(22, 20, 33, 0.28);
  background: rgba(244, 242, 236, 0.92);
}

/* Orbit glyph used in the logo */
.logo-orbit { transform-origin: center; }

/* ============================================================
   Marquee
   ============================================================ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; gap: 3.5rem; white-space: nowrap; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Scroll reveal
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Big outlined "space" word treatment */
.outline-word {
  -webkit-text-stroke: 2px var(--star);
  color: transparent;
}
.violet .outline-word { -webkit-text-stroke-color: #fff; }

/* Ticker number for stats */
.stat-num { font-variant-numeric: tabular-nums; }

/* Card lift */
.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.card-lift:hover { transform: translateY(-6px); }

/* Noise/texture-free divider arc */
.arc { stroke: var(--violet); fill: none; }

/* ---- Respect reduced motion: turn the room quiet ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit-body, .marquee__track, .stars { animation: none !important; }
  .orbit-body { offset-distance: 25%; }
  .orbit-body.b2 { offset-distance: 60%; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card-lift:hover { transform: none; }
}

/* ============================================================
   Depth & texture upgrade — lift the design off the flat
   ============================================================ */

/* Fine film grain over everything for richness (very subtle) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Depth shadows + glow so cards float like glass over space */
.card-lift { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 50px -32px rgba(0,0,0,0.85); }
.card-lift:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 60px -28px rgba(124,92,255,0.55), 0 0 0 1px rgba(124,92,255,0.22); }

/* Ambient nebula glow blobs (used behind the hero) */
.hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow-blob { position: absolute; border-radius: 999px; }
.glow-violet { width: 42rem; height: 42rem; top: -16rem; left: -8rem; filter: blur(95px); background: radial-gradient(circle, rgba(124,92,255,0.45), transparent 62%); }
.glow-coral  { width: 34rem; height: 34rem; top: -3rem; right: -10rem; filter: blur(95px); background: radial-gradient(circle, rgba(47,198,255,0.32), transparent 62%); }
.glow-amber  { width: 26rem; height: 26rem; bottom: -16rem; left: 28%; filter: blur(95px); background: radial-gradient(circle, rgba(255,93,162,0.22), transparent 62%); }

/* Top sheen on dark/colour sections so they read as lit surfaces */
.sheen { position: relative; isolation: isolate; }
.sheen > * { position: relative; z-index: 1; }
.sheen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 50% -10%, rgba(255,255,255,0.10), transparent 60%);
}

/* Rich media placeholders: lit surface + orbit rings (until real photos land) */
.thumb { position: relative; isolation: isolate; }
.thumb > * { position: relative; z-index: 1; }
.thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 6%, rgba(255,255,255,0.28), transparent 55%),
    radial-gradient(90% 75% at 94% 98%, rgba(0,0,0,0.24), transparent 60%);
}
.thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='white' stroke-dasharray='2 7'%3E%3Cellipse cx='200' cy='150' rx='185' ry='115' transform='rotate(-8 200 150)'/%3E%3Cellipse cx='200' cy='150' rx='120' ry='72' transform='rotate(-8 200 150)'/%3E%3Cellipse cx='200' cy='150' rx='55' ry='32' transform='rotate(-8 200 150)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}

/* ============================================================
   How-we-work journey (booking page)
   ============================================================ */
.journey { position: relative; list-style: none; margin: 0; padding: 0; }
.journey__step { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding-bottom: 1.25rem; }
.journey__step::before {
  content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: -0.25rem; width: 1px;
  background: linear-gradient(to bottom, rgba(236,238,251,.28), rgba(236,238,251,.08));
}
.journey__step--last { padding-bottom: 0; }
.journey__step--last::before { display: none; }
.journey__badge {
  --c: #7C5CFF;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; flex: none;
  font-family: "Space Mono", ui-monospace, monospace; font-size: .8rem; font-weight: 700;
  color: var(--c); background: #0E1124; border: 1px solid var(--c);
  box-shadow: 0 0 0 4px #070811, 0 0 22px color-mix(in srgb, var(--c) 55%, transparent);
}
.journey__badge--quiet { --c: rgba(236,238,251,.45); box-shadow: 0 0 0 4px #070811; border-color: rgba(236,238,251,.2); }
.journey__card {
  border: 1px solid rgba(255,255,255,.08); background: rgba(14,17,36,.7); border-radius: 1.5rem;
  padding: 1.5rem; transition: border-color .25s ease, transform .25s ease;
}
.journey__step:hover .journey__card { border-color: rgba(255,255,255,.18); transform: translateX(2px); }
@media (min-width: 640px) { .journey__card { padding: 1.75rem 2rem; } .journey__step { gap: 1.5rem; } }

/* ============================================================
   Cal.com booking embed
   ============================================================ */
.cal-embed { position: relative; min-height: 640px; }
.cal-embed__loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 2rem; text-align: center;
}
/* Once Cal.com injects its iframe, hide the loading/fallback panel */
.cal-embed:has(iframe) .cal-embed__loading { display: none; }
.cal-embed iframe { position: relative; z-index: 1; }

/* ============================================================
   Scattered planets (drift + bounce off each other)
   ============================================================ */
.planets-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }