/* =========================================================================
   Muninn — "Alive" layer
   Additive motion/animation layer that sits on top of styles.css.
   Same palette tokens, just motion on top. Loaded site-wide via alive.js,
   which injects the #ambient canvas and .scroll-progress bar at runtime.
   styles.css is untouched.
   ========================================================================= */

/* ---------- ambient three.js canvas (fixed, behind everything) ---------- */
#ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 2.4s ease;
}
#ambient.is-on{opacity:.8;}
main,.site-footer{position:relative;z-index:1;}
/* .cookie-banner is intentionally NOT in the group above: its position:fixed
   (styles.css) must be preserved so it overlays the viewport, not the page end.
   Its z-index:100 already keeps it above the ambient layer. */
/* header above main so the nav dropdown paints and hit-tests over page content */
.site-header{position:relative;z-index:2;}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--seafoam),var(--pink));
  border-radius:0 99px 99px 0;
}

/* ---------- entrance + scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.25,1),transform .8s cubic-bezier(.2,.65,.25,1);}
  .rv.in{opacity:1;transform:none;}
  .rv-d1{transition-delay:.1s;} .rv-d2{transition-delay:.22s;} .rv-d3{transition-delay:.34s;} .rv-d4{transition-delay:.46s;}

  /* hero entrance plays on load without waiting for the observer */
  .hero .rv{transform:translateY(20px);}

  /* hero photo: gentle perpetual bob + shadow breathing */
  .hero-image-slot{
    animation:heroFloat 7s ease-in-out infinite;
    box-shadow:0 24px 60px rgba(30,26,23,0.16);
    transition:box-shadow 3.5s ease;
    will-change:transform;
  }
  @keyframes heroFloat{
    0%,100%{transform:translate(-50%,-50%) rotate(-.4deg);}
    50%{transform:translate(-50%,-52.5%) rotate(.4deg);}
  }
  @media(max-width:900px){
    @keyframes heroFloat{
      0%,100%{transform:translateY(0) rotate(-.3deg);}
      50%{transform:translateY(-8px) rotate(.3deg);}
    }
  }

  /* value cards: lift + tilt handled in JS, smooth return here */
  .card.hover{transition:border-color .25s, box-shadow .35s, transform .45s cubic-bezier(.2,.65,.25,1);}

  /* feature icons wiggle once when revealed */
  .in .feature-icon{animation:iconPop .7s cubic-bezier(.3,1.6,.4,1) both;animation-delay:.25s;}
  @keyframes iconPop{0%{transform:scale(.6) rotate(-8deg);}100%{transform:scale(1) rotate(0);}}

  /* CTA band: slow living gradient */
  .cta-band{
    background:linear-gradient(120deg,var(--seafoam),var(--pink) 50%,var(--seafoam));
    background-size:240% 240%;
    animation:bandShift 14s ease-in-out infinite;
  }
  @keyframes bandShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

  /* primary CTA: occasional sheen sweep */
  .btn-gold{position:relative;overflow:hidden;}
  .btn-gold::after{
    content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,0.45),transparent);
    transform:skewX(-20deg);animation:sheen 5.5s ease-in-out infinite;
  }
  @keyframes sheen{0%,72%{left:-80%;}88%,100%{left:140%;}}

  /* eyebrow underline draw-in */
  .rv.in .eyebrow::after,.eyebrow.rv.in::after{transform:scaleX(1);}
  .eyebrow{position:relative;display:inline-block;}
  .eyebrow::after{
    content:"";position:absolute;left:0;bottom:-4px;width:38px;height:2px;
    background:var(--pink);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform .7s cubic-bezier(.2,.65,.25,1) .35s;
  }
}

/* ---------- live countdown chip over hero photo (home) ---------- */
.live-chip{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,251,242,0.92);backdrop-filter:blur(8px);
  border:1px solid var(--border2);border-radius:99px;
  padding:7px 14px;font-size:13px;font-weight:600;color:var(--dg);
  box-shadow:0 8px 22px rgba(30,26,23,0.14);
}
.live-chip .dot{
  width:8px;height:8px;border-radius:50%;background:var(--pink);
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(108,43,217,0.45);}
  50%{box-shadow:0 0 0 6px rgba(108,43,217,0);}
}
.live-chip time{font-variant-numeric:tabular-nums;color:var(--pink-strong);}

/* ---------- upload toasts floating off the hero photo (home) ---------- */
.hero-image-slot{overflow:visible;}
.upload-toast{
  position:absolute;right:-14px;bottom:18px;z-index:3;
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--border2);border-radius:14px;
  padding:9px 14px;font-size:13.5px;color:var(--text2);white-space:nowrap;
  box-shadow:0 12px 30px rgba(30,26,23,0.16);
  opacity:0;pointer-events:none;
}
.upload-toast .avatar{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:var(--seafoam);border:1px solid var(--border2);flex:none;
}
.upload-toast strong{color:var(--text);font-weight:600;}
@media (prefers-reduced-motion: no-preference){
  .upload-toast.show{animation:toastRise 3.4s cubic-bezier(.2,.65,.3,1) forwards;}
  @keyframes toastRise{
    0%{opacity:0;transform:translateY(14px) scale(.94);}
    12%{opacity:1;transform:translateY(0) scale(1);}
    78%{opacity:1;transform:translateY(-34px) scale(1);}
    100%{opacity:0;transform:translateY(-52px) scale(.97);}
  }
}
@media(max-width:900px){
  .upload-toast{right:8px;bottom:10px;}
}

/* ---------- value-prop counters feel "counted up" via JS (home) ---------- */
.stat-row{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;}
.stat .num{
  font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);color:var(--dg);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{font-size:13px;color:var(--text3);margin-top:5px;}