/* Shared by every Lil' Phil website page. Rules for a page and how it should feel live in
   .agents/skills/frontend-product-design/references/website-pages.md and .agents/skills/playful-motion.
   friends.css predates this file and still carries its own copies; prefer these for new work. */

/* ── Carousel of screens: fixed-size slides, as many as fit, the next one peeking ── */
.screen-carousel { --slide-width: min(540px, 86vw); }
.screen-carousel.phone-carousel { --slide-width: min(300px, 82vw); }
.screen-track { display: flex; position: relative; gap: 24px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 16px; }
.screen-track::-webkit-scrollbar { display: none; }
.screen-slide { flex: 0 0 var(--slide-width); min-width: 0; margin: 0; scroll-snap-align: start; }
.screen-slide figcaption { margin: 16px 2px 0; font-weight: 800; line-height: 1.4; font-size: 19px; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.carousel-controls[hidden] { display: none; }
.carousel-controls button { font: inherit; display: grid; place-items: center; cursor: pointer; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.carousel-dots { display: flex; }
.carousel-dots button { background: transparent; width: 32px; border-radius: 12px; }
.carousel-dots button[hidden] { display: none; }
.carousel-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); }
.carousel-dots [aria-current] span { background: var(--link); width: 20px; }

/* ── Device frames: hairline metal edge, thin bezel, big screen. Screens are always light. ── */
.mock-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; place-items: center; padding: 40px 24px 32px; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #ffffff26 0%, #ffffff00 70%), var(--soft); }
.age-tag { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #fff; color: #2b2a26; font-weight: 850; font-size: 13px; box-shadow: 0 2px 8px #2b2a2618; }
.age-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.device-mock { position: relative; width: 100%; background: #101114; box-shadow: 0 0 0 1.5px #b9bdc6, 0 0 0 2.5px #6d717a, 0 30px 48px -18px #0009, 0 10px 18px -8px #0006; }
.device-mock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, #ffffff12 0 16%, #ffffff00 16.2%); }
.device-screen { position: relative; height: 100%; min-width: 0; overflow: hidden; background: #fff8ea; color: #2b2a26; font-size: 14px; line-height: 1.35; }
.device-mock.tablet { max-width: 560px; aspect-ratio: 4 / 3; padding: 7px; border-radius: 30px; }
.device-mock.tablet .device-screen { border-radius: 23px; }
.device-mock.phone { width: 252px; max-width: 100%; aspect-ratio: 9 / 19.5; padding: 4px; border-radius: 48px; }
.device-mock.phone::before { content: ""; position: absolute; z-index: 4; top: 13px; left: calc(50% - 38px); width: 76px; height: 22px; border-radius: 14px; background: #050506; }
.device-mock.phone .device-screen { border-radius: 44px; padding-top: 50px; }

/* ── Playful motion: entrances play once, in CSS, so nothing waits on script ── */
.pop-in { animation: kit-pop-in 520ms cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both; }
@keyframes kit-pop-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.pop-words > span { display: inline-block; animation: kit-word-pop 560ms cubic-bezier(.34, 1.56, .64, 1) calc(80ms + var(--i, 0) * 70ms) both; }
@keyframes kit-word-pop { from { opacity: 0; transform: translateY(.45em) scale(.7) rotate(-6deg); } 60% { opacity: 1; } }
.wiggle-once { animation: kit-pop-in 520ms cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both, kit-wiggle 700ms ease-in-out calc(var(--d, 0ms) + 900ms) 1; }
@keyframes kit-wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 40% { rotate: 3.5deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } }
/* Hop in and land with a squash. Set --n for the stagger order and --start for the first one. */
.hop-in { transform-origin: 50% 100%; animation: kit-hop 720ms cubic-bezier(.3, .7, .4, 1) calc(var(--start, 400ms) + var(--n, 0) * 85ms) both; }
@keyframes kit-hop {
  0% { opacity: 0; transform: translateY(70px) scale(.9, 1.12); }
  45% { opacity: 1; transform: translateY(-16px) scale(.95, 1.06); }
  68% { transform: translateY(0) scale(1.1, .88); }
  84% { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: none; }
}

/* Below the fold: kit.js adds .reveal, then .is-in once in view. No script, no hiding. */
.reveal { opacity: 0; transform: translateY(28px) scale(.97); }
.reveal.is-in { opacity: 1; transform: none; animation: kit-reveal 620ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--ri, 0) * 75ms) both; }
@keyframes kit-reveal { from { opacity: 0; transform: translateY(28px) scale(.97); } 60% { opacity: 1; } }
.screen-slide.reveal.is-in .device-mock { animation: kit-settle 820ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--ri, 0) * 75ms + 120ms) both; }
@keyframes kit-settle { from { transform: translateY(18px) rotate(-4deg); } }

@media (max-width: 600px) {
  .screen-track { gap: 16px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .screen-slide figcaption { font-size: 17px; }
  .mock-stage { padding: 36px 12px 18px; border-radius: 22px; }
  .device-mock.tablet { padding: 5px; border-radius: 22px; }
  .device-mock.tablet .device-screen { border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-in, .pop-words > span, .wiggle-once, .hop-in, .reveal, .reveal.is-in, .screen-slide.reveal.is-in .device-mock { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Nav: on wider screens the seven feature pages sit in one Explore menu; phones keep the scrolling row ── */
.nav-explore { position: relative; }
.nav-explore summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 999px; color: var(--night-ink); font-weight: 700; cursor: pointer; }
.nav-explore summary::-webkit-details-marker { display: none; }
.nav-explore summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .2s ease; }
.nav-explore[open] summary::after { rotate: 225deg; translate: 0 2px; }
.nav-explore summary:hover, .nav-explore[open] summary { background: #ffffff1c; }
.nav-explore[data-current] summary { box-shadow: inset 0 0 0 2px #ffe7a155; }
.nav-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: grid; min-width: 200px; padding: 8px; border-radius: 18px; background: var(--night); box-shadow: 0 18px 40px #0007, inset 0 0 0 1px #ffffff1a; transform-origin: 24px 0; animation: nav-menu-in 220ms cubic-bezier(.34, 1.56, .64, 1); }
.nav-menu a { justify-content: flex-start; }
@keyframes nav-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.nav-flat { display: none; }
@media (max-width: 760px) {
  .nav-explore { display: none; }
  .nav-flat { display: contents; }
}
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none; } }

/* site.css has older, unrelated .tablet and .phone illustrations (tilted, absolutely placed).
   Kit device frames share those class names, so undo that styling here for every page. */
.device-mock.tablet, .device-mock.phone { position: relative; right: auto; bottom: auto; transform: none; }
.device-mock.phone { width: 252px; }
/* Safety sits at the foot of the Explore menu, set apart from the seven feature pages. */
.nav-menu a[href="/safety"] { margin-top: 6px; border-top: 1px solid #ffffff1a; border-radius: 0 0 12px 12px; padding-top: 12px; }

/* site.css lets touching sections share one gap. A coloured band breaks that, so it and the next section pad their own tops. */
.section + .section.night, .section.night + .section { padding-top: clamp(56px, 8vw, 104px); }

/* While Roo is answering, ▶ shows pause, so it's clear a tap will stop it. */
.play-dot.is-playing { font-size: 0; padding-left: 0; }
.play-dot.is-playing::after { content: ""; width: 16px; height: 18px; background: linear-gradient(90deg, #2b2a26 0 35%, transparent 35% 65%, #2b2a26 65%); }

/* The header rests over the hero. Past it, scrolling up springs it back as frosted night glass, and
   scrolling down tucks it away. The glass reaches above the bar so the spring's overshoot never shows a gap. */
.top.is-floating { position: fixed; background: color-mix(in srgb, var(--night) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 #ffffff14, 0 10px 30px #0000004d; translate: 0 -120%; }
.top.is-floating::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: var(--night); }
.top.is-floating .wrap { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
.top.is-floating.is-shown { translate: 0 0; }
.top.is-floating.can-move { transition: translate 480ms cubic-bezier(.34, 1.56, .64, 1); }
.shelf-nav { transition: top 480ms cubic-bezier(.34, 1.56, .64, 1); }
html.head-shown .shelf-nav { top: var(--head-h, 0px); }

/* Lil' Phil squashes and stretches when you point at him, and once as he arrives. */
.brand img { transform-origin: 50% 85%; animation: brand-boop 640ms cubic-bezier(.34, 1.56, .64, 1) 400ms both; }
.brand:hover img, .brand:active img, .top.is-shown .brand img { animation: brand-boop-again 640ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes brand-boop { 0% { scale: 1; } 25% { scale: 1.2 .8; } 50% { scale: .88 1.14; } 75% { scale: 1.05 .96; } 100% { scale: 1; } }
@keyframes brand-boop-again { 0% { scale: 1; } 25% { scale: 1.2 .8; } 50% { scale: .88 1.14; } 75% { scale: 1.05 .96; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .top.is-floating.can-move, .shelf-nav { transition: none; } .brand img { animation: none !important; } }

/* A side-scrolling row runs out to the window's edge, so the next screen always peeks in, cut off,
   and it's clear there's more to swipe to. */
@media (min-width: 861px) {
  .screen-track { margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); }
  html .screen-carousel:not(.phone-carousel) { --slide-width: min(480px, 40vw); }
}
.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), #0000); mask-image: linear-gradient(to right, #000 calc(100% - 72px), #0000); }
.more-left.more-right { -webkit-mask-image: linear-gradient(to right, #0000, #000 48px, #000 calc(100% - 72px), #0000); mask-image: linear-gradient(to right, #0000, #000 48px, #000 calc(100% - 72px), #0000); }
.more-left:not(.more-right) { -webkit-mask-image: linear-gradient(to right, #0000, #000 48px); mask-image: linear-gradient(to right, #0000, #000 48px); }
/* On phones the next screen shows a real slice, not a sliver. */
@media (max-width: 860px) { html .screen-carousel:not(.phone-carousel) { --slide-width: 78vw; } }

/* A slim, rounded scrollbar like a phone's: no arrow buttons, a soft thumb on a track the colour of the page.
   Chrome, Edge and Safari draw it from the -webkit rules (they skip them if the standard properties are set),
   so only Firefox gets scrollbar-width and scrollbar-color. Rows that hide their bar keep doing so. */
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--paper); }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ink) 30%, transparent) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 50%, transparent); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; width: 0; height: 0; background: transparent; }
@supports (-moz-appearance: none) { html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) var(--paper); } }