/* ===================================================================
   eCaaS – Premium Motion Layer
   Loaded after styles.css. Extends micro-interactions with spring
   physics, blur reveals, ambient glows, and haptic hover feedback.
   =================================================================== */

/* ── Extra easing tokens ────────────────────────────────────────── */
:root {
  --spring: cubic-bezier(.32,.72,0,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --expo:   cubic-bezier(.19,1,.22,1);
}

/* ===================================================================
   1. REVEAL ANIMATION — adds blur depth on entrance
   =================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity   .85s var(--spring),
    transform .85s var(--spring),
    filter    .85s var(--spring);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none !important; }
}

/* ===================================================================
   2. HERO FLOAT CARDS — gentle levitation loops
   =================================================================== */
.float-card--sale { animation: lev-a 4.2s ease-in-out infinite; }
.float-card--ai   { animation: lev-b 5.1s ease-in-out infinite; }

@keyframes lev-a {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
@keyframes lev-b {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

/* ===================================================================
   3. BUTTONS — spring press + glow trail
   =================================================================== */
.btn {
  transition:
    transform    .55s var(--spring),
    background   .3s  var(--spring),
    border-color .3s  var(--spring),
    box-shadow   .4s  var(--spring);
}
.btn:active {
  transform: scale(.96) !important;
  transition-duration: .08s !important;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 44px -12px rgba(255,90,44,.68);
}
.btn-ghost:hover {
  transform: translateY(-3px) scale(1.01);
}

/* ===================================================================
   4. BENTO CELLS — accent glow + icon bounce
   =================================================================== */
.cell {
  transition:
    border-color .45s var(--spring),
    transform    .5s  var(--spring),
    box-shadow   .5s  var(--spring);
}

/* radial glow overlay, fades in on hover */
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(255,90,44,.07), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--spring);
  pointer-events: none;
  z-index: 0;
}
.cell:hover {
  border-color: rgba(255,90,44,.28);
  transform: translateY(-5px);
  box-shadow:
    0 28px 64px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,90,44,.1);
}
.cell:hover::before { opacity: 1; }

/* icon spring */
.cell-ic {
  transition: transform .5s var(--bounce), box-shadow .4s var(--spring);
  position: relative;
  z-index: 1;
}
.cell:hover .cell-ic {
  transform: scale(1.14) rotate(-5deg);
  box-shadow: 0 8px 22px -6px rgba(255,90,44,.4);
}

/* feature image smoother expo zoom */
.cell-media img {
  transition: transform 1s var(--expo);
}
.cell--feature:hover .cell-media img { transform: scale(1.06); }

/* ===================================================================
   5. PRICING PLANS — lift + featured ambient pulse
   =================================================================== */
.plan {
  transition:
    border-color .4s var(--spring),
    transform    .5s var(--spring),
    box-shadow   .5s var(--spring);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 70px -28px rgba(0,0,0,.65);
}
.plan--featured:hover {
  box-shadow: 0 36px 80px -28px rgba(255,90,44,.52);
  border-color: rgba(255,90,44,.7);
}

/* subtle glow pulse on the featured card */
@keyframes plan-glow {
  0%,100% { box-shadow: 0 30px 70px -40px rgba(255,90,44,.45); }
  50%     { box-shadow: 0 40px 88px -28px rgba(255,90,44,.72); }
}
.plan--featured { animation: plan-glow 3.8s ease-in-out infinite; }

/* ===================================================================
   6. QUOTE / TESTIMONIAL CARDS
   =================================================================== */
.quote {
  transition:
    border-color .4s var(--spring),
    transform    .5s var(--spring),
    box-shadow   .4s var(--spring);
}
.quote:hover {
  border-color: var(--line-2);
  transform: translateY(-5px);
  box-shadow: 0 26px 58px -24px rgba(0,0,0,.55);
}

/* avatar pop */
.quote figcaption img {
  transition: transform .5s var(--spring), border-color .3s var(--spring);
}
.quote:hover figcaption img {
  transform: scale(1.1);
  border-color: var(--accent-line);
}

/* ===================================================================
   7. HOW-IT-WORKS STEPS
   =================================================================== */
.step {
  transition:
    border-color .4s var(--spring),
    transform    .5s var(--spring),
    box-shadow   .4s var(--spring);
}
.step:hover {
  border-color: var(--accent-line);
  transform: translateY(-5px);
  box-shadow: 0 22px 52px -24px rgba(255,90,44,.18);
}
.step-no {
  transition: transform .5s var(--bounce), box-shadow .4s var(--spring);
}
.step:hover .step-no {
  transform: scale(1.15);
  box-shadow: 0 12px 28px -6px rgba(255,90,44,.55);
}

/* ===================================================================
   8. PENDAR TABS & PANEL
   =================================================================== */
.tab {
  transition:
    background   .35s var(--spring),
    border-color .35s var(--spring),
    color        .25s var(--spring),
    transform    .35s var(--spring);
}
/* RTL: slide slightly inward on hover */
.tab:hover:not(.is-active) { transform: translateX(4px); }

/* panel crossfade with blur */
@keyframes fade {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: none;              filter: blur(0);   }
}
.panel.is-active { animation: fade .55s var(--spring); }

/* ===================================================================
   9. BANIMOD SECTION IMAGE
   =================================================================== */
.banimod-media {
  transition: transform .6s var(--spring), box-shadow .6s var(--spring);
}
.banimod-media:hover {
  transform: scale(1.015);
  box-shadow:
    0 52px 96px -30px rgba(0,0,0,.85),
    0 0 0 1px var(--accent-line);
}

/* ── Connect badge: live pulsing dot ─────────────────────────────── */
.connect-badge {
  gap: 10px;
}
.connect-badge .ic {
  animation: plug-glow 2.5s ease-in-out infinite;
}
@keyframes plug-glow {
  0%,100% { color: var(--accent); filter: drop-shadow(0 0 0px rgba(255,90,44,0)); }
  50%     { color: var(--accent-2); filter: drop-shadow(0 0 6px rgba(255,90,44,.6)); }
}

/* ===================================================================
   10. HERO PHOTO — depth scale on hover
   =================================================================== */
.hero-photo {
  transition: transform .65s var(--spring), box-shadow .65s var(--spring);
}
.hero-photo:hover {
  transform: scale(1.012);
  box-shadow:
    0 52px 96px -28px rgba(0,0,0,.9),
    0 0 0 1px var(--accent-line);
}

/* ===================================================================
   11. LOGO MARQUEE — hover lift
   =================================================================== */
.logo-lockup {
  transition:
    color     .3s var(--spring),
    transform .4s var(--spring),
    opacity   .3s var(--spring);
}
.logo-lockup:hover { transform: translateY(-3px); }

/* ===================================================================
   12. SOCIAL ICONS — bounce lift + accent glow
   =================================================================== */
.social-row a {
  transition:
    border-color .35s var(--spring),
    transform    .4s  var(--bounce),
    box-shadow   .35s var(--spring);
}
.social-row a:hover {
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 10px 24px -8px rgba(255,90,44,.32);
}

/* ===================================================================
   13. EYEBROW PILL — shimmer sweep
   =================================================================== */
.eyebrow {
  position: relative;
  overflow: hidden;
}
.eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.32) 50%,
    transparent 70%
  );
  transform: translateX(-200%);
  animation: eyebrow-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes eyebrow-shimmer {
  0%,55%  { transform: translateX(-200%); }
  100%    { transform: translateX(300%); }
}

/* ===================================================================
   14. CHAT FAB — pulse ring
   =================================================================== */
.chat-fab::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: fab-ring 3.2s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
.chat-widget.open .chat-fab::before { animation: none; }
@keyframes fab-ring {
  0%   { transform: scale(.85); opacity: .35; }
  80%  { transform: scale(1.65); opacity: 0;  }
  100% { transform: scale(1.65); opacity: 0;  }
}

/* ===================================================================
   15. STAT NUMBERS — spring pop when counted
   =================================================================== */
@keyframes stat-pop {
  0%   { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.stat-num.counted {
  animation: stat-pop .65s var(--bounce) forwards;
  text-shadow: 0 0 32px rgba(255,90,44,.42);
}

/* ===================================================================
   16. NAV UNDERLINE — spring expand
   =================================================================== */
.main-nav a::after {
  transition: width .4s var(--spring);
}

/* ===================================================================
   17. HEADER — subtle entrance on load
   =================================================================== */
.site-header {
  animation: header-in .7s var(--spring) both;
}
@keyframes header-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ===================================================================
   REDUCED MOTION — strip all extras
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .float-card--sale,
  .float-card--ai         { animation: none; }
  .plan--featured         { animation: none; }
  .eyebrow::after         { display: none; }
  .chat-fab::before       { display: none; }
  .connect-badge .ic      { animation: none; }
  .stat-num.counted       { animation: none; text-shadow: none; }
  .site-header            { animation: none; }
  .panel.is-active        { animation: none; }
  .cell, .plan, .quote,
  .step, .banimod-media,
  .hero-photo,
  .social-row a           { transition: none; }
}