/* www home redesign proposal: the store landing's story language (story.css) for the person who will use the app.
   story.css is written for the store shell, so this file maps the shell's names to the www's and adds the
   product pieces: the hero sequence, the night-face gallery, the ways to warn shown with motion, the honest
   notes and the Free / Full block. */

/* story.css resets body for the shell; give the www its own back */
body { background: var(--bg); color: var(--ink); font-family: var(--font); }
:root { --sh-fs-display: var(--fs-display); --sh-fs-h2: var(--fs-h2); --sh-fs-h3: var(--fs-h3); --sh-fs-lead: var(--fs-lead);
  --sh-fs-body: var(--fs-body); --sh-fs-button: var(--fs-button); --sh-fs-small: var(--fs-small); --sh-fs-label: var(--fs-label); }

.uf-www h1 { font-size: var(--fs-display); }
.uf-soon { display: block; margin-top: 30px !important; padding: 2px 0 2px 12px; border-left: 3px solid var(--accent); font-weight: 800; font-size: var(--fs-small); }
.uf-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-weight: 700; font-size: var(--fs-small); }
.uf-facts li { display: flex; align-items: center; gap: 8px; }
.uf-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.uf-small { margin-top: 20px !important; color: var(--muted); font-size: var(--fs-small); }
.uf-lockicon { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; color: var(--accent); }

/* Hero: one phone, two real screens (night mode, then the warning). Only the screen is styled, never the frame. */
.uf-stage { display: grid; justify-self: end; justify-items: center; gap: 22px; }
.uf-hero-phone { --sh-phone-w: 300px; }   /* the shell's frame and shadow as they are; the glow is .uf-halo behind it */
.uf-seq { position: relative; overflow: hidden; }
.uf-seq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.uf-cue { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-label); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.uf-cue li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.uf-cue li + li { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .uf-seq img + img { animation: uf-warn 8s ease-in-out infinite; }
  .uf-cue li:first-child { animation: uf-cue-a 8s ease-in-out infinite; }
  .uf-cue li + li { animation: uf-cue-b 8s ease-in-out infinite; }
}
@keyframes uf-warn { 0%, 42% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* The cue's two pills swap with the screens; tokens, so the pill that is off reads in light and dark */
@keyframes uf-cue-a { 0%, 42% { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } 48%, 92% { color: var(--muted); background: transparent; border-color: var(--line); } 100% { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } }
@keyframes uf-cue-b { 0%, 42% { color: var(--muted); background: transparent; border-color: var(--line); } 48%, 92% { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } 100% { color: var(--muted); background: transparent; border-color: var(--line); } }

/* Night faces gallery */
/* 6.6: the frame's shadow (0 30px 60px -24px) reaches 66 px down, so text keeps 78 px below a phone and 18 px above */
.uf .uf-gallery-h { margin-top: clamp(96px, 9vw, 120px); }   /* .uf beats story.css `.uf h3 { margin: 0 }` */
.uf-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 80px clamp(12px, 2vw, 28px); margin: 32px 0 0; padding: 0; list-style: none; }
.uf-gallery li { display: grid; justify-items: center; align-content: start; gap: 22px; }
.uf-gallery .sh-phone { --sh-phone-w: 180px; }
.uf-gallery p { color: var(--muted); font-weight: 800; font-size: var(--fs-small); }

/* Ways to warn, shown */
.uf-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.uf-tiles li { position: relative; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.uf-corner { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); }
.uf-corner .uf-lockicon { margin: 0; vertical-align: 0; }
.uf-tiles h3 { font-size: var(--fs-h3); }
.uf-tiles p { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); }
.uf-pic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: 18px; background: var(--tint); color: var(--chip); }
.uf-pic svg { width: 32px; height: 32px; }
.uf-torch .lens { fill: #F2B544; }   /* the lit lens: the warning's amber */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .uf-torch .lens { fill: #FFF4D6; } }
:root[data-theme="dark"] .uf-torch .lens { fill: #FFF4D6; }   /* on dark the icon is amber: the lit lens is pale light */
.uf-screen-mini { width: 22px; height: 36px; border-radius: 5px; border: 2px solid currentColor; background: #20252B; }
/* Each picture moves as the app warns. Parts turn about their own centre. */
.uf-pic svg * { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .uf-screen-mini { animation: uf-flash 3s ease-in-out infinite; }
  /* Vibration: the phone buzzes for half a second, the near lines then the far ones show it, then rest */
  .uf-vib .body { animation: uf-buzz 1.5s linear infinite; }
  .uf-vib .near { animation: uf-near 1.5s ease-out infinite; }
  .uf-vib .far { animation: uf-far 1.5s ease-out infinite; }
  /* Sound: the speaker kicks and the two waves go out, the near one first */
  .uf-snd .body { animation: uf-kick 1.5s ease-out infinite; }
  .uf-snd .w1 { animation: uf-wave 1.5s ease-out infinite; }
  .uf-snd .w2 { animation: uf-wave 1.5s ease-out .18s infinite backwards; }
  /* Flashlight: the lens flashes like the app's torch, three times 0.3 s on and 0.3 s off, then a pause */
  .uf-torch .lens { animation: uf-lens 3s linear infinite; }
}
@keyframes uf-lens { 0%, 10.5%, 20%, 30.5%, 40%, 50.5%, 100% { fill-opacity: .12; } 1.5%, 9%, 21.5%, 29%, 41.5%, 49% { fill-opacity: 1; } }
/* Three soft flashes, 500 ms each (2 a second, under the 3/s photosensitivity limit), then a pause */
@keyframes uf-flash { 0%, 50%, 100% { background: #20252B; } 5%, 8% { background: #F2B544; } 17% { background: #20252B; } 22%, 25% { background: #F2B544; } 33% { background: #20252B; } 38%, 41% { background: #F2B544; } }
@keyframes uf-buzz { 0%, 36%, 100% { transform: none; } 2%, 10%, 18%, 26% { transform: rotate(-4deg); } 6%, 14%, 22%, 30% { transform: rotate(4deg); } 34% { transform: rotate(-2deg); } }
@keyframes uf-near { 0%, 52%, 100% { opacity: 0; transform: none; } 4%, 36% { opacity: 1; transform: none; } }
@keyframes uf-far { 0%, 6%, 56%, 100% { opacity: 0; } 12%, 36% { opacity: 1; } }
@keyframes uf-kick { 0%, 30%, 100% { transform: none; } 6% { transform: scale(1.06); } }
@keyframes uf-wave { 0% { opacity: .15; transform: translateX(-8%); } 12% { opacity: 1; transform: none; } 45% { opacity: 1; transform: none; } 75%, 100% { opacity: .15; transform: translateX(-8%); } }
/* the warning phone glows from a .uf-halo behind it; the frame keeps the shell's own shadow */

/* What it promises, and what it doesn't */
.uf-know { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.uf-know li { padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.uf-know h3 { margin-top: 14px; }
.uf-know p { margin-top: 8px; color: var(--muted); }
.uf-know a { color: var(--accent); }

/* Free / Full (off on the live site until the purchase ships) */
.uf-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 40px 0 0; }
.uf-plan { padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.uf-plan-full { border: 2px solid var(--accent); box-shadow: 0 0 80px -10px rgba(242, 181, 68, .25); }
.uf-plan h3 { font-size: var(--fs-h2); }
.uf-plan ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.uf-plan li { display: flex; gap: 12px; align-items: center; font-weight: 700; }
.uf-plan li .uf-icon { width: 22px; height: 22px; }
.uf-once { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--chip); font-size: var(--fs-label); letter-spacing: .04em; vertical-align: middle; }

.uf-close h2 { max-width: 14em; }
.uf-close .uf-btn { margin-top: 0; }

@media (max-width: 900px) {
  .uf-gallery { grid-template-columns: repeat(3, 1fr); }   /* a grid, not a side scroll: every name stays on screen */
  .uf-gallery .sh-phone { --sh-phone-w: 150px; }
  .uf-know, .uf-plan-grid { grid-template-columns: 1fr; }
  .uf-hero-phone { --sh-phone-w: 240px; }
  .uf-stage { justify-self: center; }
}
/* 6.6 on phones: a stacked phone's side glow reaches text up to 198 px below it (78 + 120), and centred
   captions can land flush with its sides, so the text after the hero, night and warning phones starts past that */
@media (max-width: 600px) {
  .uf-stage, .uf-lit { margin-bottom: 64px; }
  .uf .uf-gallery-h { margin-top: 150px; }
}
@media (max-width: 600px) { .uf-tiles { grid-template-columns: 1fr; } .uf-gallery { grid-template-columns: repeat(2, 1fr); } .uf-gallery .sh-phone { --sh-phone-w: 140px; } }