/* ==========================================================================
   Studio polish: small, brand-led refinements layered on top of studio.css.
   Nothing here changes the studio's structure or copy.
   ========================================================================== */

::selection {
  background: #18cbfe;
  color: #082e4a;
}

/* Keyboard focus that matches the brand, everywhere in the studio. */
.studio a:focus-visible,
.studio button:focus-visible,
.closing-frame a:focus-visible,
header a:focus-visible,
header button:focus-visible {
  outline: 2px solid #18cbfe;
  outline-offset: 4px;
  border-radius: 6px;
}

/* Header: a frosted navy bar once the page moves, so content never collides with the nav. */
header.in-studio {
  transition:
    background-color 0.35s,
    box-shadow 0.35s,
    -webkit-backdrop-filter 0.35s,
    backdrop-filter 0.35s;
}
header.in-studio.scrolled {
  background: rgba(6, 34, 56, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (max-width: 760px) {
  header.in-studio .mobile-menu {
    margin-left: auto;
    padding: 10px 0 10px 14px;
  }
}

/* Hero: the night sky from the journey carries on behind the studio. */
.studio-hero {
  isolation: isolate;
}
.studio-hero::before,
.studio-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.studio-hero::before {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 12%, rgba(200, 238, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 58% 34%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 73% 16%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 86% 48%, rgba(200, 238, 255, 0.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 8%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 6% 80%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 35% 86%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 74%, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 420px 420px;
  opacity: 0.7;
  animation: studio-stars 90s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
.studio-hero::after {
  background: radial-gradient(70% 38% at 50% 112%, rgba(24, 203, 254, 0.28), rgba(24, 203, 254, 0.06) 55%, transparent 75%);
}
@keyframes studio-stars {
  to {
    background-position: 420px -140px;
  }
}

/* Landing in the studio after the rocket: the headline settles in letter by letter. */
@keyframes letter-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes stars-in {
  from {
    opacity: 0;
    transform: scale(1.35);
  }
  to {
    opacity: 0.7;
    transform: none;
  }
}
body.arriving .studio-hero .hover-letter {
  animation: letter-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.12s + var(--li, 0) * 22ms);
}
body.arriving .studio-hero .availability {
  animation: rise-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
body.arriving .studio-hero > p {
  animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
body.arriving .studio-hero .studio-actions {
  animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}
body.arriving .studio-hero::before {
  animation:
    stars-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both,
    studio-stars 90s linear infinite;
}
.studio-hero .sticker {
  transition:
    translate 0.4s ease,
    box-shadow 0.35s,
    scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s;
}
body.arriving:not(.landed) .studio-hero .sticker {
  scale: 0.2;
  opacity: 0;
}
body.arriving .studio-hero .sticker-one {
  transition-delay: 0s, 0s, 0.7s, 0.7s;
}
body.arriving .studio-hero .sticker-two {
  transition-delay: 0s, 0s, 0.85s, 0.85s;
}
body.arriving .studio-hero .sticker-three {
  transition-delay: 0s, 0s, 1s, 1s;
}
body.arriving .studio-hero .sticker-four {
  transition-delay: 0s, 0s, 1.15s, 1.15s;
}

/* Stickers keep their playfulness but no longer sit on top of the headline's letters. */
@media (min-width: 900px) {
  .studio-hero .sticker-one {
    left: calc(50% - min(41vw, 520px));
    top: 21%;
  }
  .studio-hero .sticker-two {
    right: calc(50% - min(43vw, 560px));
    top: 21%;
  }
  .studio-hero .sticker-three {
    left: calc(50% - min(47vw, 610px));
    top: 47%;
  }
  .studio-hero .sticker-four {
    right: calc(50% - min(44vw, 570px));
    top: 59%;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .studio-hero .sticker-three {
    left: 2%;
  }
  .studio-hero .sticker-four {
    right: 2%;
    top: 54%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-hero::before {
    animation: none !important;
  }
  body.arriving .studio-hero .hover-letter,
  body.arriving .studio-hero .availability,
  body.arriving .studio-hero > p,
  body.arriving .studio-hero .studio-actions {
    animation: none;
  }
  body.arriving:not(.landed) .studio-hero .sticker {
    scale: 1;
    opacity: 1;
  }
}

/* Direct section navigation clears the fixed studio header. */
#studio-about,#process,#studio-services,#contact { scroll-margin-top: 84px; }
@media(max-width:700px) { .journey-rail button { width: 28px; height: 24px; } .journey-rail { right: 3px; } }