/* launchpad-vibes.css
   Purpose: Transform the site from "professional fintech" to an energetic memecoin launchpad.
   Notes:
   - Pure CSS enhancements layered on top of existing theme files.
   - Avoids breaking existing layout by using additive classes only.
*/

:root{
  --lp-radius: var(--radius);
  --lp-glow-a: rgba(6,182,212,.55);
  --lp-glow-b: rgba(240,147,251,.45);
  --lp-glow-c: rgba(88,28,135,.45);
  --lp-stroke: rgba(255,255,255,.10);
  --lp-card: rgba(8,10,18,.46);
  --lp-card-strong: rgba(8,10,18,.62);
  --lp-text: rgba(255,255,255,.92);
  --lp-muted: rgba(255,255,255,.70);
  --lp-shadow: 0 18px 45px rgba(0,0,0,.55);
}

/* ===== Page-load hero sequence (1.0s ~ 1.8s) ===== */
body.lp-launchpad .header{
  opacity: 0;
  transform: translateY(-10px);
  animation: lpFadeIn .6s ease forwards;
  animation-delay: 1s;
}

body.lp-launchpad #presale .hero__title{
  opacity: 0;
  transform: translateY(16px);
  animation: lpSlideUp .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: 1.2s;
}

body.lp-launchpad #presale .hero__widget{
  opacity: 0;
  transform: translateY(18px) scale(.94);
  filter: blur(4px);
  animation: lpPop .75s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: 1.4s;
}

body.lp-launchpad #presale .hero__art{
  opacity: 0;
  transform: translateY(30px) scale(.96);
  animation: lpFadeIn .6s ease forwards;
  animation-delay: 1.55s;
}

/* ===== Section backgrounds (brighter, more diverse) ===== */
.section{
  position: relative;
  overflow: clip;
}

/* soft vignette + noise style overlay per section */
/* .section::before overlay removed: background split handled by css/bg-split.css */
.section__inner{ position: relative; z-index: 1; }


/* ===== Hero stars canvas ===== */
.hero-stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:.85;
  mix-blend-mode: screen;
  pointer-events:none;
  filter: blur(.2px);
}

/* ===== Widget glow (Priority 1) ===== */
.widget--glow{
  background: linear-gradient(180deg, rgba(8,10,18,.66), rgba(8,10,18,.42));
  border-radius: var(--lp-radius);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(6,182,212,.10) inset,
    0 0 36px rgba(6,182,212,.18),
    0 0 55px rgba(240,147,251,.14),
    var(--lp-shadow);
  position: relative;
}

/* ===== Rocket XL + launch effect (Priority 1) ===== */
.hero-collage{
  position: relative;
}
.rocketWrap{
  position: relative;
  display:inline-block;
  transform-origin: 40% 65%;
  animation: lpRocketFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45))
          drop-shadow(0 0 28px rgba(6,182,212,.20));
   top: 250px !important;
}
.hero-collage__rocket--xl{
  width: min(520px, 48vw);
  max-width: 560px;
  height: auto;
  transform: rotate(-8deg);
}

@media (max-width: 998px){
  .hero-collage__rocket--xl,
  .hero-collage__bubble{
  transform: rotate(-8deg) translateY(-78px) !important;
  }
}

/* Launch sequence toggled by JS */
.rocketWrap.is-launch{
  animation: lpRocketLaunch 1.4s cubic-bezier(.15,.9,.15,1) forwards;
}
.rocketWrap.is-launch .rocketTrail{
  opacity:.85;
  animation: lpTrail 1.4s ease forwards;
}
.rocketWrap.is-launch .rocketFlame{
  animation: lpFlameBoost 0.12s ease-in-out infinite alternate;
  filter: blur(1px) drop-shadow(0 0 20px rgba(255,214,102,.35));
}

/* ===== Presale hologram cards (Priority 2) ===== */
.phase-card{
  position: relative;
  border-radius: var(--lp-radius);
  background: var(--lp-card);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.50);
}
.phase-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity:.0;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(214,150,90,.20) 18%,
      rgba(255,214,102,.16) 36%,
      rgba(255,255,255,.04) 52%,
      rgba(130,83,44,.16) 70%,
      rgba(255,255,255,0) 100%);
  filter: blur(8px);
  transform: translateX(-18%) rotate(-2deg);
  transition: opacity .25s ease, transform .25s ease;
}
.phase-card:hover::before{
  opacity:.9;
  transform: translateX(8%) rotate(1deg);
}

.phase-card:hover{
  border-color: rgba(255,255,255,.16);
}

/* ===== Hover micro-interactions (Priority 1/3) ===== */
.card,
.btn,
.platform{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.card:hover{
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 22px 60px rgba(0,0,0,.60),
              0 0 38px rgba(6,182,212,.10);
}

.btn:hover{
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1.15);
}

.platform:hover{
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(240,147,251,.25));
}

/* ===== Reveal enhancement ===== */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal="zoom-in"]{
  transform: scale(.96);
}
.is-visible[data-reveal]{
  opacity: 1;
  transform: none;
}

/* ===== 3D tilt base (Priority 2) ===== */
.tilt{
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:.0;
  background: radial-gradient(420px 240px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  transition: opacity .18s ease;
}
.tilt.is-tilting::after{ opacity:.9; }

/* ===== Loading states (Priority 3) ===== */
.lp-loading .btn,
.lp-loading button{
  opacity:.75;
  pointer-events:none;
  filter: grayscale(.25);
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  body.lp-launchpad .header,
  body.lp-launchpad #presale .hero__title,
  body.lp-launchpad #presale .hero__widget,
  body.lp-launchpad #presale .hero__art,
  .rocketWrap,
  .widget--glow{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .hero-stars{ display:none; }
}

/* ===== Keyframes ===== */
@keyframes lpFadeIn{
  from{ opacity:0; transform: translateY(-10px); }
  to{ opacity:1; transform:none; }
}
@keyframes lpSlideUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes lpPop{
  from{ opacity:0; transform: translateY(18px) scale(.94); filter: blur(4px); }
  to{ opacity:1; transform:none; filter: blur(0); }
}
@keyframes lpRocketFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(1deg); }
}
@keyframes lpFlame{
  from{ transform: translate(-50%,-50%) rotate(8deg) scale(.88); opacity:.80; }
  to{ transform: translate(-50%,-50%) rotate(8deg) scale(1.05); opacity:1; }
}
@keyframes lpFlameBoost{
  from{ transform: translate(-50%,-50%) rotate(8deg) scale(1.00); opacity:.88; }
  to{ transform: translate(-50%,-50%) rotate(8deg) scale(1.22); opacity:1; }
}
@keyframes lpTrail{
  0%{ transform: translate(-10%,-50%) rotate(8deg); opacity:.0; }
  30%{ opacity:.55; }
  100%{ transform: translate(14%,-50%) rotate(8deg); opacity:.0; }
}
@keyframes lpRocketLaunch{
  0%{ transform: translateY(0) rotate(0deg) scale(1); }
  40%{ transform: translate(10px,-18px) rotate(2deg) scale(1.02); }
  100%{ transform: translate(48px,-90px) rotate(7deg) scale(1.03); }
}

.readyBubble {
  transform: translateY(70px) !important;
}

/* ✅ 모바일에서는 헤더를 즉시 표시(애니메이션/딜레이 제거) */
@media (max-width: 991.98px){
  .lp-launchpad .header{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}