/* ================================================
   HUDSON CARS — PREMIUM ANIMATIONS
   Inspired by Aceternity UI / 21st.dev
   Vanilla CSS — No frameworks needed
   ================================================ */

/* ---- GLOBAL OVERFLOW FIX ---- */
html,body{overflow-x:hidden}
section,.hero-vc{overflow:hidden}

/* ---- AURORA BACKGROUND ---- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora::before,.aurora::after{content:'';position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:.15;animation:auroraMove 8s ease-in-out infinite alternate}
.aurora::before{background:radial-gradient(circle,#C9A84C,transparent 70%);top:-20%;left:-10%;animation-delay:0s}
.aurora::after{background:radial-gradient(circle,#25D366,transparent 70%);bottom:-20%;right:-10%;animation-delay:4s}
@keyframes auroraMove{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}100%{transform:translate(-20px,30px) scale(.95)}}

/* ---- SPOTLIGHT EFFECT ---- */
.spotlight{position:relative;overflow:hidden}
.spotlight::before{content:'';position:absolute;top:-50%;left:50%;width:300px;height:300%;background:conic-gradient(from 0deg,transparent 0deg,rgba(201,168,76,.08) 40deg,transparent 80deg);animation:spotlightSweep 6s linear infinite;transform-origin:top center;pointer-events:none;z-index:1}
@keyframes spotlightSweep{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}

/* ---- METEOR SHOWER ---- */
.meteor{position:absolute;width:2px;height:80px;background:linear-gradient(to bottom,rgba(201,168,76,.6),transparent);border-radius:50%;animation:meteorFall linear infinite;opacity:0;pointer-events:none}
@keyframes meteorFall{0%{transform:translateY(-100px) translateX(0) rotate(-45deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(100vh + 100px)) translateX(-200px) rotate(-45deg);opacity:0}}

/* ---- TEXT GENERATE (word by word fade in) ---- */
.text-gen span{opacity:0;filter:blur(8px);animation:textGen .6s forwards}
@keyframes textGen{to{opacity:1;filter:blur(0)}}

/* ---- FLIP WORDS ---- */
.flip-words{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.flip-words span{display:block;animation:flipWord 8s infinite}
@keyframes flipWord{0%,20%{transform:translateY(0);opacity:1}25%,45%{transform:translateY(-100%);opacity:1}50%,70%{transform:translateY(-200%);opacity:1}75%,95%{transform:translateY(-300%);opacity:1}100%{transform:translateY(-400%);opacity:0}}

/* ---- TYPEWRITER CURSOR ---- */
.typewriter{border-right:3px solid #C9A84C;animation:blink .7s step-end infinite}
@keyframes blink{50%{border-color:transparent}}

/* ---- GLOWING BORDER ---- */
.glow-border{position:relative;overflow:hidden}
.glow-border::before{content:'';position:absolute;inset:-2px;background:conic-gradient(from var(--angle,0deg),transparent 30%,#C9A84C 50%,transparent 70%);animation:rotateBorder 3s linear infinite;z-index:-1;border-radius:inherit}
.glow-border::after{content:'';position:absolute;inset:2px;background:#111;border-radius:inherit;z-index:-1}
@keyframes rotateBorder{to{--angle:360deg}}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---- MAGNETIC BUTTON ---- */
.magnetic-btn{transition:transform .3s cubic-bezier(.23,1,.32,1)}

/* ---- PARALLAX DEPTH (disabled — causes layout shift) ---- */

/* ---- NUMBER COUNTER ROLLUP ---- */
.counter-roll{display:inline-flex;overflow:hidden;height:1em;line-height:1}
.counter-roll .digit{display:flex;flex-direction:column;animation:rollUp 2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rollUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---- CARD TILT 3D (enhanced) ---- */
.tilt-card{transform-style:preserve-3d;transition:transform .4s cubic-bezier(.03,.98,.52,.99),box-shadow .4s ease}
.tilt-card .tilt-inner{transform:translateZ(30px);transition:transform .4s}
.tilt-card:hover .tilt-inner{transform:translateZ(50px)}

/* ---- CARD SPOTLIGHT/GLARE ---- */
.card-spotlight{position:relative;overflow:hidden}
.card-spotlight::before{content:'';position:absolute;top:var(--mouse-y,-100%);left:var(--mouse-x,-100%);width:250px;height:250px;background:radial-gradient(circle,rgba(201,168,76,.15),transparent 70%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s}
.card-spotlight:hover::before{opacity:1}

/* ---- WAVE UNDERLINE ---- */
.wave-underline{position:relative;display:inline-block}
.wave-underline::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q5 0 10 2 Q15 4 20 2' stroke='%23C9A84C' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;background-size:20px 4px;animation:waveSlide 1s linear infinite}
@keyframes waveSlide{to{background-position:20px 0}}

/* ---- MARQUEE ---- */
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- SHIMMER TEXT ---- */
.shimmer-text{background:linear-gradient(90deg,#C9A84C 0%,#E8D48B 40%,#fff 50%,#E8D48B 60%,#C9A84C 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmerText 3s linear infinite}
@keyframes shimmerText{to{background-position:-200% 0}}

/* ---- BREATHING GLOW ---- */
.breathe-glow{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 20px rgba(201,168,76,.1),0 0 40px rgba(201,168,76,.05)}50%{box-shadow:0 0 40px rgba(201,168,76,.25),0 0 80px rgba(201,168,76,.1)}}

/* ---- ENTRANCE: SLIDE UP SPRING ---- */
.entrance-spring{opacity:0;transform:translateY(60px) scale(.95);transition:all .8s cubic-bezier(.34,1.56,.64,1)}
.entrance-spring.v{opacity:1;transform:translateY(0) scale(1)}

/* ---- ENTRANCE: BLUR IN ---- */
.entrance-blur{opacity:0;filter:blur(12px);transform:translateY(20px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.entrance-blur.v{opacity:1;filter:blur(0);transform:translateY(0)}

/* ---- ENTRANCE: SCALE ROTATE ---- */
.entrance-rotate{opacity:0;transform:scale(.8) rotate(-3deg);transition:all .8s cubic-bezier(.16,1,.3,1)}
.entrance-rotate.v{opacity:1;transform:scale(1) rotate(0)}

/* ---- STAGGER DELAYS (up to 10) ---- */
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}.d4{transition-delay:.2s}.d5{transition-delay:.25s}
.d6{transition-delay:.3s}.d7{transition-delay:.35s}.d8{transition-delay:.4s}.d9{transition-delay:.45s}.d10{transition-delay:.5s}

/* ---- SCROLL PROGRESS BAR ---- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#C9A84C,#25D366);z-index:9999;transform-origin:left;transform:scaleX(0);transition:none}

/* ---- FLOATING PARTICLES ---- */
.particle{position:absolute;border-radius:50%;pointer-events:none;opacity:0}
.particle-gold{background:#C9A84C;animation:particleFloat 6s ease-in-out infinite}
.particle-green{background:#25D366;animation:particleFloat 8s ease-in-out infinite reverse}
@keyframes particleFloat{0%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:.4}50%{transform:translateY(-100px) scale(1)}80%{opacity:.4}100%{opacity:0;transform:translateY(-200px) scale(0)}}

/* ---- IMAGE REVEAL (clip path) ---- */
.img-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
.img-reveal.v{clip-path:inset(0 0 0 0)}

/* ---- HORIZONTAL LINE GROW ---- */
.line-grow{width:0;height:1px;background:linear-gradient(90deg,transparent,#C9A84C,transparent);transition:width 1.5s cubic-bezier(.16,1,.3,1)}
.line-grow.v{width:100%}

/* ---- REVIEW CARD HOVER LIFT ---- */
.review-lift{transition:transform .4s cubic-bezier(.03,.98,.52,.99),box-shadow .4s ease}
.review-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(201,168,76,.1)}

/* ---- MOBILE OPTIMIZATIONS ---- */
@media(max-width:768px){
  .aurora::before,.aurora::after{width:80vw;height:80vw;filter:blur(80px);opacity:.1}
  .spotlight::before{display:none}
  .meteor{display:none}
  .tilt-card:hover{transform:none}
  .card-spotlight::before{display:none}
}

/* ---- REDUCED MOTION ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}