/* ============================================================
   ON SATURI — style.css
   ------------------------------------------------------------
   Token system, kept at the top so it's easy to retune later.
   ============================================================ */

:root {
  /* --- color: pulled from the artwork itself --- */
  --void:        #0a0c14;   /* deep space background */
  --void-deep:   #05060b;   /* darkest, used for gradients/edges */
  --glow:        #e9b978;   /* warm amber, the galaxy's core */
  --glow-soft:   #f5dfb4;   /* pale cream highlight, used sparingly */
  --rust:        #6c463c;   /* dust-lane maroon, used for hairlines */
  --star:        #a7cddb;   /* cool star teal, used for tiny accents */
  --ink:         #efe8d9;   /* warm off-white, primary text */
  --muted:       #8b93a6;   /* cool muted grey-blue, secondary text */

  /* --- rocket icon palette, drawn from the reference sketch --- */
  --rocket-cream:  #ede2cd;
  --rocket-pink:   #cf9fa3;
  --rocket-pink-dk:#b9848c;
  --rocket-window: #232a42;
  --rocket-ring:   #a8895f;
  --rocket-star:   #d8a94e;
  --rocket-leaf:   #8a9a72;

  /* --- type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --edge: clamp(1.5rem, 6vw, 3rem);
  --grain-tile: url("assets/grain.png");
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  color-scheme: dark;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; -webkit-tap-highlight-color: transparent; }

::selection {
  background: var(--rust);
  color: var(--glow-soft);
}

/* Visible keyboard focus, everywhere */
:focus-visible {
  outline: 1px solid var(--star);
  outline-offset: 4px;
}

/* ============================================================
   Layout
   ============================================================ */

main {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Hero — full-bleed artwork, the entire page
   ============================================================ */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

.window {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.9s ease-out 0.15s,
              transform 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.window.is-in {
  opacity: 1;
  transform: scale(1);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--void);
  transform-origin: 50% 45%;
  animation:
    slow-drift 26s ease-in-out infinite alternate 1.4s,
    shimmer-pulse 5.5s ease-in-out infinite 1.4s;
}

@keyframes slow-drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, -1.2%); }
}

@keyframes shimmer-pulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.07) saturate(1.12); }
}

/* twinkle layer — bright little sparkles composited over the
   painted stars already in the artwork, screen-blended so
   they read as light rather than paint */
#twinkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.6s ease 1.1s;
  pointer-events: none;
}

.window.is-in #twinkle {
  opacity: 1;
}

/* ============================================================
   Screen-reader-only heading — no visible wordmark, but the
   page still has a real H1 for accessibility and SEO
   ============================================================ */

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

/* ============================================================
   Grain — a faint texture over the whole scene so flat digital
   gradients read as hand-crafted rather than plain
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: var(--grain-tile);
  background-size: 128px 128px;
}

/* ============================================================
   Hero text — the rocket-link, quietly overlaid at the bottom
   ============================================================ */

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 10vh var(--edge) 6vh;

  background: linear-gradient(to bottom, transparent, rgba(5, 6, 11, 0.6) 75%);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 1.3s ease 1.3s, transform 1.3s ease 1.3s;
}

.window.is-in ~ .hero-text {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ig-rocket {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--glow-soft);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s ease;
  animation: rocket-idle 4.6s ease-in-out infinite;
}

.ig-rocket:hover,
.ig-rocket:focus-visible {
  transform: scale(1.08);
}

.ig-rocket:hover .rocket-svg,
.ig-rocket:focus-visible .rocket-svg {
  filter: drop-shadow(0 0 8px rgba(233, 185, 120, 0.45));
}

.rocket-svg {
  width: 76px;
  height: 106px;
  flex-shrink: 0;
}

.rocket-flame {
  transform-origin: 30px 66px;
  animation: flame-flicker 0.9s ease-in-out infinite;
}

@keyframes rocket-idle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(1.25); opacity: 0.55; }
}

.ig-rocket.is-blinking {
  animation: rocket-blink 0.5s ease-in-out 4;
}

@keyframes rocket-blink {
  0%, 100% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 6px rgba(233, 185, 120, 0.4));
  }
  50% {
    opacity: 0.5;
    filter: brightness(1.12) drop-shadow(0 0 20px rgba(233, 185, 120, 0.8));
  }
}

.spark {
  position: fixed;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--glow-soft);
  pointer-events: none;
  animation: spark-fall 0.7s ease-out forwards;
}

@keyframes spark-fall {
  0%   { opacity: 0.9; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx, 0), 40px) scale(0.3); }
}

/* ============================================================
   Reduced motion — respected fully
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .window {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero-image { animation: none; }
  #twinkle { transition: none; opacity: 0.6; }
  .hero-text { transition: none; opacity: 1; transform: none; }
  .ig-rocket { animation: none; }
  .rocket-flame { animation: none; }
}