/* css/landing_epic.css
   The big landing page show (loaded after landing_polish.css):
   1. Intro curtain: logo, ring pulses, the wordmark rising letter by letter, a loading line, then two panels open like a theater
      curtain. Once per browser tab session; click to skip.
   2. Hero headline: every letter rises out of a blur one after the other, then a warm glow runs through the letters.
   3. Depth: the laptop, phone, floating cards and background drift at different speeds with the pointer, the hero buttons are
      magnetic, and a soft spotlight follows the cursor.
   Only transform, opacity, filter and the individual `translate` property are animated. Nothing runs with reduced motion. */

/* ---------- 1. Intro curtain ---------- */
.lp-intro { display: none; }
html.lp-intro-active .lp-intro {
    display: block; position: fixed; inset: 0; z-index: 100000; overflow: hidden; pointer-events: auto; cursor: pointer;
    /* failsafe: if the script never runs, the curtain still goes away */
    animation: lpIntroGone 0.01s linear 6s forwards;
}
@keyframes lpIntroGone { to { visibility: hidden; } }
.lp-intro-panel {
    position: absolute; left: 0; right: 0; height: 50.2%; will-change: transform;
    background:
        radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255, 210, 122, 0.16), transparent 70%),
        linear-gradient(160deg, #0a3d18 0%, #0a5f25 100%);
    transition: transform 0.95s cubic-bezier(0.77, 0, 0.18, 1);
}
.lp-intro-panel.lp-top { top: 0; }
.lp-intro-panel.lp-bot { bottom: 0; background:
        radial-gradient(ellipse 60% 90% at 50% 0%, rgba(255, 210, 122, 0.16), transparent 70%),
        linear-gradient(340deg, #0a3d18 0%, #0a5f25 100%); }
.lp-intro-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}
.lp-intro-stage { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.lp-intro-stage img {
    position: relative; width: 98px; height: 98px; object-fit: contain; z-index: 2;
    filter: drop-shadow(0 0 22px rgba(255, 210, 122, 0.55));
    opacity: 0; animation: lpLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes lpLogoIn { from { opacity: 0; transform: scale(0.45) rotate(-14deg); } to { opacity: 1; transform: none; } }
.lp-intro-stage i {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 210, 122, 0.7); opacity: 0;
    animation: lpRing 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.lp-intro-stage i:nth-child(2) { animation-delay: 0.55s; }
.lp-intro-stage i:nth-child(3) { animation-delay: 1.1s; }
@keyframes lpRing { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.lp-intro-word {
    display: flex; overflow: hidden; padding: 4px 6px 8px; font: 700 clamp(32px, 6vw, 58px)/1 'Oswald', sans-serif; letter-spacing: 6px; color: #fff;
}
.lp-intro-word span { display: inline-block; opacity: 0; transform: translateY(115%); filter: blur(6px);
    animation: lpLetterUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(0.5s + var(--i) * 0.055s) forwards; }
.lp-intro-word span.o { color: #f39c12; }
@keyframes lpLetterUp { to { opacity: 1; transform: none; filter: blur(0); } }
.lp-intro-tag { font: 600 clamp(10px, 3vw, 13px)/1 'Montserrat', sans-serif; letter-spacing: clamp(2px, 1.2vw, 5px); white-space: nowrap; text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
    opacity: 0; transform: translateY(10px); animation: lpTagIn 0.8s ease 1.15s forwards; }
@keyframes lpTagIn { to { opacity: 1; transform: none; } }
.lp-intro-bar { width: min(260px, 60vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin-top: 8px;
    opacity: 0; animation: lpTagIn 0.4s ease 0.6s forwards; }
.lp-intro-bar b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, #f39c12, #ffd27a); animation: lpBar 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards; }
@keyframes lpBar { to { transform: scaleX(1); } }
.lp-intro.lp-out .lp-intro-panel.lp-top { transform: translateY(-101%); }
.lp-intro.lp-out .lp-intro-panel.lp-bot { transform: translateY(101%); }
.lp-intro.lp-out .lp-intro-center { opacity: 0; transform: scale(1.12); }

/* the hero waits behind the curtain, then plays from its first frame */
html.lp-intro-active .sas-landing-page .hero,
html.lp-intro-active .sas-landing-page .hero * { animation-play-state: paused !important; }

/* ---------- 2. Hero headline: letters rise, then a glow runs through them ---------- */
.sas-landing-page .hero-heading.lp-split { animation: none !important; opacity: 1 !important; perspective: 700px; }
.lp-ch {
    display: inline-block; opacity: 0; transform: translateY(70%) rotateX(-80deg) scale(0.9); transform-origin: 50% 100%; filter: blur(8px);
    animation: lpChIn 1s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i) * 0.07s) forwards,
               lpChGlow 1.3s ease-in-out calc(1.5s + var(--i) * 0.08s) 1;
}
@keyframes lpChIn { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lpChGlow { 0%, 100% { text-shadow: none; } 45% { text-shadow: 0 0 30px rgba(255, 210, 122, 0.95), 0 0 6px rgba(255, 255, 255, 0.6); transform: translateY(-4%); } }

/* ---------- 3. Depth and pointer effects (fine pointers only) ---------- */
.lp-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 210, 122, 0.18), rgba(255, 255, 255, 0.05) 38%, transparent 65%); }
.sas-landing-page .hero.lp-hover .lp-spot { opacity: 1; }
.sas-landing-page .hero .hero-bg { translate: var(--bgx, 0) var(--bgy, 0); }
.sas-landing-page .hero .hero-content > :not(.hero-buttons) { translate: var(--cx, 0) var(--cy, 0); }   /* the buttons never move */
.sas-landing-page .hero .hero-phone .laptop { translate: var(--lx, 0) var(--ly, 0); }
.sas-landing-page .hero .hero-phone .phone { translate: var(--px, 0) var(--py, 0); }
.sas-landing-page .hero .fc { translate: var(--fx, 0) var(--fy, 0); }

/* ---------- reduced motion: no show at all ---------- */
@media (prefers-reduced-motion: reduce) {
    .lp-intro, html.lp-intro-active .lp-intro { display: none !important; }
    html.lp-intro-active .sas-landing-page .hero, html.lp-intro-active .sas-landing-page .hero * { animation-play-state: running !important; }
    .lp-ch { opacity: 1; transform: none; filter: none; animation: none; }
    .lp-spot { display: none; }
}