/* ============================================================
   Social Upkeep — Motion layer (shared, opt-in via classes)
   All decorative motion is gated on prefers-reduced-motion.
   Entrance animations never gate visibility (transform/opacity
   keyframes with `both` fill that always resolve to visible).
   ============================================================ */

/* ---------- staggered entrance (transform-only: never hides content) ---------- */
.enter{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .enter{animation:enterUp .82s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--d,0s)}
  @keyframes enterUp{from{transform:translateY(26px)}to{transform:none}}
}

/* ---------- glimmer sweep on accent text ---------- */
.glimmer{
  background:linear-gradient(105deg,var(--accent) 0%,var(--accent) 42%,#ffcabf 50%,var(--accent) 58%,var(--accent) 100%);
  background-size:280% 100%;background-position:140% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .glimmer{animation:glimmerSweep 5.5s cubic-bezier(.5,0,.5,1) 1.2s infinite}
  @keyframes glimmerSweep{0%{background-position:140% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}}
}

/* ---------- breathing radial glow ---------- */
@media (prefers-reduced-motion:no-preference){
  .breathe::before{animation:breathe 9s ease-in-out infinite alternate}
  @keyframes breathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
}

/* ---------- hover lift + sheen on cards ---------- */
.lift{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease;will-change:transform}
.lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-16deg);opacity:0;transition:opacity .2s}
@media (prefers-reduced-motion:no-preference){
  .sheen:hover::after{opacity:1;animation:sheenSweep .85s ease}
  @keyframes sheenSweep{from{left:-60%}to{left:130%}}
}

/* ---------- button sheen (applies to all .btn) ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-14deg);transition:transform .6s cubic-bezier(.3,.7,.3,1)}
@media (prefers-reduced-motion:no-preference){
  .btn:hover::before{transform:translateX(130%) skewX(-14deg)}
}
.btn-ghost::before{background:linear-gradient(105deg,transparent 30%,rgba(240,88,75,.14) 50%,transparent 70%)}

/* ---------- pulsing dot / orb ---------- */
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:pulseRing 2.6s ease-in-out infinite}
  @keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(240,88,75,.0)}50%{box-shadow:0 0 0 7px rgba(240,88,75,.12)}}
  .orb-breathe{animation:orbBreathe 3.4s ease-in-out infinite}
  @keyframes orbBreathe{0%,100%{box-shadow:0 0 32px -6px rgba(240,88,75,.6);transform:scale(1)}50%{box-shadow:0 0 52px -2px rgba(240,88,75,.85);transform:scale(1.05)}}
}

/* ---------- timeline flowing line + traveling dot ---------- */
.flowline{position:relative}
@media (prefers-reduced-motion:no-preference){
  .flowline::after{content:"";position:absolute;top:26px;left:8%;width:14px;height:4px;border-radius:4px;
    background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.9;z-index:1;
    animation:travel 4.2s cubic-bezier(.6,0,.4,1) infinite}
  @keyframes travel{0%{left:8%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:90%;opacity:0}}
}

/* ---------- score bar fill ---------- */
.barfill{width:0;transition:width 1.1s cubic-bezier(.3,.8,.3,1)}
.barfill.run{width:var(--to,86%)}

/* ---------- live caret ---------- */
.caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:1px;vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{display:none}}

/* ---------- platform pill select sequence ---------- */
.pp{transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.pp .pp-check{display:inline-block;width:0;overflow:hidden;opacity:0;transition:width .3s ease,opacity .3s ease;white-space:nowrap}
.pp.on .pp-check{width:0.9em;opacity:1}
.pp.on{transform:translateY(-1px)}

/* ---------- gentle gradient drift for full-bleed coral ---------- */
@media (prefers-reduced-motion:no-preference){
  .drift{background-size:160% 160%;animation:drift 14s ease-in-out infinite}
  @keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}

/* ---------- URL-typing product carousel ---------- */
.appstage{position:relative;height:var(--stage-h,440px);padding:0}
.cview{display:none;position:absolute;inset:0;padding:18px 22px;overflow:hidden}
.cview.on{display:block}
@media (prefers-reduced-motion:no-preference){
  .cview.on{animation:cviewIn .55s cubic-bezier(.2,.7,.2,1) both}
  @keyframes cviewIn{from{transform:translateY(10px)}to{transform:none}}
}
.url .caret{height:.95em;vertical-align:-1px;background:var(--ink-2)}

/* carousel controls */
.cnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.cnav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);font-size:19px;line-height:1;display:grid;place-items:center;cursor:pointer;font-family:var(--font-body);transition:background .16s,color .16s,border-color .16s,transform .12s,box-shadow .16s}
.cnav-btn:hover{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(240,88,75,.75)}
.cnav-btn:active{transform:scale(.93)}
.cnav-dots{display:flex;align-items:center;gap:8px}
.cnav-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--border-2);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.cnav-dot:hover{background:var(--ink-3)}
.cnav-dot.on{background:var(--accent);transform:scale(1.3)}