/* CloudLab finishing layer, loaded last on every page.
   Self-hosted type, smoother motion, and loading polish. It refines the existing
   design; it does not restyle it. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arial tuned to Inter's measurements, so text does not jump when the font arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

:root {
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: rgba(104, 208, 223, .26) #040a0f;
  scrollbar-gutter: stable;
}
body {
  font-family: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
::selection { background: rgba(104, 208, 223, .3); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #040a0f; }
::-webkit-scrollbar-thumb { border: 3px solid #040a0f; border-radius: 999px; background: rgba(104, 208, 223, .24); }
::-webkit-scrollbar-thumb:hover { background: rgba(104, 208, 223, .4); }

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline-offset: 3px; transition: outline-offset .15s var(--ease-premium); }

/* Smooth scrolling: the grain overlay used a full-screen blend mode, which made the
   browser repaint the whole page on every scroll frame. A plain overlay looks the same. */
body::after { mix-blend-mode: normal !important; opacity: .045 !important; }
body::before, body::after { transform: translateZ(0); }

/* Page-to-page fade instead of a hard white/black flash (Chrome, Edge, Safari 18+). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease-soft); }
.site-header, .hub-header, .account-header { view-transition-name: cloudlab-header; }
::view-transition-group(cloudlab-header) { animation-duration: .32s; animation-timing-function: var(--ease-premium); }

/* Scroll reveals glide in rather than pop. */
.reveal.is-reveal-pending {
  transition: opacity .75s var(--ease-premium) var(--delay, 0ms), transform .9s var(--ease-premium) var(--delay, 0ms) !important;
}
.reveal.is-reveal-pending:not(.visible) { opacity: 0; transform: translate3d(0, 22px, 0); }

/* Images fade in as they arrive instead of appearing line by line. */
img.cl-fade { opacity: 0; transition: opacity .55s var(--ease-soft); }
img.cl-fade.is-loaded { opacity: 1; }

/* Buttons and links: a little more weight under the finger. */
.button, .project-button, .header-cta, .studio-strip a, .hero-links a, .social-grid a,
.auth-submit, .secondary-button, .card-link, .filter-button, .hub-button, .game-button,
.project-slider-controls button {
  transition-timing-function: var(--ease-premium) !important;
}
.button:active, .project-button:active, .header-cta:active, .studio-strip a:active, .hero-links a:active,
.social-grid a:active, .auth-submit:active, .secondary-button:active, .filter-button:active,
.project-slider-controls button:active {
  transform: translateY(0) scale(.975) !important;
  transition-duration: .08s !important;
}
.button.primary, .header-cta, .studio-strip a, .auth-submit { position: relative; overflow: hidden; isolation: isolate; }
.button.primary::after, .header-cta::after, .studio-strip a::after, .auth-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-premium);
}
.button.primary:hover::after, .header-cta:hover::after, .studio-strip a:hover::after, .auth-submit:hover::after { transform: translateX(120%); }

/* Cards lift on a soft shadow, with a faint cyan rim. */
.gloss-card, .project-card, .connect-card, .game-card, .journal-card, .destination-card, .social-grid a {
  transition-property: transform, border-color, background, box-shadow !important;
  transition-duration: .35s !important;
  transition-timing-function: var(--ease-premium) !important;
}
.gloss-card:hover, .project-card:hover, .game-card:hover, .journal-card:hover, .destination-card:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, .36), 0 0 0 1px rgba(104, 208, 223, .1), 0 0 40px rgba(104, 208, 223, .05);
}
.card-media img, .card-media video, .project-art img, .rocket-banner > img {
  transition: transform .7s var(--ease-premium), filter .4s var(--ease-soft), opacity .55s var(--ease-soft) !important;
}

/* Sticky headers settle smoothly as you scroll. */
.site-header, .hub-header { transition: width .4s var(--ease-premium), top .4s var(--ease-premium), box-shadow .4s var(--ease-premium), background .4s var(--ease-premium), border-color .4s var(--ease-premium) !important; }
.hub-header.is-scrolled { box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }

/* Thin progress bar while the next page is on its way. */
.cl-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cyan, #68d0df), var(--mint, #8bcf9b));
  box-shadow: 0 0 12px rgba(104, 208, 223, .55);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 1.6s var(--ease-premium), opacity .2s ease;
}
.cl-nav-progress.is-active { opacity: 1; transform: scaleX(.82); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  img.cl-fade { opacity: 1; transition: none; }
  .button.primary::after, .header-cta::after, .studio-strip a::after, .auth-submit::after, .cl-nav-progress { display: none; }
  .reveal.is-reveal-pending:not(.visible) { opacity: 1; transform: none; }
  .gloss-card, .project-card, .connect-card, .game-card, .journal-card, .destination-card, .social-grid a,
  .card-media img, .card-media video, .project-art img, .rocket-banner > img { transition: none !important; }
}
@media (hover: none) {
  .button.primary::after, .header-cta::after, .studio-strip a::after, .auth-submit::after { display: none; }
}