/* ═══════════════════════════════════════════════════════════════════
   DOUBLE DOWN AI — ULTRA LAYER (2026)
   Sits on top of dd-upgrade.css + dd-mobile.css. Pure additive.
   Adds: real WebGL 3D stage, holographic cards, cursor blob,
   scroll progress, page-transition curtain, premium mobile polish.
   Brand-true: green #10b981, gold #d4af37, ink #030303.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens (additive, namespaced) ────────────────────────────────── */
:root{
  --u-ink:#fff;
  --u-g:#10b981;
  --u-g2:#34d399;
  --u-au:#d4af37;
  --u-au2:#f6d77a;
  --u-cy:#22d3ee;
  --u-edge:rgba(255,255,255,.08);
  --u-edge-2:rgba(255,255,255,.16);
  --u-glass:rgba(8,10,14,.68);
  --u-shadow-lg:0 36px 88px -22px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04);
  --u-glow-g:0 0 0 1px rgba(16,185,129,.22),0 24px 64px rgba(16,185,129,.22);
  --u-glow-au:0 0 0 1px rgba(212,175,55,.24),0 24px 64px rgba(212,175,55,.24);
  --u-ease:cubic-bezier(.16,1,.3,1);
  --u-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --u-ease-power:cubic-bezier(.65,.05,.35,1);
}

/* ── Scroll progress bar (top of page, gradient) ────────────────── */
.dd-prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;pointer-events:none;
  background:linear-gradient(90deg,#10b981,#22d3ee 50%,#d4af37);
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  transition:transform .12s linear;
  box-shadow:0 0 12px rgba(16,185,129,.55),0 0 24px rgba(212,175,55,.25);
  will-change:transform;
}
.dd-prog::after{
  content:"";position:absolute;right:0;top:-2px;width:80px;height:6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));
  filter:blur(6px);opacity:.85;
}

/* ── Cursor blob — JS sets --x,--y; replaces dd-spotlight on capable devices ── */
.dd-blob-cursor{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:9996;
  transform:translate3d(calc(var(--x,-9999px) - 50%),calc(var(--y,-9999px) - 50%),0);
  background:
    radial-gradient(circle at 35% 30%,rgba(16,185,129,.18),transparent 55%),
    radial-gradient(circle at 65% 70%,rgba(212,175,55,.12),transparent 60%);
  mix-blend-mode:screen;filter:blur(40px) saturate(140%);
  transition:opacity .35s var(--u-ease);opacity:0;will-change:transform;
}
.dd-blob-cursor.on{opacity:1}
@media(hover:none),(max-width:768px){.dd-blob-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){.dd-blob-cursor{display:none!important}}

/* ── 3D stage container — Three.js renderer mounts here ────────── */
.dd-stage-3d{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  contain:strict;overflow:hidden;
}
/* Guarantee the parent is a positioning context so the WebGL canvas
   anchors to the hero, not the viewport. Modern browsers via :has(); */
@supports selector(:has(*)){
  :where(section,div,header,main,article):has(> .dd-stage-3d){position:relative}
}
/* On desktop, fade the LEFT side of the 3D scene so geometry doesn't overlap
   H1 text (which sits in the left grid column on hero layouts). Mask uses
   alpha-bias linear gradient: left ~30% is hidden, blends to full at 60%+. */
@media (min-width:881px){
  .dd-stage-3d{
    -webkit-mask-image:linear-gradient(95deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0)    22%,
      rgba(0,0,0,.25)  38%,
      rgba(0,0,0,.85)  62%,
      rgba(0,0,0,1)    100%);
    mask-image:linear-gradient(95deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0)    22%,
      rgba(0,0,0,.25)  38%,
      rgba(0,0,0,.85)  62%,
      rgba(0,0,0,1)    100%);
  }
  /* Pages where the hero text fills the full width (e.g. city pages) opt out
     by adding .dd-stage-3d.full to keep geometry across the whole canvas. */
  .dd-stage-3d.full{-webkit-mask-image:none;mask-image:none}
}
.dd-stage-3d canvas{
  width:100%!important;height:100%!important;display:block;
  opacity:0;transition:opacity .8s var(--u-ease);
}
.dd-stage-3d.ready canvas{opacity:1}
.dd-stage-3d::after{
  /* darken bottom edge so 3D bg blends with content */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(at 50% 40%,transparent 30%,rgba(3,3,3,.55) 75%,#030303 100%);
}

/* ── Holographic card (premium product/CTA card with brand sheen) ── */
.dd-holo{
  position:relative;border-radius:24px;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.005) 60%),
    radial-gradient(at 100% 0%,rgba(212,175,55,.10),transparent 55%),
    radial-gradient(at 0% 100%,rgba(16,185,129,.10),transparent 55%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--u-shadow-lg);
  transition:transform .55s var(--u-ease),box-shadow .55s var(--u-ease),border-color .35s ease;
}
.dd-holo::before{
  /* moving sheen — driven by --mx (0..100) */
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 18%),
    rgba(255,255,255,.18) var(--mx,50%),
    transparent calc(var(--mx,50%) + 18%));
  mix-blend-mode:overlay;opacity:.0;transition:opacity .35s var(--u-ease);
}
.dd-holo::after{
  /* radial spotlight under cursor */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    rgba(16,185,129,.22),transparent 60%);
  opacity:0;transition:opacity .35s var(--u-ease);mix-blend-mode:screen;
}
.dd-holo:hover{transform:translateY(-4px);border-color:rgba(212,175,55,.32);box-shadow:var(--u-glow-au)}
.dd-holo:hover::before,.dd-holo:hover::after{opacity:1}
.dd-holo > *{position:relative;z-index:1}

/* ── Liquid blob (SVG-mask powered ambient shape) ──────────────── */
.dd-blob{
  position:absolute;width:520px;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 220deg,#10b981,#22d3ee,#d4af37,#10b981);
  filter:blur(64px) saturate(1.4);opacity:.32;pointer-events:none;
  animation:ddBlobMorph 22s ease-in-out infinite alternate;
  will-change:transform,border-radius;
}
.dd-blob-2{
  background:conic-gradient(from 60deg,#d4af37,#22d3ee,#10b981,#d4af37);
  animation-duration:28s;animation-delay:-6s;opacity:.24;
}
@keyframes ddBlobMorph{
  0%  {border-radius:42% 58% 70% 30% / 50% 40% 60% 50%;transform:translate3d(0,0,0) rotate(0)   scale(1)}
  50% {border-radius:60% 40% 30% 70% / 40% 60% 50% 60%;transform:translate3d(8%,-6%,0) rotate(70deg) scale(1.06)}
  100%{border-radius:48% 52% 56% 44% / 60% 50% 50% 40%;transform:translate3d(-6%,8%,0) rotate(-50deg) scale(.94)}
}

/* ── Page transition curtain — slides up off-page on initial load ── */
.dd-curtain{
  position:fixed;inset:0;z-index:99998;pointer-events:none;
  background:linear-gradient(180deg,#030303 0%,#050505 50%,#000 100%);
  transform:translateY(0);
  transition:transform 1.05s var(--u-ease-power);
}
.dd-curtain.lift{transform:translateY(-101%)}
.dd-curtain::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(16,185,129,.18),transparent 60%);
  filter:blur(40px);opacity:.7;
}
.dd-curtain::after{
  /* hairline accent that exits last */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#10b981 40%,#d4af37 60%,transparent);
  box-shadow:0 0 28px rgba(16,185,129,.7),0 0 64px rgba(212,175,55,.45);
}
@media(prefers-reduced-motion:reduce){.dd-curtain{display:none}}

/* ── Section divider — animated SVG-style plus motif ─────────── */
.dd-plus-rule{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:36px auto;color:rgba(255,255,255,.32);
}
.dd-plus-rule::before,.dd-plus-rule::after{
  content:"";flex:1;max-width:140px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent);
}
.dd-plus-rule i{
  display:inline-block;width:10px;height:10px;background:var(--u-au);
  border-radius:2px;transform:rotate(45deg);
  box-shadow:0 0 22px var(--u-au),inset 0 0 0 1px rgba(0,0,0,.45);
  animation:ddPlusBeat 4s ease-in-out infinite;
}
@keyframes ddPlusBeat{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(.85)}}

/* ── Hero number row (animated, GPU-accelerated counters) ───── */
.dd-stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:rgba(255,255,255,.05);border:1px solid var(--u-edge);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(12px);
}
.dd-stat-cell{padding:22px 20px;background:rgba(8,10,12,.7);position:relative}
.dd-stat-cell .v{
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(28px,3.5vw,52px);
  letter-spacing:-1.4px;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.dd-stat-cell .v.gold{
  background:linear-gradient(135deg,#d4af37,#f6d77a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dd-stat-cell .l{
  margin-top:10px;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.55);
}

/* ── Soft frame around 3D-hero hero text (improves legibility over WebGL) ── */
.dd-on3d{position:relative}
.dd-on3d::before{
  content:"";position:absolute;inset:-12px -16px;border-radius:18px;z-index:-1;
  background:radial-gradient(at 50% 50%,rgba(3,3,3,.5),transparent 75%);
  filter:blur(6px);
}

/* ── Magnetic glowing CTA (companion to .dd-cta but with halo) ── */
.dd-cta-halo{position:relative;display:inline-flex;isolation:isolate}
.dd-cta-halo::before{
  content:"";position:absolute;inset:-22px;border-radius:100px;z-index:-1;
  background:radial-gradient(closest-side,rgba(16,185,129,.45),transparent 70%);
  filter:blur(22px);opacity:.85;animation:ddCtaPulse 4.5s ease-in-out infinite;
}
@keyframes ddCtaPulse{
  0%,100%{transform:scale(1);opacity:.65}
  50%    {transform:scale(1.08);opacity:.92}
}

/* ── iPhone / mobile polish ───────────────────────────────────── */
@media (max-width:768px){
  /* Heavier blobs are GPU-expensive on mobile — soften */
  .dd-blob{width:360px;filter:blur(48px) saturate(1.25);opacity:.32}
  .dd-stage-3d{display:none} /* mobile hero uses CSS aurora instead — see dd-upgrade.css */
  .dd-prog{height:1.5px}
  .dd-holo{border-radius:18px}
  .dd-stat-cell{padding:16px 14px}
  .dd-cta-halo::before{filter:blur(14px)}
  /* Bigger tap targets on key CTAs (Apple HIG: ≥44pt) */
  a.dd-cta,a.dd-cta-ghost,button.dd-cta,button.dd-cta-ghost{min-height:48px;padding:13px 24px}
}

/* ── Safe-area aware bottom-pinned bar ───────────────────────── */
.dd-pinbar{
  position:fixed;left:12px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--u-glass);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(212,175,55,.22);
  border-radius:18px;padding:10px 14px;
  display:none;align-items:center;justify-content:space-between;gap:10px;
  z-index:9500;box-shadow:var(--u-shadow-lg);
  transform:translateY(140%);transition:transform .55s var(--u-ease);
}
.dd-pinbar.on{transform:translateY(0)}
@media(max-width:640px){.dd-pinbar{display:flex}}

/* ── Soft skeleton (loading placeholder for slow connections) ── */
.dd-skel{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.10),rgba(255,255,255,.04));
  background-size:200% 100%;animation:ddSkel 1.6s linear infinite;
  border-radius:8px;color:transparent;
}
@keyframes ddSkel{from{background-position:0 0}to{background-position:200% 0}}

/* ── Refined link hover everywhere (footer, nav etc — opt-in) ─ */
.dd-link-fx{position:relative;display:inline-block}
.dd-link-fx::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,#10b981,#d4af37);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--u-ease);
}
.dd-link-fx:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ── Reveal-on-scroll variants (additional to dd-svr in dd-upgrade.css) ── */
@supports (animation-timeline:view()){
  .dd-svr-rise{
    animation:ddRise linear both;animation-timeline:view();animation-range:entry 0% cover 36%;
    will-change:opacity,transform,filter;
  }
  @keyframes ddRise{
    from{opacity:0;transform:translateY(80px) scale(.96);filter:blur(10px) saturate(.7)}
    60% {opacity:1;filter:blur(0) saturate(1)}
    to  {opacity:1;transform:none}
  }
  .dd-svr-flip{
    animation:ddFlip linear both;animation-timeline:view();animation-range:entry 0% cover 30%;
    transform-origin:50% 100%;perspective:1100px;
  }
  @keyframes ddFlip{
    from{opacity:0;transform:rotateX(28deg) translateY(40px)}
    to  {opacity:1;transform:none}
  }
}
@supports not (animation-timeline:view()){
  .dd-svr-rise,.dd-svr-flip{opacity:0;transform:translateY(36px);transition:opacity .8s var(--u-ease),transform .8s var(--u-ease)}
  .dd-svr-rise.in,.dd-svr-flip.in{opacity:1;transform:none}
}

/* ── Number ticker font for live-ish stats ─────────────────── */
.dd-num{font-variant-numeric:tabular-nums;font-family:'Space Mono',monospace;letter-spacing:-.5px}

/* ── Aurora "v2" — slightly cooler tone, used behind testimonials etc ── */
.dd-aurora-cool{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(at 8% 18%,hsla(196,84%,50%,.30) 0,transparent 55%),
    radial-gradient(at 88% 22%,hsla(160,82%,42%,.28) 0,transparent 55%),
    radial-gradient(at 50% 90%,hsla(48,74%,52%,.22) 0,transparent 55%);
  filter:blur(60px) saturate(1.18);
  contain:strict;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .dd-blob,.dd-blob-2,.dd-cta-halo::before,.dd-plus-rule i{animation:none!important}
  .dd-prog{display:none}
  .dd-holo{transition:none}
}

/* ── Tab visibility — pause expensive bits when hidden ─────── */
.dd-paused .dd-blob,.dd-paused .dd-blob-2,
.dd-paused .dd-cta-halo::before,.dd-paused .dd-plus-rule i{
  animation-play-state:paused!important;
}