@charset "UTF-8";
/* ============================================
   COMING SOON - page-specific rules
   Loaded after styles.css. Reuses shared tokens,
   nav, cursor, preloader, marquee, pill and
   contact-footer from styles.css; everything below
   is unique to the stage/arc/unicorn hero.
============================================ */

.cs-stage {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 78vh, 780px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 80px;
  isolation: isolate;
}

/* Ambient atmosphere behind everything - layered for depth */
.cs-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 66% 50% at 50% 30%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse 86% 68% at 50% 40%, rgba(255, 255, 255, 0.14), transparent 50%),
    radial-gradient(ellipse 108% 82% at 50% 55%, rgba(255, 255, 255, 0.05), transparent 55%);
  animation: cs-glow-breathe 8s ease-in-out infinite;
}
[data-theme="light"] .cs-glow {
  background:
    radial-gradient(ellipse 66% 50% at 50% 30%, rgba(255, 244, 214, 0.5), transparent 85%),
    radial-gradient(ellipse 86% 68% at 50% 40%, rgba(255, 236, 176, 0.3), transparent 82%),
    radial-gradient(ellipse 108% 82% at 50% 55%, rgba(255, 229, 153, 0.12), transparent 85%);
}
@keyframes cs-glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

/* Ambient stars */
.cs-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cs-star {
  position: absolute;
  background: var(--fg);
  color: var(--fg);
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  /* Per-star rotation is baked into --star-rot and applied inside every
     keyframe step below (alongside the twinkle scale), so each star
     sits at a fixed, natural angle instead of all pointing the same way. */
}
[data-theme="light"] .cs-star {
  background: var(--muted);
  color: var(--muted);
}

/* Star-point shapes - 4, 6 and 8 point sparkles mixed randomly per
   star in background.js, instead of one uniform point count. */
.cs-star--pt4 {
  clip-path: polygon(50% 0%, 60.6% 39.4%, 100% 50%, 60.6% 60.6%, 50% 100%, 39.4% 60.6%, 0% 50%, 39.4% 39.4%);
}
.cs-star--pt6 {
  clip-path: polygon(50% 0%, 65% 24%, 93.3% 25%, 80% 50%, 93.3% 75%, 65% 76%, 50% 100%, 35% 76%, 6.7% 75%, 20% 50%, 6.7% 25%, 35% 24%);
}
.cs-star--pt8 {
  clip-path: polygon(50% 0%, 63.4% 17.7%, 85.4% 14.6%, 82.3% 36.6%, 100% 50%, 82.3% 63.4%, 85.4% 85.4%, 63.4% 82.3%, 50% 100%, 36.6% 82.3%, 14.6% 85.4%, 17.7% 63.4%, 0% 50%, 17.7% 36.6%, 14.6% 14.6%, 36.6% 17.7%);
}

/* Three irregular flicker patterns (not one smooth sine) - randomly
   assigned per star in background.js, along with random delay/duration,
   so the sparkle reads as glitter rather than uniform breathing.
   Glow uses filter:drop-shadow rather than box-shadow, since box-shadow
   gets clipped away by clip-path on a star-shaped element. */
.cs-star--a { animation-name: cs-glitter-a; }
.cs-star--b { animation-name: cs-glitter-b; }
.cs-star--c { animation-name: cs-glitter-c; }

@keyframes cs-glitter-a {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
  4% { opacity: calc(var(--star-o, 0.5) * 1.3); transform: scale(1.15) rotate(var(--star-rot, 0deg)); filter: drop-shadow(0 0 5px currentColor); }
  8% { opacity: 0.08; transform: scale(0.6) rotate(var(--star-rot, 0deg)); filter: none; }
  13% { opacity: var(--star-o, 0.5); transform: scale(1) rotate(var(--star-rot, 0deg)); filter: drop-shadow(0 0 3px currentColor); }
  19% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
}

@keyframes cs-glitter-b {
  0%, 58% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
  64% { opacity: var(--star-o, 0.5); transform: scale(1) rotate(var(--star-rot, 0deg)); filter: drop-shadow(0 0 4px currentColor); }
  70% { opacity: 0.06; transform: scale(0.6) rotate(var(--star-rot, 0deg)); filter: none; }
  76% { opacity: calc(var(--star-o, 0.5) * 1.2); transform: scale(1.1) rotate(var(--star-rot, 0deg)); filter: drop-shadow(0 0 5px currentColor); }
  84%, 100% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
}

@keyframes cs-glitter-c {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
  10% { opacity: var(--star-o, 0.5); transform: scale(1) rotate(var(--star-rot, 0deg)); }
  15% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); }
  42% { opacity: calc(var(--star-o, 0.5) * 0.75); transform: scale(0.9) rotate(var(--star-rot, 0deg)); }
  47% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); }
  72% { opacity: var(--star-o, 0.5); transform: scale(1.08) rotate(var(--star-rot, 0deg)); filter: drop-shadow(0 0 4px currentColor); }
  79% { opacity: 0; transform: scale(0.5) rotate(var(--star-rot, 0deg)); filter: none; }
}

/* ============================================
   ARC - the hero's dominant visual element.
   Purely decorative and fixed; carries no
   positional relationship to the unicorn.
============================================ */
.cs-arc {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateY(180px);
  /* No edge mask here - the left/right fade to 0% opacity is baked
     into the arc's own stroke gradient (see arc.js) so it lines up
     exactly with the stroke, not an independent rectangular fade. */
}
.cs-arc svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The arc's fill ("planet body" beneath the horizon line) is painted
   entirely via the csArcFillFade gradient set up in arc.js - var(--bg),
   100% opacity at the apex fading to 0% toward the bottom - so there's
   no separate .cs-arc-fill CSS rule needed here. */

/* Bloom at the arc's apex - a small, soft point of light that only
   illuminates the immediate area around the apex. No wide halo.
   Sits behind the arc's svg (lower z-index) so the crisp line and its
   glow render on top of the bloom, not the other way round. */
.cs-arc-bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    transparent 70%
  );
  mix-blend-mode: screen;
  animation: cs-bloom-pulse 5s ease-in-out infinite;
}
[data-theme="light"] .cs-arc-bloom {
  mix-blend-mode: normal;
  opacity: 0.55;
}
@keyframes cs-bloom-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.94); }
}

/* Copy block */
.cs-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  transform: translateY(-100px);
}

.cs-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: clamp(0.5em, 3.2vw, 2em);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cs-heading {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 6.4vw, 62px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cs-heading .tl {
  overflow: hidden;
  display: block;
}
.cs-heading .tl span {
  display: block;
  transform: translateY(110%);
}

.cs-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  font-weight: 300;
  max-width: 460px;
}

.cs-hint {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.55;
  margin-top: 2px;
}

#hero{
  min-height: 80svh;
}

/* ============================================
   UNICORN - free-floating viewport companion.
   position:fixed so it can be dragged anywhere
   on the page, independent of the hero/arc.
============================================ */
.cs-unicorn {
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  padding: 0;
  touch-action: none;
  cursor: grab;
  /* JS drives the full transform (translate + centering offset) each
     frame - compositor-only, no layout thrash at 60fps */
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cs-unicorn.is-ready {
  opacity: 1;
}
.cs-unicorn.is-dragging,
.cs-unicorn:active {
  cursor: grabbing;
}
.cs-unicorn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 50%;
}

.cs-unicorn-img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 55%;
  animation: cs-idle-float 4.5s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* While dragging/coasting/settling, JS drives .cs-unicorn-img's
   transform directly (velocity-based tilt + squash/stretch) - the
   CSS idle keyframe just needs to get out of the way */
.cs-unicorn.is-moving .cs-unicorn-img {
  animation: none;
}
.cs-unicorn.is-dragging .cs-unicorn-img {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.cs-unicorn.is-hover .cs-unicorn-img {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 14px rgba(255, 122, 92, 0.5));
}

/* Idle: gentle float + very subtle rotation + breathing scale, combined
   into one keyframe since they all animate `transform` */
@keyframes cs-idle-float {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-7px) rotate(1.6deg) scale(1.015); }
  50% { transform: translateY(-2px) rotate(0deg) scale(1); }
  75% { transform: translateY(-9px) rotate(-1.6deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

.cs-unicorn.is-hopping .cs-unicorn-img {
  animation: cs-hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cs-hop {
  0% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-14px) scaleY(1.08); }
  60% { transform: translateY(0) scaleY(0.92); }
  100% { transform: translateY(0) scaleY(1); }
}

.cs-unicorn.anim-jump .cs-unicorn-img {
  animation: cs-jump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cs-jump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-32px) rotate(-6deg); }
  70% { transform: translateY(0) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

.cs-unicorn.anim-spin .cs-unicorn-img {
  animation: cs-spin 0.6s ease-in-out;
}
@keyframes cs-spin {
  to { transform: rotate(360deg); }
}

.cs-unicorn.anim-bounce .cs-unicorn-img {
  animation: cs-bounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cs-bounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-14px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-8px); }
  80% { transform: translateY(0); }
}

/* Particle trail + burst - three visual variants mixed for a
   stars/sparkles/soft-dots feel */
.cs-particle {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
}
.cs-particle--sparkle {
  box-shadow: 0 0 6px 1px currentColor;
}
.cs-particle--star {
  box-shadow: 0 0 8px 2px currentColor;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.cs-particle--dot {
  filter: blur(1.5px);
  opacity: 0.6;
}
.cs-particle-trail {
  animation: cs-particle-float var(--pdur, 1.3s) ease-out forwards;
}
@keyframes cs-particle-float {
  0% { opacity: var(--p-o, 0.9); transform: translate(0, 0) scale(1); }
  100% {
    opacity: 0;
    transform: translate(var(--px, 0), calc(var(--py, 0) - 26px)) scale(0.25);
  }
}
.cs-particle-burst {
  animation: cs-particle-burst 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cs-particle-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 0), var(--py, 0)) scale(0.2); }
}

/* Status pills relocated near the contact section */
.cs-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

/* Contact section */
.cs-contact {
  padding: 80px 44px 0;
}

.cs-contact-title {
  font-family: "Syne", sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 20px 0 40px;
  overflow: hidden;
  max-width: 640px;
}
.cs-contact-title .tl {
  overflow: hidden;
  display: block;
}
.cs-contact-title .tl span {
  display: block;
  transform: translateY(110%);
}

@media (max-width: 900px) {
  .cs-stage {
    padding: 90px 20px 72px;
    min-height: clamp(520px, 82vh, 680px);
  }
  .cs-unicorn {
    width: 52px;
    height: 52px;
  }
  .cs-contact {
    padding: 64px 24px 0;
  }
}

@media (max-width: 480px) {
  .cs-unicorn {
    width: 44px;
    height: 44px;
  }
  .cs-hint {
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-glow {
    animation: none;
  }
  .cs-star {
    animation: none;
    opacity: var(--star-o, 0.35);
    transform: rotate(var(--star-rot, 0deg));
  }
  .cs-arc-bloom {
    animation: none;
  }
  .cs-unicorn-img {
    animation: none !important;
  }
  .cs-unicorn {
    transition: none;
  }
  .cs-heading .tl span,
  .cs-contact-title .tl span {
    transform: none !important;
  }
}