/* ============================================================
   KSHN — "Sky / sticker" brand layer
   The playful identity from the brand wallpaper: cyan sky washes,
   drifting clouds, mountain ridges, hand-drawn echo rings around
   the tins, and the white line-art sticker pattern.

   EVERYTHING here is gated by [data-skin="sky"] (set on <main> in
   app/(public)/page.tsx). Removing that one attribute reverts the
   whole treatment; this sheet stays loaded and inert.
   ============================================================ */

/* Echo rings render in the DOM regardless of the vibe gate — keep them
   invisible unless the sky layer is on. */
.vu-rings { display: none; }

/* ---------------- Hero: the sky canvas ---------------- */
[data-skin="sky"] .hero-sky { background: var(--sky-grad-v); }
[data-skin="sky"] .hero-sun {
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,.16) 48%, rgba(255,255,255,0) 72%);
  filter: blur(6px);
}
[data-skin="sky"] .hero-wordmark { color: rgba(255,255,255,.3); }
[data-skin="sky"] .hero-sub { color: color-mix(in srgb, var(--ink) 88%, #fff); }
[data-skin="sky"] .hero .eyebrow {
  background: #fff; color: var(--ink);
  padding: .35em .9em; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -10px rgba(8,50,59,.45);
}

/* drifting clouds (decor only — transform/opacity, off under reduced motion) */
[data-skin="sky"] .hero-sky::before,
[data-skin="sky"] .hero-sky::after {
  content: ""; position: absolute; pointer-events: none;
  background: url("/design/vibe/cloud-solid.svg") no-repeat center / contain;
}
[data-skin="sky"] .hero-sky::before {
  width: clamp(180px, 22vw, 320px); aspect-ratio: 54/25;
  left: 4%; top: 12%; opacity: .85;
}
[data-skin="sky"] .hero-sky::after {
  width: clamp(120px, 15vw, 230px); aspect-ratio: 54/25;
  right: 8%; top: 7%; opacity: .55;
}
[data-skin="sky"] .hero-deco::after {
  content: ""; position: absolute; pointer-events: none;
  background: url("/design/vibe/cloud-outline.svg") no-repeat center / contain;
  width: clamp(140px, 16vw, 250px); aspect-ratio: 58/29;
  left: 38%; bottom: 14%; opacity: .5;
}
/* floating pouch doodles around the 3D cluster */
[data-skin="sky"] .hero-stage3::before,
[data-skin="sky"] .hero-stage3::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: url("/design/vibe/pouch-doodle.svg") no-repeat center / contain;
  width: clamp(34px, 4vw, 54px); aspect-ratio: 40/26; opacity: .75;
}
[data-skin="sky"] .hero-stage3::before { left: 2%; top: 16%; rotate: -14deg; }
[data-skin="sky"] .hero-stage3::after { right: 4%; bottom: 18%; rotate: 18deg; }

@media (prefers-reduced-motion: no-preference) {
  [data-skin="sky"] .hero-sky::before { animation: vibeDrift 64s ease-in-out infinite alternate; }
  [data-skin="sky"] .hero-sky::after { animation: vibeDrift 48s ease-in-out infinite alternate-reverse; }
  [data-skin="sky"] .hero-deco::after { animation: vibeDrift 80s ease-in-out infinite alternate; }
  [data-skin="sky"] .hero-stage3::before { animation: vibeBob 8s ease-in-out infinite alternate; }
  [data-skin="sky"] .hero-stage3::after { animation: vibeBob 10s ease-in-out infinite alternate-reverse; }
}
@keyframes vibeDrift {
  from { transform: translateX(-3.5vw); }
  to { transform: translateX(3.5vw); }
}
@keyframes vibeBob {
  from { transform: translateY(-7px) rotate(-3deg); }
  to { transform: translateY(7px) rotate(3deg); }
}

/* ---------------- Shared: sections that go full sky ---------------- */
[data-skin="sky"] #flavors,
[data-skin="sky"] .states-band { background: var(--sky-grad-v); }
[data-skin="sky"] #flavors .lead,
[data-skin="sky"] .states-band .lead,
[data-skin="sky"] .states-band .states-foot { color: color-mix(in srgb, var(--ink) 86%, #fff); }
[data-skin="sky"] #flavors .eyebrow,
[data-skin="sky"] .states-band .eyebrow,
[data-skin="sky"] section[data-screen-label="Instagram"] .eyebrow {
  background: #fff; color: var(--ink);
  padding: .35em .9em; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -10px rgba(8,50,59,.45);
}
[data-skin="sky"] #flavors .lnav { background: #fff; border-color: transparent; }

/* re-enable the doodle decorations the clean reskin hid */
[data-skin="sky"] .sky-sec .cloud-blob { display: block; }
[data-skin="sky"] .sky-sec .squiggle { display: block; position: absolute; z-index: 0; pointer-events: none; }

/* a slow extra cloud per sky section */
[data-skin="sky"] #flavors::after,
[data-skin="sky"] .states-band::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background: url("/design/vibe/cloud-solid.svg") no-repeat center / contain;
  width: clamp(150px, 18vw, 280px); aspect-ratio: 54/25;
  right: -3%; bottom: 10%; opacity: .5;
}
[data-skin="sky"] .states-band::after { right: auto; left: -2%; bottom: auto; top: 6%; }
@media (prefers-reduced-motion: no-preference) {
  [data-skin="sky"] #flavors::after { animation: vibeDrift 70s ease-in-out infinite alternate-reverse; }
  [data-skin="sky"] .states-band::after { animation: vibeDrift 56s ease-in-out infinite alternate; }
}

/* ---------------- Pick Your Vibe: echo rings ---------------- */
[data-skin="sky"] .vu-rings {
  display: block; position: absolute; inset: -5%;
  width: 110%; height: 110%; z-index: 0; pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  opacity: .95;
}
[data-skin="sky"] .vibe-ultra:hover .vu-rings { transform: scale(1.05) rotate(1.5deg); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-skin="sky"] .vu-rings { animation: vibeBreathe 6.5s ease-in-out infinite alternate; }
}
@keyframes vibeBreathe {
  from { scale: 1; }
  to { scale: 1.016; }
}
/* the availability-map silhouette recedes so the rings carry the card */
[data-skin="sky"] .vibe-ultra .vu-map { opacity: .8; }

/* ---------------- The Ritual: white line-art icons on sky chips ---------------- */
[data-skin="sky"] section[data-screen-label="How it works"] {
  background: linear-gradient(180deg, #EDF7F9 0%, #D9EFF4 100%);
}
[data-skin="sky"] .step .ic {
  width: 64px; height: 64px; padding: 10px;
  border-radius: 18px; background: var(--sky-grad);
  box-shadow: 0 10px 22px -14px rgba(8,50,59,.55);
}
[data-skin="sky"] .step .ic svg { width: 100%; height: 100%; }

/* ---------------- Find a Store: mountain ridge under the cards ---------------- */
[data-skin="sky"] .states-band::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: clamp(90px, 14vw, 200px); pointer-events: none; z-index: 0;
  background:
    url("/design/vibe/mountain-light.svg") repeat-x left bottom / auto 78%,
    url("/design/vibe/mountain-deep.svg") repeat-x 34% bottom / auto 100%;
  opacity: .5;
}
[data-skin="sky"] .states-band .city-ticker { position: relative; z-index: 1; border-color: rgba(255,255,255,.4); }
[data-skin="sky"] .states-band .city-ticker span { color: color-mix(in srgb, var(--ink) 82%, #fff); }
[data-skin="sky"] .states-band .city-ticker span::after { color: #fff; }

/* ---------------- Instagram band: the sticker wallpaper ---------------- */
[data-skin="sky"] section[data-screen-label="Instagram"] {
  background: var(--sky-grad) !important;
  position: relative; overflow: hidden; isolation: isolate;
}
[data-skin="sky"] section[data-screen-label="Instagram"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("/design/vibe/sticker-tile.svg") 0 0 / clamp(440px, 56vw, 760px) auto;
  opacity: .22;
}
[data-skin="sky"] section[data-screen-label="Instagram"] > .wrap { position: relative; z-index: 1; }
[data-skin="sky"] section[data-screen-label="Instagram"] .lead { color: color-mix(in srgb, var(--ink) 86%, #fff); }

/* ---------------- Journal: a whisper of sky ---------------- */
[data-skin="sky"] section[data-screen-label="Journal"] { background: #EFF8FA; }

/* ---------------- Testimonials: soft sky instead of cream ---------------- */
[data-skin="sky"] section[data-screen-label="Testimonials"] {
  background: linear-gradient(180deg, #EAF6F9 0%, #D9EFF4 100%) !important; /* the section carries an inline cream background */
}

/* ---------------- Unified darks: one deep-sky navy family ----------------
   The base design's dark sections (--night/--charcoal) lean green-teal and
   clash with the cyan sky. Under the sky skin, the science band, dark CTA
   bands and the footer all share the same blue-leaning ramp. */
[data-skin="sky"] .dark,
[data-skin="sky"] .anatomy {
  background: linear-gradient(180deg, #1273A0 0%, #0E5C81 55%, #0B4D6E 100%);
}
[data-skin="sky"] .anatomy-glow {
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(64,175,203,.12) 55%, transparent 75%);
}
/* small light-on-blue copy needs a lift now that the band is brighter */
[data-skin="sky"] .acard p,
[data-skin="sky"] .dark .lead,
[data-skin="sky"] .dark .muted { color: rgba(255,255,255,.86); }
/* the footer is injected outside <main>, so gate it on the page's skin */
body:has(main[data-skin="sky"]) .site-footer {
  background: linear-gradient(180deg, #0E5C81 0%, #093E58 100%);
}
/* the age gate + state gateway overlays (also body-level) join the same family */
body:has(main[data-skin="sky"]) .gate {
  background:
    radial-gradient(90% 130% at 88% -20%, rgba(120,210,235,.34) 0%, rgba(120,210,235,0) 55%),
    radial-gradient(120% 150% at 12% 110%, #0E5C81 0%, #093E58 64%);
}

/* ---------------- Interior page heroes: same sky as home ----------------
   The interior ".band" heroes were night-teal with a sunset glow — they now
   match the home hero: light sky, ink type, a cloud adrift. */
[data-skin="sky"] .band.sky-band,
[data-skin="sky"] .band.sunset-band { background: var(--sky-grad-v); }
[data-skin="sky"] .band .display,
[data-skin="sky"] .band .h1 { color: var(--ink); }
[data-skin="sky"] .band .lead { color: color-mix(in srgb, var(--ink) 86%, #fff); }
[data-skin="sky"] .band .eyebrow {
  background: #fff; color: var(--ink) !important; /* about's eyebrow is inline-colored #fff */
  padding: .35em .9em; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -10px rgba(8,50,59,.45);
}
[data-skin="sky"] .band > .wrap { position: relative; z-index: 1; }
[data-skin="sky"] .band::before,
[data-skin="sky"] .band::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background: url("/design/vibe/cloud-solid.svg") no-repeat center / contain;
}
[data-skin="sky"] .band::before {
  width: clamp(150px, 17vw, 260px); aspect-ratio: 54/25;
  right: 6%; top: 18%; opacity: .8;
}
[data-skin="sky"] .band::after {
  width: clamp(100px, 11vw, 170px); aspect-ratio: 54/25;
  left: -2%; bottom: 10%; opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  [data-skin="sky"] .band::before { animation: vibeDrift 58s ease-in-out infinite alternate; }
  [data-skin="sky"] .band::after { animation: vibeDrift 74s ease-in-out infinite alternate-reverse; }
}
@media (max-width: 720px) {
  [data-skin="sky"] .band::before { right: -8%; top: 6%; width: 130px; opacity: .6; }
  [data-skin="sky"] .band::after { display: none; }
}

/* ---------------- Mobile: fewer floaters, same sky ---------------- */
@media (max-width: 720px) {
  [data-skin="sky"] .hero-deco::after,
  [data-skin="sky"] .hero-stage3::before { display: none; }
  [data-skin="sky"] .states-band::before { opacity: .38; }
  /* keep the clouds off the headline on small screens */
  [data-skin="sky"] .hero-sky::before { left: -10%; top: 1.5%; width: 150px; opacity: .6; }
  [data-skin="sky"] .hero-sky::after { right: -6%; top: 30%; width: 110px; opacity: .45; }
}