/* ============================================================
   ENHANCEMENTS.CSS — Motion & 3D Layer
   OPTIMIZED: Removed global will-change overuse, removed
   non-composited animations (bar-aurora, scan-line),
   reduced blur intensity, tightened mobile rules.
   Keeps: @keyframes, transform, transition, fade-up, backdrop-filter
   ============================================================ */

/* ============================================================
   PERFORMANCE BASELINE
   Only add will-change to elements actually being animated
============================================================ */
.hero-main-card,.hero-card-stack,.float-card,
.btn-primary,.btn-yellow,.whatsapp-btn{will-change:transform}

/* ============================================================
   REDUCED-MOTION SAFETY
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .tilt-3d,.parallax-hero,.depth-layer{transform:none!important}
}

/* ============================================================
   ANNOUNCEMENT BAR — shimmer sweep only (transform-based)
   Removed: bar-aurora (not visible enough to justify paint)
============================================================ */
.announcement-bar{position:relative;overflow:hidden;letter-spacing:.03em}
.announcement-bar::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,0.09),transparent);animation:bar-shimmer 6s ease-in-out infinite;pointer-events:none}
@keyframes bar-shimmer{0%{left:-80%}100%{left:110%}}

/* ============================================================
   HEADER — blur & transition only
============================================================ */
.header{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);transition:box-shadow .4s ease,background .4s ease}
.logo-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.logo:hover .logo-icon{transform:rotate(-8deg) scale(1.12) translateY(-2px)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;border-radius:2px;transition:width .3s cubic-bezier(.22,1,.36,1)}
.desktop-nav a:hover::after{width:100%}

/* ============================================================
   HERO — layout & animation (no scan-line: invisible, adds overhead)
============================================================ */
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;animation:orb-drift 14s ease-in-out infinite alternate}
@keyframes orb-drift{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.75;transform:translateY(-16px) scale(1.03)}100%{opacity:.55;transform:translateY(-8px) scale(1.06)}}
.hero-content,.hero-visual{position:relative;z-index:2}

/* Hero badges */
.hero-badge{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hero-badge:hover{transform:translateY(-2px) scale(1.04)}
.hero-stat-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hero-stat:hover .hero-stat-icon{transform:scale(1.12) rotate(-6deg)}

/* ============================================================
   HERO CARD — 3D glass (reduced blur from 28px → 20px)
============================================================ */
.tilt-3d{transform-style:preserve-3d;transition:transform .10s ease-out;perspective:900px}
.hero-main-card{backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);transition:transform .10s ease-out;position:relative}
.hero-main-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none}
.course-item{transition:background .25s ease,transform .25s ease}
.course-item:hover{transform:translateX(4px)}
.hero-card-stack{transition:filter .4s ease}
.float-card{backdrop-filter:blur(12px);transition:transform .35s ease}
.parallax-hero{transition:transform .08s linear;will-change:transform;transform-style:preserve-3d}
.depth-layer{transform-style:preserve-3d}

/* ============================================================
   BUTTONS — shimmer sweep & 3D lift only
============================================================ */
.btn-primary,.btn-yellow{position:relative;overflow:hidden}
.btn-primary::before,.btn-yellow::before{content:'';position:absolute;top:0;left:-130%;width:65%;height:100%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);pointer-events:none;border-radius:inherit;transition:left 0s}
.btn-primary:hover::before,.btn-yellow:hover::before{left:130%;transition:left .55s ease}
.btn-primary:hover{transform:translateY(-3px) scale(1.02)}
.btn-yellow:hover{transform:translateY(-3px) scale(1.02)}
.btn-outline:hover{transform:translateY(-2px) scale(1.01)}
.btn-ghost:hover{transform:translateY(-3px) scale(1.01)}
.btn-primary:active,.btn-yellow:active,.btn-outline:active,.btn-ghost:active{transform:translateY(1px) scale(.975)!important;transition:transform .05s ease!important}

/* ============================================================
   SECTION TAG — dot pulse & hover lift
============================================================ */
.section-tag{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.section-tag:hover{transform:translateY(-2px) scale(1.04)}
.section-tag .dot{animation:dot-pulse 2.2s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}

/* Section title animated underline */
.section-title{position:relative;display:inline-block}
.section-title::after{content:'';position:absolute;bottom:-5px;left:0;right:0;margin:0 auto;width:0;height:3px;border-radius:3px;transition:width .65s cubic-bezier(.22,1,.36,1) .15s;;background-size:200%}
.text-center .section-title::after{left:50%;transform:translateX(-50%)}
.fade-up.visible .section-title::after,.section-title.title-visible::after{width:72%}
@keyframes gradient-shift{0%,100%{background-position:0%}50%{background-position:100%}}

/* ============================================================
   CARD 3D HOVER SYSTEM — simplified (reduced perspective complexity)
============================================================ */
.why-card{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
.why-card:hover{transform:translateY(-8px)}
.why-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.why-card:hover .why-icon{transform:scale(1.2) rotate(-6deg) translateY(-3px)}

.hl-card{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease;position:relative;overflow:hidden}
.hl-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hl-card:hover{transform:translateY(-8px)}
.hl-card:hover::before{opacity:1}
.hl-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:block}
.hl-card:hover .hl-icon{transform:scale(1.3) translateY(-4px)}

.testi-card{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.testi-card::before{content:'"';position:absolute;top:-10px;right:16px;font-size:7rem;font-family:'Sora',sans-serif;font-weight:800;line-height:1;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.testi-card:hover{transform:translateY(-8px)}
.testi-card:hover::before{transform:scale(1.1) rotate(-3deg)}
.testi-card:hover .testi-avatar{transform:scale(1.12);transition:transform .3s ease}

.trust-card{transition:transform .30s cubic-bezier(.34,1.56,.64,1),box-shadow .30s ease;position:relative;overflow:hidden}
.trust-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;opacity:0;transition:opacity .3s ease}
.trust-card:hover{transform:translateY(-6px) translateX(2px)}
.trust-card:hover::after{opacity:1}

.daily-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.daily-card:hover{transform:translateY(-7px) scale(1.01)}
.daily-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:block}
.daily-card:hover .daily-icon{transform:scale(1.2) rotate(8deg) translateY(-3px)}

.project-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.project-card:hover{transform:translateY(-10px) scale(1.01)}
.project-top{transition:font-size .3s ease}
.project-card:hover .project-top{font-size:4.2rem}

.level-card{transition:transform .30s cubic-bezier(.34,1.56,.64,1),box-shadow .30s ease}
.level-card:hover{transform:translateY(-5px)}

.pricing-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.pricing-card:hover{transform:translateY(-6px) scale(1.01)}

/* ============================================================
   FAQ MOTION
============================================================ */
.faq-item{transition:transform .24s ease}
.faq-item:hover{transform:translateX(3px)}
.faq-arrow{transition:transform .35s cubic-bezier(.34,1.56,.64,1)!important}

/* ============================================================
   COUNTDOWN — digit tick
============================================================ */
.countdown-unit{transition:transform .12s ease;position:relative;overflow:hidden}
.countdown-unit .num{transition:transform .14s ease,opacity .14s ease}
.countdown-unit.cd-tick .num{transform:translateY(-7px);opacity:0}

/* ============================================================
   FORM — reduced blur (32px → 20px, significant paint savings)
============================================================ */
.form-wrapper{backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}

/* ============================================================
   MISC MOTION
============================================================ */
.social-link{transition:background .22s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.social-link:hover{transform:translateY(-4px) scale(1.15)}
.whatsapp-btn{animation:waFloat 3s ease-in-out infinite;transition:transform .2s ease}

/* Fade-up — scroll reveal */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up-delay-1{transition-delay:.10s}
.fade-up-delay-2{transition-delay:.20s}
.fade-up-delay-3{transition-delay:.30s}

/* Highlights section */
.highlights-section{position:relative;overflow:hidden}

/* Article hover */
article{transition:transform .30s cubic-bezier(.34,1.56,.64,1),box-shadow .30s ease!important}
article:hover{transform:translateY(-5px)!important}

/* Gaming, roadmap, weekend */
.gaming-col{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
.gaming-col:hover{transform:translateY(-5px)}
.roadmap-card{transition:transform .30s cubic-bezier(.34,1.56,.64,1),box-shadow .30s ease}
.roadmap-card:hover{transform:translateY(-5px) scale(1.01)}
.wi-card,.wb-badge{transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease}
.wi-card:hover,.wb-badge:hover{transform:translateX(5px)}

/* Popups */
#exitPopup > div{animation:popIn3D .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn3D{from{opacity:0;transform:scale(.82) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}
.scroll-cta-popup{animation:slideInUp3D .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideInUp3D{from{opacity:0;transform:translateY(48px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Sticky CTA slide */
.sticky-cta-strip{transform:translateY(100%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sticky-cta-strip.visible{transform:translateY(0)}

/* ============================================================
   MOBILE — disable heavy effects, preserve basic transitions
============================================================ */
@media(max-width:768px){
  .tilt-3d,.parallax-hero{transform:none!important;transition:none!important}
  .why-card:hover,.hl-card:hover,.testi-card:hover,.trust-card:hover,
  .daily-card:hover,.project-card:hover,.level-card:hover,.pricing-card:hover{transform:translateY(-3px)!important}
  .why-card,.hl-card,.testi-card,.project-card{perspective:none}
  .hero::after{animation:none}
  .announcement-bar::after{display:none}
  .fade-up{transition:opacity .5s ease,transform .5s ease}
}