:root{
  --bg:#05070e;
  --card:rgba(7,10,20,.68);
  --line:rgba(255,255,255,.13);
  --text:#fff;
  --muted:rgba(255,255,255,.66);
  --pink:#ff4b91;
  --cyan:#36e2df;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}
body{min-height:100vh;overflow:hidden}
.eim-cs{
  min-height:100vh;
  display:grid;
  place-items:center;
  position:relative;
  padding:28px;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(1,4,12,.28),rgba(1,4,12,.70)),
    url('coming-soon-bg.png') center center/cover no-repeat;
}
.eim-cs:before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 20% 20%,rgba(54,226,223,.12),transparent 30%),
    radial-gradient(circle at 80% 65%,rgba(255,75,145,.18),transparent 28%),
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 45%,rgba(0,0,0,.32));
  backdrop-filter:blur(1px);
}
.eim-cs:after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 160px rgba(0,0,0,.75);
}
.panel{
  width:min(780px,94vw);
  text-align:center;
  padding:38px 30px 34px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(3,6,14,.58),rgba(3,6,14,.79));
  box-shadow:0 28px 90px rgba(0,0,0,.50);
  backdrop-filter:blur(12px);
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 18px var(--pink)}
.eyebrow{
  margin:24px 0 10px;
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
}
h1{
  margin:0;
  font-size:clamp(42px,8vw,84px);
  line-height:.96;
  letter-spacing:.28em;
  transform:translateX(.14em);
  font-weight:800;
  text-shadow:0 8px 40px rgba(0,0,0,.45);
}
.sub{
  margin:22px auto 0;
  max-width:590px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.progress-wrap{
  margin:34px auto 0;
  width:min(420px,90%);
}
.track{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.fill{
  height:100%;
  width:var(--progress);
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  border-radius:999px;
  box-shadow:0 0 24px rgba(255,75,145,.48);
}
.percent{
  margin-top:9px;
  font-size:11px;
  letter-spacing:.28em;
  color:rgba(255,255,255,.72);
}
.footer{
  margin-top:30px;
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);
}
.footer span{padding:0 4px}
@media(max-width:640px){
  .eim-cs{padding:18px}
  .panel{padding:32px 18px 28px;border-radius:22px}
  h1{letter-spacing:.16em;transform:translateX(.08em)}
  .eyebrow{letter-spacing:.26em}
  .sub{font-size:15px}
}


/* =====================================================
   EIM_COMING_SOON_ANIMATED_V1
   Animated Coming Soon Background
   ===================================================== */

body {
  position: relative;
  background: #03050b;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -3;

  background:
    url("/assets/coming-soon-bg.png")
    center center / cover
    no-repeat;

  filter:
    brightness(.55)
    contrast(1.08)
    saturate(1.18);

  transform: scale(1.08);

  animation:
    eimBackgroundMove 18s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(54,226,223,.23),
      transparent 30%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(255,75,145,.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 55% 20%,
      rgba(126,66,255,.16),
      transparent 28%
    );

  filter: blur(40px);

  animation:
    eimNeonMove 12s ease-in-out infinite alternate;
}

.eim-cs {
  background:
    linear-gradient(
      180deg,
      rgba(2,4,10,.20),
      rgba(2,4,10,.68)
    );

  position: relative;
  overflow: hidden;
}

.eim-cs::before {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,.035) 48%,
      rgba(255,75,145,.06) 52%,
      transparent 65%
    );

  transform: translateX(-35%) rotate(8deg);

  animation:
    eimLightSweep 9s linear infinite;
}

.eim-cs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.62) 100%
    );

  z-index: 0;
}

.panel {
  position: relative;
  z-index: 2;

  animation:
    eimPanelGlow 5s ease-in-out infinite alternate;
}

.panel h1 {
  animation:
    eimTitlePulse 4s ease-in-out infinite alternate;
}

.fill {
  position: relative;
  overflow: hidden;
}

.fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  left: -120px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.75),
      transparent
    );

  animation:
    eimProgressShine 3s linear infinite;
}

@keyframes eimBackgroundMove {

  0% {
    transform:
      scale(1.08)
      translate3d(-1%, -1%, 0);
  }

  50% {
    transform:
      scale(1.14)
      translate3d(1.5%, .5%, 0);
  }

  100% {
    transform:
      scale(1.10)
      translate3d(-.5%, 1.5%, 0);
  }
}

@keyframes eimNeonMove {

  0% {
    transform:
      translate3d(-3%, -2%, 0)
      scale(1);

    opacity: .65;
  }

  50% {
    transform:
      translate3d(3%, 1%, 0)
      scale(1.12);

    opacity: .95;
  }

  100% {
    transform:
      translate3d(-1%, 4%, 0)
      scale(1.05);

    opacity: .72;
  }
}

@keyframes eimLightSweep {

  from {
    transform:
      translateX(-55%)
      rotate(8deg);
  }

  to {
    transform:
      translateX(55%)
      rotate(8deg);
  }
}

@keyframes eimPanelGlow {

  0% {
    box-shadow:
      0 28px 90px rgba(0,0,0,.55),
      0 0 30px rgba(54,226,223,.04);
  }

  100% {
    box-shadow:
      0 28px 90px rgba(0,0,0,.55),
      0 0 55px rgba(255,75,145,.10);
  }
}

@keyframes eimTitlePulse {

  0% {
    text-shadow:
      0 8px 40px rgba(0,0,0,.55),
      0 0 15px rgba(54,226,223,.08);
  }

  100% {
    text-shadow:
      0 8px 40px rgba(0,0,0,.55),
      0 0 32px rgba(255,75,145,.22);
  }
}

@keyframes eimProgressShine {

  from {
    left: -120px;
  }

  to {
    left: calc(100% + 120px);
  }
}

@media (max-width: 700px) {

  body::before {
    inset: -12%;
    animation-duration: 24s;
  }

  body::after {
    filter: blur(55px);
  }
}

@media (prefers-reduced-motion: reduce) {

  body::before,
  body::after,
  .eim-cs::before,
  .panel,
  .panel h1,
  .fill::after {
    animation: none !important;
  }
}

/* END EIM_COMING_SOON_ANIMATED_V1 */



/* ====================================================
   EIM_ANIMATED_BACKGROUND_V3
   ==================================================== */

.eim-cs {
    position: relative !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            rgba(3,5,12,.35),
            rgba(3,5,12,.68)
        ) !important;
}

.eim-cs::before {
    content: "" !important;

    position: absolute !important;

    inset: -14% !important;

    background:
        url("/assets/coming-soon-bg.png")
        center center / cover
        no-repeat !important;

    z-index: -3 !important;

    filter:
        brightness(.55)
        saturate(1.30)
        contrast(1.08) !important;

    animation:
        eimPhotoMove
        12s
        ease-in-out
        infinite
        alternate !important;

    will-change: transform;
}

.eim-cs::after {
    content: "" !important;

    position: absolute !important;

    inset: -35% !important;

    z-index: -2 !important;

    pointer-events: none !important;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(0,230,220,.25),
            transparent 28%
        ),

        radial-gradient(
            circle at 75% 65%,
            rgba(255,40,130,.35),
            transparent 30%
        ),

        radial-gradient(
            circle at 60% 20%,
            rgba(135,65,255,.22),
            transparent 25%
        ) !important;

    filter:
        blur(50px) !important;

    animation:
        eimGlowMove
        8s
        ease-in-out
        infinite
        alternate !important;
}

.panel {
    position: relative !important;
    z-index: 10 !important;

    animation:
        eimCardPulse
        4s
        ease-in-out
        infinite
        alternate !important;
}

.panel h1 {
    animation:
        eimTitleGlow
        3s
        ease-in-out
        infinite
        alternate !important;
}

.fill {
    position: relative !important;
    overflow: hidden !important;
}

.fill::after {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    width: 100px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.90),
            transparent
        ) !important;

    animation:
        eimProgressMove
        2.5s
        linear
        infinite !important;
}

@keyframes eimPhotoMove {

    0% {
        transform:
            scale(1.04)
            translate3d(-2%,-1%,0);
    }

    50% {
        transform:
            scale(1.13)
            translate3d(2%,1%,0);
    }

    100% {
        transform:
            scale(1.09)
            translate3d(-1%,2%,0);
    }
}

@keyframes eimGlowMove {

    0% {
        transform:
            translate3d(-5%,-4%,0)
            rotate(0deg);
    }

    100% {
        transform:
            translate3d(8%,6%,0)
            rotate(10deg);
    }
}

@keyframes eimCardPulse {

    from {
        box-shadow:
            0 30px 90px rgba(0,0,0,.55),
            0 0 15px rgba(0,230,220,.05);
    }

    to {
        box-shadow:
            0 30px 90px rgba(0,0,0,.55),
            0 0 55px rgba(255,40,130,.20);
    }
}

@keyframes eimTitleGlow {

    from {
        text-shadow:
            0 0 12px rgba(0,230,220,.10);
    }

    to {
        text-shadow:
            0 0 35px rgba(255,40,130,.42);
    }
}

@keyframes eimProgressMove {

    from {
        left: -120px;
    }

    to {
        left: calc(100% + 120px);
    }
}

/* END EIM_ANIMATED_BACKGROUND_V3 */



/* ====================================================
   EIM_REAL_ANIMATED_BG_V4
   ==================================================== */

/* Disable old static/pseudo background layers */
.eim-cs::before,
.eim-cs::after {
    content: none !important;
}

.eim-cs {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #03040a !important;
}

/* ====================================================
   ACTUAL MOVING PHOTO
   ==================================================== */

.eim-bg-anim {
    position: fixed;

    inset: -12%;

    z-index: 0;

    pointer-events: none;

    background:
        url("/assets/coming-soon-bg.png")
        center center /
        cover
        no-repeat;

    filter:
        brightness(.48)
        saturate(1.30)
        contrast(1.10);

    transform:
        scale(1.06)
        translate3d(-2%, -1%, 0);

    will-change: transform;

    animation:
        EIMrealPhotoMove
        10s
        ease-in-out
        infinite
        alternate !important;
}

/* ====================================================
   MOVING NEON LAYER
   ==================================================== */

.eim-bg-neon {
    position: fixed;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(2,3,8,.12),
            rgba(2,3,8,.50)
        );
}

.eim-bg-neon span {
    position: absolute;

    width: 48vw;
    height: 48vw;

    min-width: 360px;
    min-height: 360px;

    border-radius: 50%;

    filter: blur(85px);

    opacity: .30;

    will-change: transform;
}

.neon-pink {
    left: -18%;
    bottom: -18%;

    background: #ff237f;

    animation:
        EIMpinkMove
        7s
        ease-in-out
        infinite
        alternate !important;
}

.neon-cyan {
    right: -18%;
    top: -18%;

    background: #20e5df;

    animation:
        EIMcyanMove
        9s
        ease-in-out
        infinite
        alternate !important;
}

.neon-purple {
    left: 42%;
    top: -25%;

    background: #9856ff;

    opacity: .20 !important;

    animation:
        EIMpurpleMove
        11s
        ease-in-out
        infinite
        alternate !important;
}

/* Keep card above everything */
.panel {
    position: relative !important;
    z-index: 5 !important;

    animation:
        EIMcardGlow
        3.5s
        ease-in-out
        infinite
        alternate !important;
}

.panel h1 {
    animation:
        EIMtitleGlow
        2.8s
        ease-in-out
        infinite
        alternate !important;
}

/* ====================================================
   REAL VISIBLE ANIMATIONS
   ==================================================== */

@keyframes EIMrealPhotoMove {

    0% {
        transform:
            scale(1.05)
            translate3d(-3%, -2%, 0);
    }

    33% {
        transform:
            scale(1.12)
            translate3d(2%, -1%, 0);
    }

    66% {
        transform:
            scale(1.17)
            translate3d(-1%, 3%, 0);
    }

    100% {
        transform:
            scale(1.10)
            translate3d(3%, 2%, 0);
    }
}

@keyframes EIMpinkMove {

    from {
        transform:
            translate3d(-15%, 15%, 0)
            scale(.80);
    }

    to {
        transform:
            translate3d(65%, -45%, 0)
            scale(1.30);
    }
}

@keyframes EIMcyanMove {

    from {
        transform:
            translate3d(20%, -20%, 0)
            scale(.85);
    }

    to {
        transform:
            translate3d(-65%, 55%, 0)
            scale(1.25);
    }
}

@keyframes EIMpurpleMove {

    from {
        transform:
            translate3d(0, -10%, 0)
            scale(.8);
    }

    to {
        transform:
            translate3d(-30%, 65%, 0)
            scale(1.30);
    }
}

@keyframes EIMcardGlow {

    from {
        box-shadow:
            0 30px 100px rgba(0,0,0,.60),
            0 0 12px rgba(32,229,223,.05);
    }

    to {
        box-shadow:
            0 30px 100px rgba(0,0,0,.60),
            0 0 60px rgba(255,35,127,.22);
    }
}

@keyframes EIMtitleGlow {

    from {
        text-shadow:
            0 8px 40px rgba(0,0,0,.60),
            0 0 10px rgba(32,229,223,.10);
    }

    to {
        text-shadow:
            0 8px 40px rgba(0,0,0,.60),
            0 0 38px rgba(255,35,127,.42);
    }
}


/* Mobile */
@media (max-width:700px) {

    .eim-bg-anim {
        inset: -20%;

        animation-duration:
            13s !important;
    }

    .eim-bg-neon span {
        width: 80vw;
        height: 80vw;
    }
}

/* END EIM_REAL_ANIMATED_BG_V4 */



/* =====================================================
   EIM_VIDEO_BACKGROUND_V2
   ===================================================== */

/* Disable previous experimental animation layers */

.eim-bg-anim,
.eim-bg-neon,
.eim-orb,
.eim-beam {
    display:none !important;
}

.eim-cs::before,
.eim-cs::after {
    content:none !important;
    display:none !important;
}


/* Main Coming Soon container */

.eim-cs {
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    min-height:100vh !important;
    min-height:100dvh !important;

    background:#020308 !important;
}


/* Full-screen MP4 */

.eim-video-bg {
    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;

    object-fit:cover !important;
    object-position:center center !important;

    z-index:0 !important;

    pointer-events:none !important;

    filter:
        brightness(.52)
        contrast(1.10)
        saturate(1.15) !important;
}


/* Dark/naughty cinematic overlay */

.eim-video-overlay {
    position:fixed !important;

    inset:0 !important;

    z-index:1 !important;

    pointer-events:none !important;

    background:

        radial-gradient(
            ellipse at center,
            transparent 18%,
            rgba(2,3,9,.17) 50%,
            rgba(2,3,9,.72) 100%
        ),

        linear-gradient(
            90deg,
            rgba(32,229,223,.05),
            transparent 35%,
            transparent 65%,
            rgba(255,35,127,.09)
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.10),
            rgba(0,0,0,.48)
        ) !important;
}


/* Card above video */

.panel {
    position:relative !important;

    z-index:5 !important;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,17,.46),
            rgba(5,8,17,.72)
        ) !important;

    backdrop-filter:
        blur(12px)
        saturate(1.08) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(1.08) !important;

    border:
        1px solid
        rgba(255,255,255,.14) !important;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.58) !important;
}


/* Keep subtle heading glow */

.panel h1 {
    text-shadow:
        0 8px 40px rgba(0,0,0,.70),
        0 0 26px rgba(255,45,135,.14) !important;
}


/* Mobile */

@media(max-width:700px) {

    .eim-video-bg {
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center center !important;
    }

    .panel {
        backdrop-filter:
            blur(8px) !important;

        -webkit-backdrop-filter:
            blur(8px) !important;
    }
}

/* END EIM_VIDEO_BACKGROUND_V2 */