/* Berry OS — marketing motion layer (homepage + pricing). Progressive enhancement:
   anything that starts hidden is gated behind html.motion-ready (set by berry-motion.js). */
:root{--bm-ease:cubic-bezier(.2,.7,.2,1);--bm-grad:linear-gradient(135deg,#FFB547 0%,#FF7A1A 52%,#FF5A00 100%)}

/* Header: stronger glass after ~40px (class toggled on <html>) */
html.bm-scrolled .berry-nav-bar{transform:translateY(-4px) scale(.985);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 18px 48px rgba(0,0,0,.42)}
html[data-theme="light"].bm-scrolled .berry-nav-bar{box-shadow:0 18px 44px rgba(15,23,42,.13)}

/* Ambient aurora behind the hero (CSS only; paused off-screen by JS) */
.bh-hero{isolation:isolate}
.bm-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bm-aurora::before,.bm-aurora::after{content:"";position:absolute;width:70vmax;height:70vmax;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,26,.55),rgba(255,122,26,0) 70%);opacity:.16;will-change:transform;animation:bmDrift 26s var(--bm-ease) infinite alternate}
.bm-aurora::before{top:-30%;left:-12%}
.bm-aurora::after{top:-10%;right:-18%;background:radial-gradient(closest-side,rgba(255,181,71,.5),rgba(255,181,71,0) 70%);opacity:.12;animation-duration:32s;animation-direction:alternate-reverse}
html[data-theme="dark"] .bm-aurora::before{opacity:.2}
html[data-theme="dark"] .bm-aurora::after{opacity:.14}
@keyframes bmDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,4%,0) scale(1.08)}100%{transform:translate3d(-4%,8%,0) scale(.96)}}
.bm-off,.bm-off::before,.bm-off::after,html.bm-hidden .bm-aurora::before,html.bm-hidden .bm-aurora::after,html.bm-hidden .bm-track{animation-play-state:paused!important}

/* Hero headline: word reveal, then one shimmer pass over the <em> */
.motion-ready .bm-w{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(4px);animation:bmWord .8s var(--bm-ease) forwards;animation-delay:calc(var(--i) * 70ms + 80ms)}
@keyframes bmWord{to{opacity:1;transform:none;filter:none}}
.hero-headline em.bm-shine{background:linear-gradient(110deg,#FF7A1A 0%,#FF6A00 38%,#FFD08A 50%,#FF6A00 62%,#FF7A1A 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:bmShine 1.4s var(--bm-ease) .1s 1 forwards}
@keyframes bmShine{to{background-position:0 0}}

/* Dashboard preview: sparklines, live ping */
.bm-spark{display:block;width:100%;max-width:120px;height:24px;margin-top:6px;overflow:visible}
.bm-spark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motion-ready .bm-spark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--bm-ease) .2s}
.motion-ready .bm-in .bm-spark path{stroke-dashoffset:0}
.telemetry-val{font-variant-numeric:tabular-nums}
.window-status-badge .pulse-indicator{position:relative}
.window-status-badge .pulse-indicator::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--berry-success);animation:bmPing 2.2s var(--bm-ease) infinite}
@keyframes bmPing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.8);opacity:0}}

/* Scroll reveals */
.motion-ready .bm-r{transition:opacity .7s var(--bm-ease),transform .7s var(--bm-ease);transition-delay:calc(var(--d,0) * 70ms)}
.motion-ready .bm-r:not(.bm-in){opacity:0;transform:translateY(18px)}

/* Card lift + tilt (tilt only via JS on fine pointers) */
.module-card,.sec-card,.how-card{transition:transform .5s var(--bm-ease),box-shadow .5s var(--bm-ease),border-color .3s ease}
.sec-card:hover,.how-card:hover{transform:translateY(-4px);border-color:rgba(255,122,26,.35);box-shadow:0 14px 36px rgba(15,23,42,.12)}
.bm-tilt:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bm-tilting{transition:transform .15s linear,box-shadow .5s var(--bm-ease),border-color .3s ease}

/* Primary buttons: gradient sweep on hover */
.hero-btn.primary,.plan-cta-btn.primary{position:relative;overflow:hidden;isolation:isolate}
.hero-btn.primary::after,.plan-cta-btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,240,215,.55) 50%,transparent 70%);transform:translateX(-110%);transition:transform .8s var(--bm-ease)}
.hero-btn.primary:hover::after,.plan-cta-btn.primary:hover::after,.hero-btn.primary:focus-visible::after,.plan-cta-btn.primary:focus-visible::after{transform:translateX(110%)}

/* Integrations marquee (JS builds .bm-mq > .bm-track with aria-hidden clones) */
.bm-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bm-mq .bm-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:6px 0;animation:bmMarq 42s linear infinite}
.bm-mq .int-tile{flex:0 0 auto}
.bm-mq:hover .bm-track,.bm-mq:focus-within .bm-track{animation-play-state:paused}
@keyframes bmMarq{to{transform:translateX(calc(-50% - 10px))}}

/* Tools snap (problem section). Final state = default (no JS / reduced motion). */
.bm-snap{--p:1;--sx:230px;--sy:58px;position:relative;max-width:760px;margin:0 auto 56px;padding:56px 0}
.bm-snap-card{position:relative;padding:22px;border-radius:var(--berry-radius,18px);background:var(--berry-surface-2);border:1px solid var(--berry-line);opacity:calc(.35 + .65 * var(--p));transform:scale(calc(.96 + .04 * var(--p)));transition:box-shadow .6s var(--bm-ease),border-color .6s var(--bm-ease)}
.bm-snap-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;opacity:var(--p)}
.bm-snap-logo{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bm-grad);color:#171008;font-weight:900;font-size:14px}
.bm-snap-head strong{font-size:15px;color:var(--berry-text)}
.bm-snap-tag{margin-left:auto;font:700 10.5px/1 "Space Mono",monospace;letter-spacing:1px;text-transform:uppercase;color:var(--berry-brand)}
.bm-snap-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.bm-chip{padding:8px 14px;border-radius:999px;background:var(--berry-surface);border:1px solid var(--berry-line);font-size:13px;font-weight:700;color:var(--berry-text);will-change:transform;transform:translate(calc(var(--dx) * var(--sx) * (1 - var(--p))),calc(var(--dy) * var(--sy) * (1 - var(--p)))) rotate(calc(var(--r) * 1deg * (1 - var(--p))))}
.bm-snap.bm-snapped .bm-snap-card{border-color:rgba(255,122,26,.45);box-shadow:0 0 0 4px rgba(255,122,26,.08),0 18px 50px rgba(255,122,26,.14)}
@media (max-width:720px){.bm-snap{--sx:44px;--sy:46px;padding:40px 0}.bm-snap-tag{display:none}}

/* Pricing number change */
.plan-amount{font-variant-numeric:tabular-nums;display:inline-block}
.bm-roll{animation:bmRoll .5s var(--bm-ease)}
@keyframes bmRoll{from{opacity:0;transform:translateY(.35em)}}

@media (prefers-reduced-motion:reduce){
  .bm-aurora::before,.bm-aurora::after,.window-status-badge .pulse-indicator::after,.hero-btn.primary::after,.plan-cta-btn.primary::after{animation:none!important;display:none}
  .motion-ready .bm-r,.motion-ready .bm-w{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .motion-ready .bm-spark path{stroke-dashoffset:0}
  .bm-snap{--p:1!important}.bm-chip{transform:none}
  .bm-tilt:hover,.sec-card:hover,.how-card:hover,html.bm-scrolled .berry-nav-bar{transform:none}
}