/* =====================================================================
   LYD NDIS — motion + richness layer
   Gated on html.pm (set by premium.js). Reduced-motion users never get .pm,
   so everything below degrades to the static premium design.
   ===================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- headline word reveal --- */
.pm .pm-split .pm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pm .pm-split .pm-w > * { display: inline-block; transform: translateY(112%); opacity: 0; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 55ms), opacity 0.6s ease calc(var(--i, 0) * 55ms); will-change: transform; }
.pm .pm-split.pm-in .pm-w > * { transform: none; opacity: 1; }

/* --- highlighter draws itself --- */
.pm main .marker, .pm main .marker-blue { background-size: 0% 0.94em; transition: background-size 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
.pm main .marker.pm-in, .pm main .marker-blue.pm-in, .pm main .pm-in .marker, .pm main .pm-in .marker-blue { background-size: 100% 0.94em; }

/* --- accent rule draws in --- */
.pm .td-kicker::before { transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.pm section.pm-in .td-kicker::before, .pm header .td-kicker::before { transform: scaleX(1); }
.pm .text-center .td-kicker::before, .pm .kicker--center::before { transform-origin: center; }

/* --- staggered children --- */
.pm .pm-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms); }
.pm .pm-stagger.pm-in > * { opacity: 1; transform: none; }
.pm .pm-chat > * { transform: translateY(10px) scale(0.98); transition-delay: calc(var(--i, 0) * 420ms + 300ms) !important; }
.pm .pipe__table tbody.pm-stagger > tr { transform: translateX(-10px); }
.pm .pm-stagger.pm-in > .pm-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* --- photos --- */
.pm img.pm-photo { transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pm img.pm-photo.pm-in { transform: scale(1); }

/* --- header compacts on scroll --- */
header nav { transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
header.pm-scrolled nav { height: 4.25rem !important; }
header { transition: box-shadow 0.35s; }
header.pm-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 46, 56, 0.35); }

/* --- buttons --- */
.pm .pm-btn { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.25s; }
.pm .pm-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15, 46, 56, 0.45); }
.pm .pm-btn:active { transform: translateY(0); }
.pm .pm-btn > span[aria-hidden] { display: inline-block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.pm .pm-btn:hover > span[aria-hidden] { transform: translate(2px, -2px); }
.pm .pm-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.pm .pm-btn:hover::after { opacity: 1; }
.pm .btn-primary-dark:hover, .pm header a[class*="bg-lyd-yellow"]:hover { box-shadow: 0 12px 28px -12px rgba(250, 236, 155, 0.55); }

/* --- cards: lift + gentle 3D tilt --- */
.pm .pm-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s; transform-style: preserve-3d; }
.pm main [data-lift].pm-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.pm main [data-slot="card"]:hover, .pm main .card-lyd:hover { border-color: rgba(15, 46, 56, 0.28); }
.pm main .leaks__slide { transition: background-color 0.3s; }
.pm main .leaks__title { transition: color 0.3s; }
.pm main .leaks__slide:hover .leaks__title { color: var(--color-lyd-deep); }
.pm main .leaks__slide:hover .leaks__numeral { color: var(--color-lyd-deep-400) !important; }

/* --- deep bands: ambient glow + fine grain --- */
main section[data-band="deep"] { position: relative; overflow: hidden; isolation: isolate; }
main section[data-band="deep"] > .band-inner, main section[data-band="deep"] > .hscroll__runway { position: relative; z-index: 2; }
main section[data-band="deep"]::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(12px);
  background: radial-gradient(38% 45% at var(--gx, 78%) var(--gy, 18%), rgba(46, 116, 136, 0.42), transparent 70%), radial-gradient(30% 35% at 12% 90%, rgba(23, 73, 90, 0.55), transparent 70%);
}
.pm main section[data-band="deep"]::before { animation: pm-drift 26s ease-in-out infinite alternate; }
main section[data-band="deep"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes pm-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
footer.footer-deep { position: relative; }
footer.footer-deep::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(46, 116, 136, 0.28), transparent 70%); }
footer.footer-deep > * { position: relative; }

/* --- Elevate tier: slow conic sheen on the border --- */
@property --pm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pm main .card-elevate { position: relative; }
.pm main .card-elevate::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--pm-a), transparent 0 62%, rgba(250, 236, 155, 0.95) 78%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: pm-spin 7s linear infinite;
}
.pm main .card-elevate > * { position: relative; z-index: 1; }
@keyframes pm-spin { to { --pm-a: 360deg; } }

/* --- hero: stat card floats in, video eases --- */
.pm main > section:first-of-type [data-elevate="hero"] { animation: pm-float-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
@keyframes pm-float-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
.pm main > section:first-of-type video { animation: pm-video-in 2.4s ease-out both; }
@keyframes pm-video-in { from { transform: scale(1.06); filter: brightness(0.7); } to { transform: none; filter: none; } }

/* --- pipeline: status chips pop when they arrive --- */
.pm .pm-stagger.pm-in .pipe__status { animation: pm-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms + 350ms) both; }
@keyframes pm-pop { from { transform: scale(0.85); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* --- winning referral row: one soft pulse when it appears --- */
.pm section.pm-in .race-win { animation: pm-win 1.4s ease-out 0.6s both; }
@keyframes pm-win { 0% { box-shadow: 0 0 0 0 rgba(220, 177, 58, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(220, 177, 58, 0); } }

/* --- links: underline slides in --- */
.pm main p a:not(.btn):not(.td-cta), .pm footer a:not(.btn) { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s; text-decoration: none; }
.pm main p a:not(.btn):not(.td-cta):hover, .pm footer a:not(.btn):hover { background-size: 100% 1px; }

/* --- richness --- */
::selection { background: var(--color-lyd-yellow); color: var(--color-lyd-ink); }
main [data-slot="card"], main .card-lyd { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%); }

@media (prefers-reduced-motion: reduce) {
  main section[data-band="deep"]::before { animation: none !important; }
  .pm-btn, .pm-tilt, .pm-photo { transition: none !important; transform: none !important; }
}