/* sky.css — the sky every page stands on.
 *
 * Amit's Claude Design files "Surreal Win Win grainy" and "Surreal About" (project
 * "Website color palette redesign directions", October 2026): a sky from blue to cream
 * and back, a sun and a moon, film grain, Anton headlines and tilted pill buttons.
 *
 * This is the part every page shares, taken out of ww-sky.css when the rest of the site
 * moved onto the sky. A page opts in with `class="sky"` on <body> and loads this AFTER
 * site.css. The product page adds ww-sky.css for its own parts; the other pages add
 * sky-pages.css for theirs.
 *
 * No inline styles anywhere: `style-src self` drops them silently. The grain is a file,
 * not a data: URI, and it is painted once as part of the page background rather than as a
 * blended overlay, which costs a phone nothing while scrolling.
 */

body.sky {
  --sky-ink: #121a2b;
  --sky-ink-2: #1f2a40;
  --sky-ink-3: #2b3448;
  --sky-cream: #fbf8f1;
  --sky-orange: #e5831f;
  --sky-orange-ink: #a24f08;
  --sky-purple: #6f4bab;
  --sky-purple-ink: #4c2f86;
  --sky-display: "Anton", "Archivo", Impact, "Arial Narrow", sans-serif;
  --sky-wide: min(1240px, calc(100% - 40px));

  position: relative;
  color: var(--sky-ink);
  /* Stops in percent, so a short page still reaches the cream. The product page is long
     enough to want its own stops in pixels (ww-sky.css). */
  background:
    url("/assets/brand/film-grain.svg") 0 0 / 220px 220px repeat,
    linear-gradient(180deg, #4f8fdc 0%, #7fb1e8 16%, #b5d2f1 36%, #dbe8f4 56%, #efe8dc 76%, #c9dcf1 100%);
  background-color: #dbe8f4;
}

/* site.css paints a fixed white wash and a blended noise layer over every page, and the
   older pages float coloured orbs. The sky replaces all three, and a fixed blended layer
   is the last thing a phone needs while scrolling. */
body.sky::before,
body.sky::after,
body.sky .site-orbs { display: none; }

body.sky a { color: inherit; text-underline-offset: 4px; }
body.sky a:hover { color: var(--sky-purple-ink); }
body.sky main,
body.sky .site-footer { position: relative; z-index: 1; }

/* ── the sky ───────────────────────────────────────────────────────────────── */
/* Never taller than the page itself, or a short page would grow a scroll of empty sky. */
.sky-scene {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: min(1500px, 100%);
  overflow: hidden;
  pointer-events: none;
}

.sky-sun,
.sky-moon {
  position: absolute;
  right: 7%;
  width: clamp(96px, 12vw, 180px);
  aspect-ratio: 2;
}

.sky-sun {
  top: 132px;
  border-radius: 999px 999px 0 0;
  background: var(--sky-orange);
  box-shadow: 0 0 120px rgba(229, 131, 31, .55);
}

.sky-moon {
  top: calc(132px + clamp(48px, 6vw, 90px) + 12px);
  margin-right: -18px;
  border-radius: 0 0 999px 999px;
  background: var(--sky-purple);
}

.sky-cloud {
  position: absolute;
  aspect-ratio: 3.6;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35) 55%, transparent);
}

.sky-cloud-1 { top: 1%; left: -30%; width: clamp(300px, 46vw, 640px); }
.sky-cloud-2 { top: 18%; left: 50%; width: clamp(280px, 40vw, 560px); opacity: .8; }
.sky-cloud-3 { top: 38%; left: -12%; width: clamp(320px, 52vw, 700px); opacity: .7; }
.sky-cloud-4 { top: 58%; left: 46%; width: clamp(300px, 48vw, 660px); opacity: .75; }
.sky-cloud-5 { top: 80%; left: 4%; width: clamp(280px, 44vw, 600px); opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  .sky-sun { animation: sky-float 10s ease-in-out infinite; }
  .sky-moon { animation: sky-float 12s ease-in-out -4s infinite; }
  .sky-cloud { animation: sky-drift 22s ease-in-out infinite alternate; }
  .sky-cloud-2 { animation-duration: 26s; animation-delay: -6s; }
  .sky-cloud-4 { animation-duration: 30s; animation-delay: -11s; }
}

@keyframes sky-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes sky-drift {
  from { transform: translateX(-50px); }
  to { transform: translateX(70px); }
}

@keyframes sky-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) * -.6)); }
}

@keyframes sky-shadow {
  0%, 100% { transform: scaleX(1); opacity: .55; }
  50% { transform: scaleX(.78); opacity: .28; }
}

/* ── header and footer on the sky ──────────────────────────────────────────── */
body.sky .site-header { background: transparent; }
body.sky .brand-logo { width: clamp(104px, 10.5vw, 136px); filter: drop-shadow(0 14px 12px rgba(18, 26, 43, .22)); }
body.sky .brand-kicker { color: #fff; }
body.sky .site-nav a { color: #fff; text-shadow: 0 1px 14px rgba(18, 26, 43, .35); }
body.sky .site-nav a:hover,
body.sky .site-nav a[aria-current="page"] { color: #fff; }
body.sky .header-login,
body.sky .header-account {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sky-cream);
  color: var(--sky-ink);
  font-weight: 700;
  box-shadow: 0 18px 24px -12px rgba(18, 26, 43, .45);
}
body.sky .header-login:hover { background: #fff; color: var(--sky-ink); }

body.sky .site-footer { border-top-color: rgba(18, 26, 43, .18); color: var(--sky-ink-2); }
body.sky .site-footer a,
body.sky .footer-bar a { color: var(--sky-ink-2); }
body.sky .footer-tagline,
body.sky .footer-col-title { color: var(--sky-ink-3); }

/* ── buttons ───────────────────────────────────────────────────────────────── */
/* The sky's pill button. It is called .ww-btn because the product page had it first.
   Purple is the thing to press; cream is the other choice beside it. */
.ww-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: 700 16px/1.1 var(--grotesk);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ww-btn.buy,
.ww-btn.solid {
  background: var(--sky-purple);
  color: #fff;
  box-shadow: 0 26px 28px -16px rgba(60, 30, 110, .7);
  transform: rotate(-2deg);
}

.ww-btn.ghost {
  background: var(--sky-cream);
  color: var(--sky-ink);
  box-shadow: 0 26px 28px -16px rgba(18, 26, 43, .5);
  transform: rotate(1.5deg);
}

body.sky .ww-btn.buy:hover,
body.sky .ww-btn.solid:hover { background: #5d3c96; color: #fff; transform: rotate(-2deg) translateY(-2px); }
body.sky .ww-btn.ghost:hover { background: #fff; color: var(--sky-ink); transform: rotate(1.5deg) translateY(-2px); }
.ww-btn[hidden] { display: none; }

/* ── labels ────────────────────────────────────────────────────────────────── */
/* A paper tag stuck on at an angle, over a headline. */
.sky-tag {
  justify-self: start;
  margin: 0 0 14px;
  padding: 7px 12px;
  background: var(--sky-cream);
  color: var(--sky-ink);
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 18px 20px -14px rgba(18, 26, 43, .55);
}

.sky-tag.orange { background: var(--sky-orange); color: #17160f; transform: rotate(3deg); }

.sky-eyebrow {
  margin: 0 0 10px;
  font: 700 12px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sky-eyebrow.purple { color: var(--sky-purple-ink); }
.sky-eyebrow.orange { color: var(--sky-orange-ink); }

@media (max-width: 640px) {
  body.sky .site-header { min-height: 0; padding-bottom: 6px; }
  body.sky .brand-kicker { display: none; }
}