/* Premier Dental Academy — premium motion layer (progressive enhancement).
   Tasteful, brand-consistent, GPU-cheap, and FULLY disabled for visitors who
   prefer reduced motion. Loaded site-wide via pda-nav.js. Pure CSS — nothing
   here can break a form, a script, or the checkout. Targets redesign elements
   by their distinctive classes so no page markup has to change. */
@media (prefers-reduced-motion: no-preference) {

  /* ── Navy hero / page-head + stats bands: a slow, soft "aurora" drifts behind
        the content so the dark sections feel alive instead of flat. ── */
  [class*="0a1226"] { position: relative; overflow: hidden; isolation: isolate; }
  [class*="0a1226"]::before {
    content: ""; position: absolute; inset: -45% -15%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(38% 48% at 18% 22%, rgba(20,184,166,.20), transparent 62%),
      radial-gradient(34% 44% at 82% 28%, rgba(245,158,11,.13), transparent 60%),
      radial-gradient(30% 40% at 60% 92%, rgba(13,148,136,.16), transparent 60%);
    animation: pdaAurora 16s ease-in-out infinite alternate;
    will-change: transform;
  }
  [class*="0a1226"] > * { position: relative; z-index: 1; }
  @keyframes pdaAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
    100% { transform: translate3d(4%, 3%, 0)  scale(1.14); }
  }

  /* ── Primary amber CTA links: a single light "sheen" sweeps across on hover —
        draws the eye to the action without looping/distracting. ── */
  a[class*="bg-amber-500"], a[class*="from-amber-400"], #pda-nav-enroll {
    position: relative; overflow: hidden; isolation: isolate;
  }
  a[class*="bg-amber-500"]::after,
  a[class*="from-amber-400"]::after,
  #pda-nav-enroll::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -130%; width: 55%; z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  a[class*="bg-amber-500"]:hover::after,
  a[class*="from-amber-400"]:hover::after,
  #pda-nav-enroll:hover::after { animation: pdaSheen .85s ease; }
  @keyframes pdaSheen { from { left: -130%; } to { left: 150%; } }

  /* ── The one CTA that matters most (nav Enroll) gets a slow, gentle glow
        "breath" so it quietly stays the most magnetic thing on the page. ── */
  #pda-nav-enroll { animation: pdaBreath 3.8s ease-in-out infinite; }
  @keyframes pdaBreath {
    0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.10); }
    50%      { box-shadow: 0 8px 26px -6px rgba(245,158,11,.80); }
  }

  /* ── Cards already lift on hover; add a soft, quick scale so they feel tactile. ── */
  .feature:hover, .lib-card:hover { transform: translateY(-4px) scale(1.012); }

  /* Smooth in-page scrolling (respects reduced-motion via the wrapper). */
  html { scroll-behavior: smooth; }
}

/* Crisp, on-brand keyboard focus ring everywhere (accessibility + polish). */
:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; border-radius: 4px; }

/* Buttery same-origin page-to-page transitions — newest browser tech; browsers
   that don't support it simply navigate normally (graceful, zero risk). */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Cinematic homepage hero: a living color-mesh slowly drifts behind the headline. */
  .gradient-hero { position: relative; overflow: hidden; isolation: isolate; }
  .gradient-hero::before {
    content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(28% 36% at 22% 18%, rgba(13,148,136,.22), transparent 60%),
      radial-gradient(26% 34% at 78% 16%, rgba(8,145,178,.20), transparent 60%),
      radial-gradient(30% 38% at 60% 96%, rgba(251,191,36,.16), transparent 60%);
    animation: pdaMesh 18s ease-in-out infinite alternate; will-change: transform;
  }
  .gradient-hero > * { position: relative; z-index: 1; }
  @keyframes pdaMesh {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
    100% { transform: translate3d(3%, 2%, 0)  scale(1.10); }
  }

  /* Photos gently zoom on hover, clipped by their rounded frame. */
  figure[class*="overflow-hidden"] img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
  figure[class*="overflow-hidden"]:hover img { transform: scale(1.06); }
}

/* ─────────────────────────────────────────────────────────────────────────
   GLOWING OUTLINE — site-wide. Ryan loved the glowing red outline on the
   "filling fast" class cards; this generalizes that premium glow to primary
   actions and feature cards across every page (red stays reserved for real
   urgency). Static glows are safe for reduced-motion; hover/pulse motion is
   only added when motion is allowed.
   ───────────────────────────────────────────────────────────────────────── */

/* Primary amber CTAs quietly glow on every page so the main action always pops. */
a[class*="bg-amber-500"], a[class*="from-amber-400"], button[class*="bg-amber-500"] {
  box-shadow: 0 8px 24px -10px rgba(245,158,11,.65);
  transition: box-shadow .25s ease, transform .15s ease;
}
a[class*="bg-amber-500"]:hover, a[class*="from-amber-400"]:hover, button[class*="bg-amber-500"]:hover {
  box-shadow: 0 14px 36px -8px rgba(245,158,11,.85);
}

/* Teal primary CTAs get the same treatment in the brand's cool tone. */
a[class*="bg-teal-700"], a[class*="bg-teal-600"], button[class*="bg-teal-700"], button[class*="bg-teal-600"] {
  box-shadow: 0 8px 24px -12px rgba(13,148,136,.6);
  transition: box-shadow .25s ease, transform .15s ease;
}
a[class*="bg-teal-700"]:hover, a[class*="bg-teal-600"]:hover,
button[class*="bg-teal-700"]:hover, button[class*="bg-teal-600"]:hover {
  box-shadow: 0 14px 36px -8px rgba(13,148,136,.8);
}

@media (prefers-reduced-motion: no-preference) {
  /* Feature/tool/step/cohort cards lift with a soft glowing ring on hover —
     the same "alive" feel as the urgent cards, in calm teal. */
  .feature, .lib-card, .step-card, .cohort-card, .pda-glow-card {
    transition: transform .22s ease, box-shadow .32s ease, border-color .22s ease;
  }
  .feature:hover, .lib-card:hover, .step-card:hover, .pda-glow-card:hover {
    box-shadow: 0 0 0 1.5px rgba(13,148,136,.5), 0 22px 55px -24px rgba(13,148,136,.5);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SOFT BRAND-TINTED PAGE BACKGROUND — opt-in via the `pda-tinted` body class.
   Content/marketing pages carry the class so they get the same premium tinted
   background as the homepage and calendar (color, never stark white). The
   `body.pda-tinted` selector outranks Tailwind's single bg-* utility classes,
   so it wins no matter the cascade order. App pages (admin, dashboard, tools)
   simply don't carry the class and keep their own layouts untouched.
   ───────────────────────────────────────────────────────────────────────── */
body.pda-tinted {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(13,148,136,.16), transparent 60%),
    radial-gradient(1000px 520px at 100% 2%, rgba(8,145,178,.14), transparent 58%),
    radial-gradient(900px 600px at 55% 108%, rgba(245,158,11,.08), transparent 60%),
    linear-gradient(180deg, #e6f1f2 0%, #eef5f6 45%, #e9f2f3 100%);
  background-attachment: fixed;
}