/* ---- premium.css : scroll reveal, hover polish, ambient motion ---- */
:root{ --ease-premium:cubic-bezier(.16,.84,.44,1); }

html{ scroll-behavior:smooth; }

/* Sticky, blurred header */
header.top{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,249,0.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:box-shadow .3s var(--ease-premium), padding .3s var(--ease-premium);
}
header.top.scrolled{ box-shadow:0 1px 0 rgba(11,17,32,0.06), 0 8px 24px -12px rgba(11,17,32,0.14); }
header.top.scrolled .wrap{ padding-top:4px; padding-bottom:4px; }

/* Ambient gradient blobs — pure CSS, no image assets */
.ambient-bg{
  position:fixed; top:0; left:0; right:0; height:640px; overflow:hidden;
  z-index:-1; pointer-events:none;
}
.ambient-bg::before, .ambient-bg::after{
  content:""; position:absolute; width:480px; height:480px; border-radius:50%;
  filter:blur(90px); opacity:.4;
}
.ambient-bg::before{
  background:radial-gradient(circle,#ECFDF5,transparent 70%);
  top:-180px; right:-120px; animation:driftA 22s ease-in-out infinite alternate;
}
.ambient-bg::after{
  background:radial-gradient(circle,#EFF6FF,transparent 70%);
  top:120px; left:-180px; animation:driftB 26s ease-in-out infinite alternate;
}
@keyframes driftA{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-40px,30px) scale(1.08);} }
@keyframes driftB{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(30px,-20px) scale(1.05);} }

/* Subtle film-grain texture over the whole page — pure CSS, no image assets */
.grain-overlay{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mock "checkout report" card — pure CSS/SVG, no image assets.
   Round 11 (2026-08-20): moved out of the hero (was floating beside the
   headline, which read as out-of-place/confusing before a visitor knew
   what the page was about) into its own labeled "What your report looks
   like" example section further down index.html. Now a normal in-flow
   card at every width — no more absolute positioning/tilt tied to the hero. */
main{ position:relative; }
.score-mock{
  display:block; width:100%; max-width:340px; margin:0 0 28px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; box-shadow:0 16px 32px -18px rgba(11,17,32,0.18);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
.score-mock.in{ opacity:1; transform:translateY(0) scale(1); }
.score-mock:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -18px rgba(11,17,32,0.24); }

/* Small icon badges — check-cards and beyond-cards, pure CSS/SVG */
.check-icon, .beyond-icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; background:var(--accent-lt);
  margin-bottom:10px;
}
.beyond-icon{ width:30px; height:30px; border-radius:8px; }

/* Step icon boxes + number badges — shared by "How it works" / process
   sections on index.html and elite.html, pure CSS/SVG, no image assets */
.step-icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; background:var(--accent-lt);
  margin-bottom:14px;
}
.step-num{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  color:var(--accent-dk); background:var(--accent-lt); padding:3px 9px; border-radius:99px;
  letter-spacing:0.06em; margin-bottom:12px;
}

/* Small icon badge for tier cards on pricing.html, pure CSS/SVG */
.tier-icon{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:var(--accent-lt);
  margin-bottom:14px;
}
.score-mock-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--sub);
  margin-bottom:16px;
}
.score-mock-live{ color:#10B981; font-size:9px; animation:pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
.score-mock-grade{
  display:flex; align-items:baseline; gap:10px; margin-bottom:16px;
}
.score-mock-grade b{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:40px; color:var(--ink); line-height:1;
}
.score-mock-grade span{ font-size:11px; color:var(--sub); line-height:1.3; }
.score-mock-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.score-mock-row:last-child{ margin-bottom:0; }
.score-mock-row em{ font-style:normal; font-size:10.5px; color:var(--sub); width:96px; flex:none; }
.score-mock-row i{
  display:block; flex:1; height:5px; border-radius:99px; background:var(--line); position:relative; overflow:hidden;
}
.score-mock-row i::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w,50%);
  background:var(--accent); border-radius:99px;
}

/* Time-boxed announcement banner — TIME-BOXED CONTENT: safe to delete this whole
   block (and the matching <div class="deadline-banner"> on each page) after
   2026-08-26, once Shopify's checkout-extensibility deadline has passed. */
.deadline-banner{
  background:var(--ink); color:#fff; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:10px 16px;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.deadline-banner a{ color:#6EE7B7; font-weight:600; text-decoration:none; }
.deadline-banner a:hover{ text-decoration:underline; }

/* ---- Scroll reveal system ---- */
.reveal{
  opacity:0; transform:translateY(28px) rotate(-1.2deg);
  transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
  transition-delay:calc(var(--d,0) * 70ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:translateY(0) rotate(0deg); }

.reveal-rotate{ transform:translateY(20px) rotate(4deg) scale(.98); }
.reveal-rotate.in{ transform:translateY(0) rotate(0deg) scale(1); }

.reveal-fade{
  opacity:0; transition:opacity .8s var(--ease-premium);
  transition-delay:calc(var(--d,0) * 70ms);
}
.reveal-fade.in{ opacity:1; }

/* Hover lift for cards (declared after reveal so hover wins the transform) */
.check-card, .beyond-card, .step-card, .tier-card, .addon-card{
  transition:transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .35s var(--ease-premium);
}
.check-card:hover, .beyond-card:hover, .step-card:hover, .tier-card:hover, .addon-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 32px -18px rgba(11,17,32,0.22);
  border-color:rgba(4,120,87,0.35);
}
.platform-opt{ transition:transform .25s var(--ease-premium), border-color .15s ease, background .15s ease; }
.platform-opt:hover{ transform:translateY(-2px); }

/* Button micro-interactions */
.submit-btn, .cta-panel button{
  transition:transform .25s var(--ease-premium), background .2s ease, box-shadow .25s var(--ease-premium);
}
.submit-btn:hover:not(:disabled), .cta-panel button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(11,17,32,0.38);
}
.submit-btn:active:not(:disabled), .cta-panel button:active{ transform:translateY(0); }

/* Trust-badge checkmark icons rotate gently as you scroll */
.niche-badge svg, .no-login-badge svg, .form-hint svg{
  transform:rotate(var(--rot,0deg));
  transition:transform .15s linear;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-fade, .score-mock{ transition:none !important; opacity:1 !important; transform:none !important; }
  .check-card, .beyond-card, .step-card, .tier-card, .addon-card,
  .submit-btn, .cta-panel button, .platform-opt,
  .ambient-bg::before, .ambient-bg::after, .score-mock-live,
  .niche-badge svg, .no-login-badge svg, .form-hint svg{
    transition:none !important; animation:none !important; transform:none !important;
  }
  .grain-overlay{ display:none; }
}