/* Premium layer: cinematic video heroes, cursor-lit cards, smooth scroll, page fade. Loaded after cinematic-theme.css. */

/* page fade-in */
@keyframes pg-in{from{opacity:0}to{opacity:1}}

/* cinematic video behind the top of each page */
.cine-top{position:absolute;top:0;left:0;right:0;height:min(100vh,900px);z-index:0;overflow:hidden;pointer-events:none}
.cine-top video{width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.06);animation:cine-drift 18s ease-in-out infinite alternate}
.cine-top::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,16,31,.92) 0%,rgba(6,16,31,.55) 45%,rgba(6,16,31,.25) 100%),
             linear-gradient(180deg,rgba(6,16,31,.2) 0%,rgba(6,16,31,0) 40%,#06101f 100%)}
@keyframes cine-drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
body > *:not(.cine-top):not(nav):not(script){position:relative;z-index:1}

/* bigger, tighter display type */
h1{font-size:clamp(2.6rem,6vw,5rem) !important;line-height:1 !important;letter-spacing:-.04em !important;text-wrap:balance}
h2{letter-spacing:-.035em}
.hero,.article,header{padding-top:clamp(64px,12vh,140px)}
.eyebrow{background:rgba(110,163,224,.12) !important;border:1px solid rgba(110,163,224,.25)}

/* cursor spotlight on cards */
.card,.step,.price-card,.faq-item,.post-card,.compare-card,.plan-card,.material-mock,.callout,.fv-card{
  position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s !important}
.card::before,.step::before,.price-card::before,.faq-item::before,.post-card::before,.compare-card::before,.plan-card::before,.material-mock::before,.callout::before,.fv-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(110,163,224,.16),transparent 45%)}
.card:hover::before,.step:hover::before,.price-card:hover::before,.faq-item:hover::before,.post-card:hover::before,.compare-card:hover::before,.plan-card:hover::before,.material-mock:hover::before,.callout:hover::before,.fv-card:hover::before{opacity:1}
.card:hover,.step:hover,.price-card:hover,.post-card:hover,.compare-card:hover,.fv-card:hover{transform:translateY(-4px);border-color:rgba(224,105,47,.45) !important;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}

/* animated gradient border on featured pricing card */
.price-card.featured{border:1px solid transparent !important;
  background:linear-gradient(#0b1a2e,#0b1a2e) padding-box,conic-gradient(from var(--ang,0deg),#e0692f,#6ea3e0,#e0692f) border-box !important;
  animation:ang 6s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ang{to{--ang:360deg}}

/* images inside hero cards float gently */
.hero img,.hero svg,.plan-card{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* link underline sweep */
.article a,.faq-item a,footer a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.article a:hover,.faq-item a:hover,footer a:hover{background-size:100% 1px}

/* bottom scroll progress bar */
.scroll-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:101;background:var(--accent);transform-origin:left;transform:scaleX(0)}

@media (prefers-reduced-motion: reduce){
  body,.cine-top video,.hero img,.hero svg,.plan-card,.price-card.featured{animation:none !important}
}
@media (max-width:700px){.cine-top video{opacity:.45}}

/* light illustrations -> dark-mode versions in a glass frame */
.hero-visual{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.hero-visual img{filter:invert(.92) hue-rotate(180deg) saturate(1.3) contrast(1.05);border-radius:14px;display:block;width:100%;height:auto}