/* =====================================================================
   Rupeevalley — motion
   ---------------------------------------------------------------------
   Hiding only happens when <html> has the .js class (set by js/head.js),
   so content is always visible if JavaScript fails. head.js also adds
   .reveal-all after a timeout if main.js never initialises.
   All motion is disabled under prefers-reduced-motion.
   Only opacity/transform/clip-path animate (GPU-friendly, no layout shift).
   ===================================================================== */

:root {
  --reveal-distance: 28px;
  --reveal-duration: .85s;
}

/* ------------------------------------------------- Scroll reveal states */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal="left"] { transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); }
.js [data-reveal="right"] { transform: translate3d(var(--reveal-distance), 0, 0); }
.js [data-reveal="clip"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0 round var(--r-lg));
  transition: clip-path 1.1s var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }
.js [data-reveal="clip"].is-revealed { clip-path: inset(0 0 0 0 round var(--r-lg)); }

/* Fail-safe: everything visible */
.reveal-all [data-reveal], .reveal-all [data-hero] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important; }

/* ------------------------------------------------------ Hero entrance */
.js [data-hero] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.js .hero-ready [data-hero] {
  animation: heroIn .9s var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}
.js .hero-ready [data-hero="visual"] { animation-name: heroVisualIn; animation-duration: 1.1s; }
.js .hero-ready [data-hero="form"] { animation-name: heroFormIn; animation-duration: 1s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroVisualIn {
  from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes heroFormIn {
  from { opacity: 0; transform: translate3d(24px, 16px, 0); }
  to { opacity: 1; transform: none; }
}

/* Dashboard chart: line draws, area fades, marker pops */
.js .chart-line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.js .chart-area { opacity: 0; }
.js .chart-dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js .hero-ready .chart-line { animation: drawLine 1.6s var(--ease-out) .55s forwards; }
.js .hero-ready .chart-area { animation: fadeIn 1s var(--ease) 1.1s forwards; }
.js .hero-ready .chart-dot { animation: popIn .5s var(--ease-out) 1.9s forwards; }
.js .donut-arc { stroke-dashoffset: var(--arc-len, 200); }
.js .hero-ready .donut-arc { animation: drawArc 1.4s var(--ease-out) .9s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes drawArc { to { stroke-dashoffset: var(--arc-offset, 0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes popIn { 60% { opacity: 1; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }

/* Gentle float on the hero summary chip (one element, slow, compositor-only) */
.hero-ready .dash-float { animation: floaty 6s ease-in-out 2.4s infinite; }
@keyframes floaty { 50% { transform: translateY(-6px); } }

/* --------------------------------------------- Step icons draw on reveal */
.js .step .step-icon svg path, .js .step .step-icon svg circle, .js .step .step-icon svg rect {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  transition: stroke-dashoffset 1.2s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 250ms);
}
.js .step.is-revealed .step-icon svg path, .js .step.is-revealed .step-icon svg circle, .js .step.is-revealed .step-icon svg rect { stroke-dashoffset: 0; }

/* Sunrise arc rises into place when its section is revealed */
.js .sunrise::before { transform: translateX(-50%) translateY(18%); opacity: .4; transition: transform 1.6s var(--ease-out), opacity 1.6s var(--ease-out); }
.js .sunrise.is-revealed::before { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Section tone hand-offs: sections marked data-tone-fade blend from the
   previous section's colour (set in style.css) and the blend band eases
   in as the section reveals, so white → cream → light blue → navy
   transitions feel continuous rather than hard-edged. */
.js [data-tone-fade]::after { opacity: 0; transition: opacity 1.2s var(--ease); }
.js [data-tone-fade].is-revealed::after { opacity: 1; }

/* Mini bars in calculator cards grow on reveal */
.js .calc-card .mini-bars span { transform: scaleY(.15); transform-origin: bottom; transition: transform .8s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0ms) + 200ms); }
.js .calc-card.is-revealed .mini-bars span { transform: scaleY(1); }

/* Final CTA orbits slowly scale in */
.js .final-cta .orbit { opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease-out); }
.js .final-cta.is-revealed .orbit { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ------------------------------------------------------ Dropdowns */
@media (min-width: 981px) {
  .dropdown {
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
    transition: opacity .2s var(--ease), transform .25s var(--ease-out), visibility 0s linear .25s;
  }
  .dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease-out); }
}
@media (max-width: 980px) {
  .dropdown { display: none; }
  .dropdown.is-open { display: block; animation: fadeDown .25s var(--ease-out); }
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Without JS, dropdowns open on hover/focus-within (desktop) */
.no-js .has-dropdown:hover .dropdown, .no-js .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; display: block; }

/* ------------------------------------------------------ Accordion */
.acc-panel { transition: height .4s var(--ease-out); }
.acc-panel-inner { transition: opacity .35s var(--ease), transform .35s var(--ease-out); }
.acc-panel[data-state="closed"] .acc-panel-inner { opacity: 0; transform: translateY(-6px); }

/* ------------------------------------------------- Calculator results */
.result-flash { animation: resultFlash .45s var(--ease-out); }
@keyframes resultFlash { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.donut-seg { transition: stroke-dasharray .7s var(--ease-out), stroke-dashoffset .7s var(--ease-out); }
.bar-fill { transition: transform .7s var(--ease-out); transform-origin: left; }

/* Counter numbers avoid width jumps */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-hero] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .chart-line, .js .donut-arc { stroke-dashoffset: var(--arc-offset, 0) !important; }
  .js .chart-line { stroke-dashoffset: 0 !important; }
  .js .chart-area, .js .chart-dot { opacity: 1 !important; transform: none !important; }
  .js .step .step-icon svg * { stroke-dashoffset: 0 !important; }
  .js .sunrise::before { transform: translateX(-50%) !important; opacity: 1 !important; }
  .js .calc-card .mini-bars span { transform: none !important; }
  .js .final-cta .orbit { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .hero-ready .dash-float { animation: none !important; }
}

/* ------------------------------------------- Calculator processing motion */
.is-calculating .calc-progress span { animation: calcSweep 1s var(--ease) infinite; }
.is-calculating .calc-dots i { animation: calcDot 1s ease-in-out infinite; }
.is-calculating .calc-dots i:nth-child(2) { animation-delay: .15s; }
.is-calculating .calc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes calcSweep { from { left: -40%; } to { left: 100%; } }
@keyframes calcDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.calc-results.is-settling { animation: panelSettle .5s var(--ease-out); }
@keyframes panelSettle { 0% { box-shadow: inset 0 0 0 2px rgba(45, 131, 246, .0); } 30% { box-shadow: inset 0 0 0 2px rgba(45, 131, 246, .28); } 100% { box-shadow: inset 0 0 0 2px rgba(45, 131, 246, 0); } }
.calc-field.is-changing .calc-input, .field.is-changing input { animation: fieldPulse .6s var(--ease-out); }
@keyframes fieldPulse { 0% { box-shadow: 0 0 0 0 rgba(45, 131, 246, .35); } 100% { box-shadow: 0 0 0 8px rgba(45, 131, 246, 0); } }

/* Reach-out dialog entrance */
.reach-modal[open] { animation: modalIn .32s var(--ease-out); }
.reach-modal[open]::backdrop { animation: fadeIn .25s var(--ease) forwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .is-calculating .calc-progress span { animation: none !important; left: 0; width: 100%; }
  .calc-results.is-settling, .reach-modal[open] { animation: none !important; }
}

/* ------------------------------------------------ Homepage enhancements */
/* Hero: restrained drifting light (compositor-only transform) */
.hero::before { animation: heroDrift 22s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: translate3d(-12%, 0, 0) scale(1); } to { transform: translate3d(14%, 8%, 0) scale(1.12); } }
/* Second floating card drifts out of phase with the donut chip */
.hero-ready .dash-float-2 { animation: floaty2 7s ease-in-out 2.6s infinite; }
@keyframes floaty2 { 50% { transform: translateY(7px); } }

/* Balance transfer: card rises from the right, bars grow, glow breathes */
.js .bt-feature .bt-bars .bar-fill { transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.reveal-all) .bt-feature:not(.is-revealed) .bt-bars .bar-fill { transform: scaleX(0) !important; }
}
.bt-feature .bt-bars .bar-fill { transition: transform 1.1s var(--ease-out) .5s; }
.bt-glow { animation: glowBreathe 9s ease-in-out infinite alternate; }
@keyframes glowBreathe { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
.js .bt-feature .bt-col { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .bt-feature.is-revealed .bt-col { opacity: 1; transform: none; }
.js .bt-feature.is-revealed .bt-col-new { transition-delay: .25s; }
.js .bt-feature .bt-arrow { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease) .45s, transform .5s var(--ease-out) .45s; }
.js .bt-feature.is-revealed .bt-arrow { opacity: 1; transform: none; }

/* Product cards: icon pops in after the card, nudges on hover */
.js .product-card .p-icon .icon { transform: scale(.6) rotate(-8deg); opacity: 0; transition: transform .6s var(--ease-out), opacity .4s var(--ease); transition-delay: calc(var(--reveal-delay, 0ms) + 250ms); }
.js .product-card.is-revealed .p-icon .icon { transform: none; opacity: 1; }
.product-card:hover .p-icon .icon { animation: iconNudge .6s var(--ease-out); }
@keyframes iconNudge { 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
@media (max-width: 640px) { .product-card:hover { transform: none; } }

/* Why section icons rise into place */
.js .why-item .why-ico { transform: translateY(10px) scale(.85); opacity: 0; transition: transform .6s var(--ease-out), opacity .5s var(--ease); transition-delay: calc(var(--reveal-delay, 0ms) + 200ms); }
.js .why-item.is-revealed .why-ico { transform: none; opacity: 1; }

/* Article cards: artwork bars grow on reveal */
.js .article-card .article-art svg path ~ rect { transform: scaleY(.2); transform-origin: bottom; transform-box: fill-box; transition: transform .9s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0ms) + 200ms); }
.js .article-card.is-revealed .article-art svg path ~ rect { transform: none; }

/* Fail-safe and reduced-motion coverage for the new elements */
.reveal-all .bt-col, .reveal-all .bt-arrow, .reveal-all .p-icon .icon, .reveal-all .why-ico, .reveal-all .article-art svg path ~ rect { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal-all .bt-feature .bt-bars .bar-fill { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .bt-glow, .hero-ready .dash-float-2 { animation: none !important; }
  .js .bt-feature .bt-col, .js .bt-feature .bt-arrow, .js .product-card .p-icon .icon, .js .why-item .why-ico { opacity: 1 !important; transform: none !important; }
  .js .article-card .article-art svg path ~ rect { transform: none !important; }
}