/* ============================================================
   BakeryOS landing — MOTION layer
   A full-scaffold motion system: entrance, scroll-reveal,
   counters, parallax, tilt, magnetic buttons, ambient drift,
   tab crossfades, marquee. Everything below is disabled wholesale
   under prefers-reduced-motion (see the guard at the bottom).
   ============================================================ */

/* Smooth conic-gradient ring fill (the margin calculator). */
@property --calc-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
}

* { will-change: auto; }

/* ——— Keyframes ——— */
@keyframes m-fadeUp   { from { opacity:0; transform: translateY(26px); }          to { opacity:1; transform:none; } }
@keyframes m-fadeDown { from { opacity:0; transform: translateY(-18px); }         to { opacity:1; transform:none; } }
@keyframes m-fadeL    { from { opacity:0; transform: translateX(-34px); }         to { opacity:1; transform:none; } }
@keyframes m-fadeR    { from { opacity:0; transform: translateX(34px); }          to { opacity:1; transform:none; } }
@keyframes m-pop      { from { opacity:0; transform: scale(.9) translateY(14px); } to { opacity:1; transform:none; } }
@keyframes m-blurin   { from { opacity:0; filter: blur(10px); transform: translateY(18px); } to { opacity:1; filter:blur(0); transform:none; } }
@keyframes m-ambient  { 0%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(-2%,1.5%,0) scale(1.06);} 100%{ transform: translate3d(0,0,0) scale(1);} }
@keyframes m-floatMark{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-3px) rotate(-2deg); } }
@keyframes m-marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes m-ringpop  { 0%{ transform: scale(1);} 40%{ transform: scale(1.07);} 100%{ transform: scale(1);} }
@keyframes m-sheen    { 0%,55%{ left:-60%; } 78%,100%{ left:130%; } }
@keyframes m-bob2     { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@keyframes m-glowpulse{ 0%,100%{ opacity:.5;} 50%{ opacity:.9;} }

/* ——— Hero entrance (runs on load; gated by html.mo so no-JS shows content) ——— */
.mo .hero [data-enter] { opacity: 0; animation: m-fadeUp .9s var(--ease-out) forwards; animation-delay: calc(var(--e, 0) * 110ms + 120ms); }
.mo .hero [data-enter="blur"] { animation-name: m-blurin; }
.mo .phone-stage[data-enter] { opacity: 0; animation: m-pop 1s var(--ease-spring) forwards; animation-delay: 360ms; }
.mo .hero .float { opacity: 0; animation: m-pop .7s var(--ease-spring) forwards; animation-delay: 900ms; }
.mo .hero .float.f1 { animation: m-pop .7s var(--ease-spring) .9s forwards, m-bob2 5s ease-in-out 1.6s infinite; }
.mo .hero .float.f2 { animation: m-pop .7s var(--ease-spring) 1.1s forwards, m-bob2 6s ease-in-out 1.8s infinite; }

/* Ambient drift on the hero wash + section washes */
.hero-bg, .calc .grain, .final .grain { animation: m-ambient 22s ease-in-out infinite; }
.brand .mark { animation: m-floatMark 6s ease-in-out infinite; }

/* Hero spotlight that follows the cursor (set via JS). */
.hero::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(420px 420px at var(--mx,70%) var(--my,20%), rgba(212,169,58,.16), transparent 60%);
  opacity:0; transition: opacity .5s ease;
}
.hero:hover::after { opacity:1; }

/* ——— Scroll reveal (directional + stagger); hidden state gated by html.mo ——— */
.mo .reveal { opacity: 0; transform: translateY(28px); }
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rd, 0ms); }
.mo .reveal.r-l   { transform: translateX(-40px); }
.mo .reveal.r-r   { transform: translateX(40px); }
.mo .reveal.r-pop { transform: scale(.92) translateY(20px); }
.reveal.in    { opacity: 1; transform: none; }

/* Children stagger: set on a container, applies to direct revealable kids via JS --rd. */

/* ============================================================
   PAGE TRANSITION — the crust curtain (shared with the app).
   Dropped before navigating to the app, which then lifts the
   same curtain — one continuous motion across the two surfaces.
   ============================================================ */
#curtain {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(212,169,58,.22), transparent 60%),
    linear-gradient(180deg, #4e2f12, #3a230e 58%, #2e1b09);
  opacity: 0; transform: translateY(4%); pointer-events: none;
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out);
}
#curtain.drop { opacity: 1; transform: none; pointer-events: all; }
#curtain .cur-in { text-align: center; color: #f7ecd7; }
#curtain .cur-mark {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 22px;
  background: radial-gradient(circle at 32% 28%, var(--ble-clair), var(--or));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 14px 38px rgba(0,0,0,.4);
}
#curtain.drop .cur-mark { animation: cur-pop .6s var(--ease-spring) both; }
#curtain .cur-mark svg { width: 50px; height: 50px; color: var(--croute-fonce); }
#curtain .cur-name { font-family: var(--serif); font-size: 26px; font-weight: 600; }
#curtain .cur-name .os { color: var(--ble); }
#curtain .cur-bar { width: 130px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.16); margin: 18px auto 0; overflow: hidden; }
#curtain .cur-bar > i { display: block; height: 100%; width: 0; background: var(--ble); }
#curtain.drop .cur-bar > i { animation: cur-fill .7s ease both; }
@keyframes cur-pop { from { opacity:0; transform: scale(.8); } to { opacity:1; transform: none; } }
@keyframes cur-fill { to { width: 100%; } }

/* The app window becomes an obvious "open the app" affordance. */
.app-window { cursor: pointer; }
.app-window .open-hint {
  position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--surface); color: var(--croute); border: 1px solid var(--ligne-fort);
  padding: 6px 13px; border-radius: var(--rayon-pill); font-size: 12.5px; font-weight: 700;
  box-shadow: var(--ombre-1); opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.shot-stage:hover .open-hint { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.app-window .open-hint svg { width: 14px; height: 14px; }

/* ——— Marquee ticker (injected by JS) ——— */
.marquee { overflow: hidden; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--bg-2); }
.marquee .track { display: inline-flex; gap: 0; white-space: nowrap; animation: m-marquee 34s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .it { display: inline-flex; align-items: center; gap: 12px; padding: 11px 26px; font-family: var(--serif); font-size: 17px; color: var(--txt-2); }
.marquee .it::after { content: "·"; color: var(--ble); font-weight: 700; }

/* ——— Tab panel crossfade ——— */
.mo .panel.on { animation: m-blurin .55s var(--ease-out) both; }

/* ——— Calculator ring: smooth fill + pop on change ——— */
.calc-ring { transition: --calc-ang .65s var(--ease-out); }
.calc-ring.pop { animation: m-ringpop .5s var(--ease-spring); }
#c-margin { transition: color .35s ease; }

/* ——— Micro-interactions: hover lifts ——— */
.tcard, .price, .pvis, .stat, .step, .calc-card { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease; }
.tcard:hover { transform: translateY(-6px); box-shadow: var(--ombre-2); }
.price:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.price.feat:hover { transform: translateY(-10px); }
.pvis:hover { transform: translateY(-4px) scale(1.005); }
.fmini { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.fmini:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.tab { transition: transform .2s var(--ease-spring), background .2s, color .2s, border-color .2s; }
.tab:hover:not(.on) { transform: translateY(-2px); border-color: var(--ble); }
.cmp tbody tr { transition: background .2s ease; }
.cmp tbody tr:hover { background: color-mix(in srgb, var(--ble) 6%, transparent); }
.cmp tbody tr:hover td.bos { background: color-mix(in srgb, var(--ble) 16%, transparent); }
.day .dot { transition: transform .3s var(--ease-spring); }
.day .d:hover .dot { transform: scale(1.15) rotate(-6deg); }
.stat:hover .n { transform: scale(1.04); transition: transform .3s var(--ease-spring); display: inline-block; }
.qa summary { transition: color .2s ease; }
.qa summary:hover { color: var(--croute); }
.nav .links a { position: relative; }
.nav .links a::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background: var(--ble); transition: right .28s var(--ease-out); }
.nav .links a:hover::after { right: 0; }

/* Magnetic buttons get a smooth return + brighter sheen */
.btn.primary { transition: transform .25s var(--ease-spring), filter .2s, box-shadow .25s; }
.btn.primary::after { animation: m-sheen 4.5s ease-in-out infinite; }

/* Animated heading underline on section eyebrows */
.sec-head.in .eyebrow, .calc .eyebrow, .final .eyebrow { display: inline-block; }
.mo .sec-head.in .eyebrow { animation: m-fadeDown .6s var(--ease-out) both; }

/* Float chips keep bobbing (defined inline too; here for completeness) */

/* ============================================================
   Reduced motion: turn the whole show off, show end states.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero [data-enter], .phone-stage[data-enter], .hero .float { opacity: 1 !important; }
  .hero::after { display: none; }
}