/* ==========================================================================
   Pillbox product branch — v2 override layer.
   Loaded AFTER pillbox.css. Adds the v2 feedback: coloured sec-label bullets,
   two-colour tap-flows, softer screenshot corners, tasteful motion (scroll
   reveal, cascading flow pulse, notification-bounce timeline), hover lifts,
   and the support page's one-click intent selector + dynamic fields.
   All motion is reduced-motion-safe.
   ========================================================================== */

/* ---- v3 screenshots are pre-framed iPhone mockups on transparent backgrounds:
       kill the rounding + rectangular ring/shadow (the frame is baked in), and use a
       drop-shadow filter so the shadow follows the phone silhouette, not a box ---- */
.hero-shot img,.shot{border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 38px rgba(16,20,23,.26))}
html[data-theme="dark"] .hero-shot img,html[data-theme="dark"] .shot{filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
/* App Store "Data Not Collected" badge crop — a dark card; round its corners to match everything else */
.label-shot{display:block;max-width:420px;width:100%;height:auto;margin:16px auto 0;border-radius:14px;box-shadow:0 14px 30px -16px rgba(16,20,23,.5)}
html[data-theme="dark"] .label-shot{box-shadow:0 14px 32px -14px rgba(0,0,0,.6)}

/* ---- coloured pixel-dot bullet on every section label ---- */
.sec-label .sdot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:9px;vertical-align:middle;background:var(--sc,var(--action))}
.proof .sec-label .sdot{background:var(--action-dark)}

/* ---- eyebrow pill dot: gentle pulse ---- */
.eyebrow .appdot{animation:apppulse 2.6s ease-in-out infinite}
@keyframes apppulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}

/* ---- two-colour tap-flows (typical app = amber, PillBox = blue) ---- */
.tap.win{background:var(--c-blue);border-color:transparent;color:#fff}
.tap.alt{color:var(--c-amber);border-color:var(--c-amber);background:transparent}
html[data-theme="dark"] .tap.alt{color:var(--c-amber);border-color:var(--c-amber)}
.tap.pb{color:var(--c-blue);border-color:var(--c-blue);background:transparent}
html[data-theme="dark"] .tap.pb{color:var(--action-dark);border-color:var(--action-dark)}
.tap.mid{font-family:var(--f-mono);color:var(--on-light-mut);background:transparent;border-style:dashed}
html[data-theme="dark"] .tap.mid{color:var(--on-dark-mut)}

/* ---- easing (Emil Kowalski curves — never ease-in for UI) ---- */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* ---- hover lifts (gated so a touch tap can't false-trigger them) + press feedback ---- */
.card{transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .2s ease}
.help-item{transition:transform .2s var(--ease-out),border-color .2s ease}
.btn,.appstore{transition:transform .16s var(--ease-out),filter .2s ease}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(16,20,23,.5)}
  html[data-theme="dark"] .card:hover{box-shadow:0 20px 44px -22px rgba(0,0,0,.7)}
  .help-item:hover{transform:translateY(-3px)}
  .intent .opt:hover .box{transform:translateY(-2px)}
}
.btn:active,.appstore:active{transform:scale(.97)}
.intent .opt:active .box{transform:scale(.985)}
/* specify properties instead of the base sheet's `transition: all` on the theme toggle */
.theme button{transition:color .2s ease,background-color .2s ease}

/* ---- scroll reveal: a deliberate upward settle. Triggered EARLY (see pillbox-v2.js)
       so you catch an intentional motion, not content reacting to your scroll (load-lag feel). ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---- cascading pulse across a flow row (a signal travelling left→right) ---- */
.flow.play .tap{animation:tapwave 3.6s var(--ease-in-out) infinite;animation-delay:calc(var(--i,0)*.15s)}
.flow.play .arr{animation:arrwave 3.6s var(--ease-in-out) infinite;animation-delay:calc(var(--i,0)*.15s)}
@keyframes tapwave{0%,46%,100%{transform:translateY(0)}15%{transform:translateY(-4px)}}
@keyframes arrwave{0%,46%,100%{opacity:.5}15%{opacity:1;color:var(--action)}}

/* ---- timeline: deliberate steps, one at a time. Each node glows up, gives a small shake,
       glows down; THEN the next; then a breath before it loops. Not five things firing at once. ---- */
.timeline.play .tl-node:nth-child(1) .dot{animation:tlstep1 7s ease-in-out infinite}
.timeline.play .tl-node:nth-child(2) .dot{animation:tlstep2 7s ease-in-out infinite}
.timeline.play .tl-node:nth-child(3) .dot{animation:tlstep3 7s ease-in-out infinite}
.timeline.play .tl-node:nth-child(4) .dot{animation:tlstep4 7s ease-in-out infinite}
@keyframes tlstep1{
  0%,2%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
  7%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  9%{transform:translateX(calc(-50% - 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  11%{transform:translateX(calc(-50% + 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  13%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  18%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
}
@keyframes tlstep2{
  0%,22%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
  27%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  29%{transform:translateX(calc(-50% - 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  31%{transform:translateX(calc(-50% + 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  33%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  38%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
}
@keyframes tlstep3{
  0%,42%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
  47%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  49%{transform:translateX(calc(-50% - 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  51%{transform:translateX(calc(-50% + 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  53%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(47,111,143,.20)}
  58%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(47,111,143,0)}
}
@keyframes tlstep4{ /* the "it stops" node — red */
  0%,62%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(142,62,58,0)}
  67%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(142,62,58,.22)}
  69%{transform:translateX(calc(-50% - 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(142,62,58,.22)}
  71%{transform:translateX(calc(-50% + 2.5px)) scale(1.42);box-shadow:0 0 0 9px rgba(142,62,58,.22)}
  73%{transform:translateX(-50%) scale(1.42);box-shadow:0 0 0 9px rgba(142,62,58,.22)}
  78%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 0 0 rgba(142,62,58,0)}
}

/* ---- PBS feature-flag chips ---- */
.flags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.flag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--on-light);background:var(--paper-2);border:1px solid var(--hair-light);border-left:3px solid var(--c-amber);border-radius:10px;padding:8px 12px}
html[data-theme="dark"] .flag{color:var(--on-dark);background:var(--ink-3);border-color:var(--hair-dark);border-left-color:var(--c-amber)}

/* ---- SA badge placeholder (footer) ---- */
.sa-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mut);border:1px dashed var(--hair-dark);border-radius:999px;padding:5px 12px;margin-top:4px}

/* ==========================================================================
   Support form — one-click visible intent selector + dynamic field groups
   ========================================================================== */
.intent{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px}
@media(max-width:640px){.intent{grid-template-columns:1fr}}
.intent .opt{position:relative;display:flex;cursor:pointer}
.intent .opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;clip:rect(0 0 0 0);clip-path:inset(50%)}
.intent .opt .box{position:relative;z-index:1;flex:1;border:1px solid var(--hair-light);border-radius:14px;padding:16px 16px 15px;background:var(--paper-2);transition:border-color .2s ease,background .2s ease,transform .15s ease}
html[data-theme="dark"] .intent .opt .box{background:var(--ink-3);border-color:var(--hair-dark)}
.intent .opt .box b{display:block;font-family:var(--f-display);font-weight:500;font-size:1rem;line-height:1.25;color:var(--on-light);margin-bottom:3px}
html[data-theme="dark"] .intent .opt .box b{color:var(--on-dark)}
.intent .opt .box span{font-family:var(--f-body);font-size:.82rem;color:var(--on-light-mut)}
html[data-theme="dark"] .intent .opt .box span{color:var(--on-dark-mut)}
.intent .opt input:checked + .box{border-color:var(--action);border-width:1.5px;background:color-mix(in srgb,var(--action) 8%,var(--paper))}
html[data-theme="dark"] .intent .opt input:checked + .box{background:color-mix(in srgb,var(--action) 22%,var(--ink-3))}
.intent .opt input:focus-visible + .box{outline:2px solid var(--action-dark);outline-offset:2px}

/* dynamic field groups: shown per selected intent via [data-intent] on the form */
.fgroup{display:none;flex-direction:column}
form[data-intent="problem"] .fgroup.for-problem{display:flex}
form[data-intent="improve"] .fgroup.for-improve{display:flex}
form[data-intent="question"] .fgroup.for-question{display:flex}

/* ==========================================================================
   Brand tail — beneath the last sections the LF lattice grows in (dots
   imperceptible at the top of "History", full-size by "Built by Logic Foundry"),
   returning the page to the Logic Foundry brand before the solid-black footer.
   The proof band becomes frosted glass so the lattice reads through it.
   ========================================================================== */
.brand-tail{position:relative;overflow:hidden;padding:clamp(50px,8vh,96px) 0 0;color:var(--on-dark);background:linear-gradient(180deg,var(--paper) 0,var(--paper) calc(var(--dark-y,600px) - 240px),var(--ink) calc(var(--dark-y,600px) - 20px))}
html[data-theme="dark"] .brand-tail{background:var(--ink)}
.brand-tail .lattice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.brand-tail .tail-inner{position:relative;z-index:1;padding-bottom:clamp(50px,8vh,96px)}
/* dark-tail typography (these sections now live outside .body, so restate the base) */
.brand-tail .sec-label{color:var(--on-dark-mut)}
.brand-tail h2{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.12;margin:0 0 16px;max-width:20ch;text-wrap:balance;color:var(--on-dark)}
.brand-tail .lead{font-family:var(--f-body);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--on-dark-mut);max-width:56ch;margin:0}
.brand-tail .callout{color:var(--link-dark)}
.brand-tail .cta-final h2{max-width:none;margin-inline:auto;font-size:clamp(30px,4.4vw,52px)}
.brand-tail .cta-note{color:var(--on-dark-mut)}
/* History sits on the LIGHT top of the tail (auto/light theme) — keep it light-styled */
html:not([data-theme="dark"]) .brand-tail .feature .sec-label{color:var(--on-light-mut)}
html:not([data-theme="dark"]) .brand-tail .feature h2{color:var(--on-light)}
html:not([data-theme="dark"]) .brand-tail .feature .lead{color:var(--on-light-mut)}
html:not([data-theme="dark"]) .brand-tail .feature .callout{color:var(--link)}
/* proof band = frosted glass over the lattice (continuity with the LF home's glass) */
.brand-tail .proof{background:rgba(16,20,23,.5);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);border:1px solid rgba(240,242,245,.12)}

@media(prefers-reduced-motion:reduce){
  /* Emil's rule: reduce, don't eliminate — keep a short opacity fade, drop movement */
  .reveal{opacity:0;transform:none;transition:opacity .4s ease}
  .reveal.in{opacity:1}
  .eyebrow .appdot,.flow.play .tap,.flow.play .arr,.timeline.play .tl-node .dot{animation:none}
  .card:hover,.help-item:hover,.intent .opt:hover .box,
  .btn:active,.appstore:active,.intent .opt:active .box{transform:none}
}