/* =========================================================================
   ULTRA — Phase 3 elevation layer
   Layered on top of the existing Kindertally CSS. Additive only —
   never overrides brand colors, fonts, or core interactions.
   Goal: take warm-editorial → premium-warm-editorial.
   ========================================================================= */

/* -----------------------------------------------------------
   1. Refined typography rhythm
   Gentle ligatures + variation-axis sweep on hero headings.
   ----------------------------------------------------------- */
:root{
  --ultra-shadow-pop:  0 30px 60px -28px rgba(190,82,65,.55), 0 14px 28px -14px rgba(44,62,80,.18);
  --ultra-shadow-glass: 0 18px 36px -16px rgba(44,62,80,.22), inset 0 1px 0 rgba(255,255,255,.55);
}

html{
  font-feature-settings: "ss01", "kern", "liga", "calt";
  font-variant-numeric: oldstyle-nums proportional-nums;
}

h1, h2, .post-hero h1, .blog-hero h1{
  text-shadow: 0 1px 0 rgba(255,253,248,.4);
  font-feature-settings: "ss01", "kern", "liga", "dlig";
}

/* Optical-sizing lift on hover for hero h1 (Fraunces variable axis) */
@media (hover:hover){
  .hero h1, .post-hero h1, .blog-hero h1{
    transition: font-variation-settings .8s var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
  }
}

/* -----------------------------------------------------------
   2. Refined section divider — hand-drawn fox-track ornament
   Drop-in: <div class="ultra-divider"></div>
   ----------------------------------------------------------- */
.ultra-divider{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: clamp(40px, 6vw, 72px) auto;
  max-width: 540px;
  opacity: .65;
  pointer-events: none;
}
.ultra-divider::before, .ultra-divider::after{
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--blush, #EA8E7F) 30%, var(--apricot, #FFC17A) 70%, transparent 100%);
}
.ultra-divider .glyph{
  width: 32px; height: 16px;
  flex-shrink: 0;
  color: var(--blush-deep, #BE5241);
}
.ultra-divider .glyph svg{ width: 100%; height: 100%; display: block }

/* -----------------------------------------------------------
   3. Enhanced reveal — directional + stagger w/ momentum
   Adds [data-ultra-reveal] without touching existing .reveal.
   ----------------------------------------------------------- */
[data-ultra-reveal]{
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition:
    opacity .85s cubic-bezier(.2,.8,.2,1),
    transform .85s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-ultra-reveal="left"]{ transform: translate(-26px, 0) scale(.985) }
[data-ultra-reveal="right"]{ transform: translate(26px, 0) scale(.985) }
[data-ultra-reveal="fade"]{ transform: none }
[data-ultra-reveal].in{ opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce){
  [data-ultra-reveal]{ opacity: 1; transform: none; transition: none }
}

/* -----------------------------------------------------------
   4. Premium "shimmer" on price + stat numbers
   Gentle metallic sheen across the gradient text fill.
   ----------------------------------------------------------- */
.price-row .new,
.counter-strip .n,
.stat-row .n{
  background-image: linear-gradient(135deg, var(--blush-deep, #BE5241) 0%, var(--apricot-deep, #E89B3F) 45%, var(--blush-deep, #BE5241) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.4s var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
}
.counter-strip.in .n,
.stat-row.in .n{ background-position: 100% 50% }
@media (hover:hover){
  .price-row:hover .new{ background-position: 100% 50% }
}

/* -----------------------------------------------------------
   5. Buttons — refined press feedback + crisper focus ring
   ----------------------------------------------------------- */
.btn{
  -webkit-tap-highlight-color: transparent;
}
.btn::after{
  /* invisible expand-on-press ring; hardware-accelerated */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 60%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s, transform .5s var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
  z-index: -1;
}
.btn:active::after{
  opacity: 1;
  transform: scale(1.4);
  transition-duration: 0s, .35s;
}

/* -----------------------------------------------------------
   6. Cards — subtle lift-glow ring around critical surfaces
   ----------------------------------------------------------- */
.t-card, .ps-card, .benefit, .step, .post-card, .card{
  transition-property: transform, box-shadow, border-color, background;
}
@media (hover:hover){
  .t-card:hover, .ps-card:hover, .benefit:hover, .post-card:hover, .card:hover{
    box-shadow: var(--ultra-shadow-pop);
  }
}

/* -----------------------------------------------------------
   7. Mobile native-app polish
   - Bottom-rounded sticky bar (already nice; refine breath)
   - Tap chip pulse
   - Smooth iOS-style sheen on initial load
   ----------------------------------------------------------- */
@media (max-width: 860px){
  .sticky-buy{
    box-shadow:
      0 24px 50px -22px rgba(44,62,80,.4),
      0 10px 22px -10px rgba(201,122,109,.3),
      inset 0 1px 0 rgba(255,255,255,.55);
    background: linear-gradient(180deg, rgba(255,253,248,.92) 0%, rgba(251,248,243,.94) 100%);
  }
  .sticky-buy.show{
    animation: ultraStickyIn .55s cubic-bezier(.2,.9,.3,1.2) both;
  }
  @keyframes ultraStickyIn{
    0% { transform: translateY(130%); }
    70%{ transform: translateY(-4px); }
    100%{ transform: translateY(0); }
  }
}

/* Larger touch targets on mobile (44×44 min already mostly met; harden it) */
@media (max-width: 640px){
  .nav-links a, .foot-col a, .faq-toc a{ min-height: 44px; display: inline-flex; align-items: center }
  .topic, .benefit, .step, .ps-card, .t-card, .post-card{ touch-action: manipulation }
}

/* -----------------------------------------------------------
   8. Section accent — refined dotted bridge (used on .sec-accent)
   ----------------------------------------------------------- */
.sec-accent .s-dot{
  background: linear-gradient(135deg, var(--blush-deep, #BE5241), var(--apricot-deep, #E89B3F));
  box-shadow: 0 4px 8px -2px rgba(190,82,65,.35);
}

/* -----------------------------------------------------------
   9. Page-load reveal — single elegant top-to-bottom unfurl
   Adds a one-time progressive blur fade on first paint.
   ----------------------------------------------------------- */
.ultra-curtain{
  position: fixed; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, var(--cream, #FBF8F3) 0%, var(--cream-deep, #F4EEE3) 60%, var(--cream, #FBF8F3) 100%);
  z-index: 9998;
  pointer-events: none;
  animation: ultraCurtain 1s cubic-bezier(.4,0,.2,1) .1s forwards;
  opacity: 1;
}
@keyframes ultraCurtain{
  0%   { opacity: 1; clip-path: inset(0 0 0 0) }
  100% { opacity: 0; clip-path: inset(100% 0 0 0) }
}
@media (prefers-reduced-motion: reduce){ .ultra-curtain{ display: none } }

/* -----------------------------------------------------------
  10. Refined nav — micro-condense w/ cleaner shadow + indicator
   ----------------------------------------------------------- */
header.nav.scrolled{
  box-shadow: 0 14px 36px -22px rgba(44,62,80,.28), 0 4px 8px -4px rgba(44,62,80,.06);
  border-bottom-color: rgba(44,62,80,.04);
}

/* Active page indicator — soft underline */
.nav-links a[aria-current="page"]::after{
  background: linear-gradient(90deg, var(--blush, #EA8E7F), var(--apricot, #FFC17A));
  height: 2.5px;
  border-radius: 2px;
}

/* -----------------------------------------------------------
  11. CTA gradient halo — subtle behind-button glow on hover
   ----------------------------------------------------------- */
@media (hover:hover){
  .btn-primary{ position: relative }
  .btn-primary::after{
    background:
      radial-gradient(80% 100% at 50% 50%, rgba(232,155,142,.45), transparent 70%);
    z-index: -2;
    opacity: 0;
    transform: scale(.7);
  }
  .btn-primary:hover::after{
    opacity: 1;
    transform: scale(1.1);
    transition: opacity .35s, transform .55s var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
  }
}

/* -----------------------------------------------------------
  12. Refined card surface — papery edge highlight
   ----------------------------------------------------------- */
.ps-card, .t-card, .benefit, .post-card, .card{
  background-image:
    linear-gradient(180deg, rgba(255,253,248,.65), rgba(255,253,248,0) 30%),
    linear-gradient(180deg, var(--paper, #FFFDF8), var(--paper, #FFFDF8));
}