/* =============================================================
   VIRTUNIZE · Motion & 3D enhancement layer
   Loads on top of styles.css. Everything degrades gracefully and
   is fully disabled under prefers-reduced-motion.
   ============================================================= */

/* ---- Scroll reveal ------------------------------------------ */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  [data-reveal="left"]  { transform: translateX(-32px); }
  [data-reveal="right"] { transform: translateX(32px); }
  [data-reveal="scale"] { transform: scale(.94); }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  
  /* ---- 3D hero background canvas ------------------------------ */
  .hero, .page-header { position: relative; overflow: hidden; }
  .hero-grid-bg, .page-header-grid-bg { position: absolute; inset: 0; }
  .v3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .v3d-canvas.is-ready { opacity: 1; }
  /* keep all hero content above the canvas */
  .hero .container, .page-header .container { position: relative; z-index: 2; }
  
  /* ---- Tilt (3D card hover) ----------------------------------- */
  .v-tilt {
    transform-style: preserve-3d;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
    will-change: transform;
  }
  .v-tilt__glare {
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.18), transparent 45%);
    opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 3;
  }
  .v-tilt:hover .v-tilt__glare { opacity: 1; }
  
  /* ---- Animated gradient shimmer on hero highlight ------------ */
  .hero h1 .highlight,
  .page-header h1 .highlight {
    background: linear-gradient(100deg, var(--maroon) 0%, var(--maroon-light) 35%, var(--maroon) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: v-shimmer 6s linear infinite;
  }
  @keyframes v-shimmer { to { background-position: 220% 0; } }
  
  /* ---- Gentle float on the hero metric card ------------------- */
  .metric-card { animation: v-float 7s ease-in-out infinite; will-change: transform; }
  @keyframes v-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
  }
  
  /* ---- Magnetic CTA: smooth return ---------------------------- */
  .btn-maroon { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; will-change: transform; }
  
  /* ---- Count-up numbers tabular alignment --------------------- */
  [data-count] { font-variant-numeric: tabular-nums; }

  /* ---- Respect reduced motion --------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .v3d-canvas { display: none !important; }
    .metric-card,
    .hero h1 .highlight,
    .page-header h1 .highlight { animation: none !important; }
    .v-tilt { transform: none !important; }
  }

  /* =============================================================
     CARD 3D — site-wide on every .card. The cursor-driven hover
     part (tilt / magnetic / press / --gx,--gy,--sx,--sy) lives in
     animations.js setupTilt(). Page-specific accents stay scoped.
     ============================================================= */

  /* Text — About "Six promises" heading wipes in (About only) */
  body.pg-about .promises-head h2 {
    clip-path: inset(0 -2% 100% -2%);
    transition: clip-path .85s cubic-bezier(.22,1,.36,1);
  }
  body.pg-about .promises-head.is-visible h2 { clip-path: inset(0 -2% -12% -2%); }

  /* 3D card entrance — flip up into place on scroll. Non-filled
     (backwards) so the hover tilt still takes over once it lands. */
  @keyframes vCard3d {
    from { opacity: 0; transform: perspective(1000px) rotateX(-16deg) translateY(30px); }
    to   { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0); }
  }
  .card.is-visible, .service.is-visible, .metric-card.is-visible {
    transform-origin: center bottom;
    animation: vCard3d .7s cubic-bezier(.22,1,.36,1) backwards;
  }
  .card:nth-child(2).is-visible, .service:nth-child(2).is-visible, .metric-card:nth-child(2).is-visible { animation-delay: .06s; }
  .card:nth-child(3).is-visible, .service:nth-child(3).is-visible, .metric-card:nth-child(3).is-visible { animation-delay: .12s; }
  .card:nth-child(4).is-visible, .service:nth-child(4).is-visible, .metric-card:nth-child(4).is-visible { animation-delay: .18s; }
  .card:nth-child(5).is-visible, .service:nth-child(5).is-visible, .metric-card:nth-child(5).is-visible { animation-delay: .24s; }
  .card:nth-child(6).is-visible, .service:nth-child(6).is-visible, .metric-card:nth-child(6).is-visible { animation-delay: .30s; }

  /* Hover glow + cursor-reactive shadow (--sx/--sy shift it opposite the cursor) */
  .card, .service, .metric-card {
    transition: box-shadow .3s ease, border-color .3s ease,
                transform .25s cubic-bezier(.22,1,.36,1);
  }
  .card:hover, .service:hover, .metric-card:hover {
    box-shadow: var(--sx,0px) calc(22px + var(--sy,0px)) 55px -18px rgba(193,72,90,.5);
    border-color: rgba(193,72,90,.4);
  }
  /* Blue variant — About blue promise cards + About team's 2nd card */
  body.pg-about .m-2col .card.deco-tile-alt:hover,
  body.pg-about .m-carousel .card:nth-child(2):hover {
    box-shadow: var(--sx,0px) calc(22px + var(--sy,0px)) 55px -18px rgba(37,99,235,.5);
    border-color: rgba(37,99,235,.45);
  }

  /* #1 · Layered depth — only a real ICON lifts: the first child must be
     a div WITHOUT its own positioning (excludes pricing-tier wrappers and
     badges, which would otherwise drag the text out of the card). Kept
     small so the icon never escapes the card edge. */
  .card { transform-style: preserve-3d; }
  .card > div:first-child:not([style*="position"]) {
    transform: translateZ(22px);
    transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease;
  }
  /* #2 · Icon lift on hover (bounded) */
  .card:hover > div:first-child:not([style*="position"]) {
    transform: translateZ(36px);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.4));
  }
  .card > h3 { transform: translateZ(15px); }
  .card > p  { transform: translateZ(9px); }

  /* #4 · Glowing edge light that tracks the cursor (.card has no ::before of its own) */
  .card::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; padding: 1.5px;
    background: radial-gradient(150px circle at var(--gx,50%) var(--gy,50%),
                rgba(255,255,255,.85), rgba(193,72,90,.5) 36%, transparent 66%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none; z-index: 4;
  }
  body.pg-about .m-2col .card.deco-tile-alt::before,
  body.pg-about .m-carousel .card:nth-child(2)::before {
    background: radial-gradient(150px circle at var(--gx,50%) var(--gy,50%),
                rgba(255,255,255,.85), rgba(37,99,235,.5) 36%, transparent 66%);
  }
  .card:hover::before { opacity: 1; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .card.is-visible, .service.is-visible, .metric-card.is-visible { animation: none !important; }
    .card::before { display: none !important; }
    body.pg-about .promises-head h2 { clip-path: none !important; transition: none !important; }
  }