/* Mega Buys Online — official logo-led coming soon page */

:root {
  --royal-blue: #013bda;
  --royal-blue-light: #0648e8;
  --royal-blue-mid: #0235c9;
  --royal-blue-deep: #01268f;
  --royal-blue-shadow: #011a71;
  --gold: #ffc20d;
  --gold-light: #ffd55d;
  --white: #ffffff;
  --soft-white: rgba(255, 255, 255, .76);

  --font-primary: "Space Grotesk", Arial, sans-serif;
  --ease-premium: cubic-bezier(.22, .72, .18, 1);

  --pointer-x: 0px;
  --pointer-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scene-x: 0px;
  --scene-y: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  background: var(--royal-blue);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--royal-blue);
  color: var(--white);
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

.launch {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--app-height, 100vh);
  min-height: 500px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      #0645e4 0%,
      var(--royal-blue) 38%,
      #0237cf 66%,
      var(--royal-blue-deep) 100%
    );
}

.launch::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255, 255, 255, .055),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 50% 53%,
      rgba(255, 194, 13, .035),
      transparent 54%
    );
  pointer-events: none;
}

.atmosphere,
.grain,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere {
  z-index: -1;
  overflow: hidden;
  transform: translate3d(var(--scene-x), var(--scene-y), 0);
  transition: transform 1.4s var(--ease-premium);
}

.logo-color-field {
  position: absolute;
  inset: -12%;
  background:
    linear-gradient(rgba(1, 59, 218, .74), rgba(1, 59, 218, .74)),
    url("mega-buys-online-logo.png") center / cover no-repeat;
  filter: blur(56px) saturate(1.04);
  transform: scale(1.08);
  opacity: .34;
}

.blue-depth {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  will-change: transform, opacity;
}

.blue-depth--left {
  left: -28%;
  bottom: -44%;
  width: 70vw;
  height: 70vw;
  background:
    radial-gradient(
      circle,
      rgba(1, 38, 143, .72),
      rgba(1, 26, 113, .18) 55%,
      transparent 75%
    );
  opacity: .72;
  animation: depthLeft 28s ease-in-out infinite alternate;
}

.blue-depth--right {
  top: -40%;
  right: -23%;
  width: 68vw;
  height: 68vw;
  background:
    radial-gradient(
      circle,
      rgba(6, 72, 232, .76),
      rgba(1, 59, 218, .14) 54%,
      transparent 74%
    );
  opacity: .64;
  animation: depthRight 24s ease-in-out infinite alternate;
}

.gold-glow,
.white-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(84px);
  will-change: transform, opacity;
}

.gold-glow {
  top: -27%;
  right: -12%;
  width: 52vw;
  height: 52vw;
  background:
    radial-gradient(
      circle,
      rgba(255, 194, 13, .20),
      rgba(255, 194, 13, .04) 48%,
      transparent 73%
    );
  opacity: .46;
  animation: goldGlow 24s ease-in-out infinite alternate;
}

.white-glow {
  left: -24%;
  bottom: -44%;
  width: 62vw;
  height: 62vw;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .17),
      rgba(255, 255, 255, .024) 50%,
      transparent 74%
    );
  opacity: .38;
  animation: whiteGlow 30s ease-in-out infinite alternate;
}

.light-beam {
  position: absolute;
  width: 34vw;
  height: 190vh;
  filter: blur(11px);
  will-change: transform, opacity;
}

.light-beam--one {
  top: -48%;
  left: -10%;
  transform: rotate(-34deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .012) 19%,
      rgba(255, 255, 255, .09) 50%,
      rgba(255, 255, 255, .016) 80%,
      transparent
    );
  opacity: .32;
  animation: beamOne 18s ease-in-out infinite alternate;
}

.light-beam--two {
  right: -14%;
  bottom: -52%;
  transform: rotate(38deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 194, 13, .01) 20%,
      rgba(255, 194, 13, .075) 50%,
      rgba(255, 194, 13, .014) 80%,
      transparent
    );
  opacity: .24;
  animation: beamTwo 22s ease-in-out infinite alternate;
}

.panel {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .072);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .044),
      rgba(255, 255, 255, .008) 42%,
      rgba(1, 59, 218, .06)
    );
  box-shadow:
    inset 24px 18px 54px rgba(255, 255, 255, .018),
    inset -26px -22px 58px rgba(1, 26, 113, .18),
    0 36px 100px rgba(1, 26, 113, .22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  will-change: transform;
}

.panel--left {
  left: -13%;
  bottom: 1%;
  width: clamp(220px, 27vw, 430px);
  height: clamp(160px, 27vh, 280px);
  border-radius: 28px;
  transform:
    perspective(1000px)
    rotateY(17deg)
    rotateX(-4deg)
    rotateZ(7deg);
  opacity: .25;
  animation: panelLeft 22s ease-in-out infinite alternate;
}

.panel--right {
  top: 5%;
  right: -17%;
  width: clamp(340px, 42vw, 670px);
  height: clamp(410px, 67vh, 690px);
  border-radius: 46% 0 0 54% / 30% 0 0 65%;
  transform:
    perspective(1200px)
    rotateY(-16deg)
    rotateX(3deg)
    rotateZ(-3deg);
  opacity: .29;
  animation: panelRight 20s ease-in-out infinite alternate;
}

.panel--right::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  border: 1px solid rgba(255, 255, 255, .024);
  border-radius: inherit;
}

.panel--right::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 12%;
  width: 7%;
  height: 68%;
  border-radius: 100%;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, .14),
      rgba(255, 255, 255, .008)
    );
  filter: blur(8px);
  opacity: .28;
}

.arc {
  position: absolute;
  top: 47%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.arc--outer {
  width: min(80vw, 1080px);
  aspect-ratio: 1.92;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow:
    0 0 62px rgba(255, 255, 255, .012),
    inset 0 0 46px rgba(255, 194, 13, .014);
  animation: arcOuter 14s ease-in-out infinite alternate;
}

.arc--inner {
  width: min(64vw, 850px);
  aspect-ratio: 1.92;
  transform: translate(-50%, -50%) rotate(-3deg);
  border: 1px solid rgba(255, 194, 13, .07);
  opacity: .54;
  animation: arcInner 17s ease-in-out infinite alternate;
}

.grain {
  z-index: 8;
  opacity: .034;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  animation: grainShift .4s steps(2) infinite;
}

.vignette {
  z-index: 9;
  box-shadow:
    inset 0 0 15vw rgba(1, 26, 113, .56),
    inset 0 -14vh 22vh rgba(1, 26, 113, .21);
}

.hero {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding:
    max(18px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  text-align: center;
}

.logo-stage {
  position: relative;
  width: min(91vw, 1120px, calc(68svh * 1.5));
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  transform:
    translate3d(var(--pointer-x), var(--pointer-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-premium);
  will-change: transform;
}

.logo-blend {
  position: absolute;
  z-index: -3;
  inset: -10%;
  border-radius: 46%;
  background:
    linear-gradient(rgba(1, 59, 218, .82), rgba(1, 59, 218, .82)),
    url("mega-buys-online-logo.png") center / cover no-repeat;
  filter: blur(32px) saturate(1.02);
  opacity: .88;
}

.logo-aura {
  position: absolute;
  z-index: -2;
  top: 51%;
  left: 50%;
  width: 76%;
  height: 61%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(255, 194, 13, .11),
      rgba(255, 194, 13, .026) 35%,
      rgba(255, 255, 255, .018) 56%,
      transparent 75%
    );
  filter: blur(36px);
  opacity: .60;
  animation: auraBreath 8s ease-in-out infinite alternate;
}

.logo-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: logoFloat 8s ease-in-out infinite;
  will-change: transform;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 16px 22px rgba(1, 26, 113, .18));
}

.logo-shadow {
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: 17%;
  width: 57%;
  height: 11%;
  transform: translateX(-50%) rotateX(70deg);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(1, 26, 113, .58),
      rgba(1, 38, 143, .24) 46%,
      transparent 74%
    );
  filter: blur(13px);
  opacity: .52;
  animation: shadowBreath 8s ease-in-out infinite alternate;
}

.logo-reflection {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 11%;
  width: 46%;
  height: 6%;
  transform: translateX(-50%) rotateX(73deg);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 255, .17),
      rgba(255, 194, 13, .05) 36%,
      transparent 74%
    );
  filter: blur(14px);
  opacity: .38;
  animation: reflectionBreath 8s ease-in-out infinite alternate;
}

.hero-copy {
  position: relative;
  z-index: 4;
  margin-top: clamp(-1.85rem, -3.1vh, -.75rem);
  padding-inline: 20px;
}

.coming-soon {
  margin: 0;
  color: var(--white);
  font-size: clamp(.64rem, .78vw, .88rem);
  font-weight: 700;
  letter-spacing: .52em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 5px 20px rgba(1, 26, 113, .42);
}

.supporting-copy {
  margin: clamp(.78rem, 1.45vh, 1rem) 0 0;
  color: var(--soft-white);
  font-size: clamp(.88rem, 1vw, 1.05rem);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.55;
  text-shadow: 0 4px 18px rgba(1, 26, 113, .38);
}

.js .reveal {
  opacity: 0;
  transform: translateY(17px);
}

.js .reveal--logo {
  transform: translateY(14px) scale(.988);
}

.js.is-ready .reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1.25s var(--ease-premium),
    transform 1.25s var(--ease-premium);
}

.js.is-ready .reveal--logo {
  transform: translateY(0) scale(1);
  transition-delay: .05s;
}

.js.is-ready .reveal--title {
  transition-delay: .30s;
}

.js.is-ready .reveal--copy {
  transition-delay: .46s;
}

@keyframes depthLeft {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .58; }
  to { transform: translate3d(9%, -7%, 0) scale(1.10); opacity: .78; }
}

@keyframes depthRight {
  from { transform: translate3d(0, 0, 0) scale(.96); opacity: .50; }
  to { transform: translate3d(-8%, 7%, 0) scale(1.08); opacity: .70; }
}

@keyframes goldGlow {
  from { transform: translate3d(0, 0, 0) scale(.96); opacity: .34; }
  to { transform: translate3d(-8%, 7%, 0) scale(1.09); opacity: .52; }
}

@keyframes whiteGlow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .29; }
  to { transform: translate3d(9%, -7%, 0) scale(1.11); opacity: .43; }
}

@keyframes beamOne {
  from { transform: translate3d(-8%, -2%, 0) rotate(-34deg); opacity: .20; }
  to { transform: translate3d(18%, 4%, 0) rotate(-34deg); opacity: .40; }
}

@keyframes beamTwo {
  from { transform: translate3d(8%, 3%, 0) rotate(38deg); opacity: .14; }
  to { transform: translate3d(-16%, -4%, 0) rotate(38deg); opacity: .30; }
}

@keyframes panelLeft {
  from {
    transform:
      perspective(1000px)
      rotateY(17deg)
      rotateX(-4deg)
      rotateZ(7deg)
      translate3d(0, 0, 0);
  }
  to {
    transform:
      perspective(1000px)
      rotateY(13deg)
      rotateX(-2deg)
      rotateZ(4deg)
      translate3d(7%, -5%, 0);
  }
}

@keyframes panelRight {
  from {
    transform:
      perspective(1200px)
      rotateY(-16deg)
      rotateX(3deg)
      rotateZ(-3deg)
      translate3d(0, 0, 0);
  }
  to {
    transform:
      perspective(1200px)
      rotateY(-12deg)
      rotateX(1deg)
      rotateZ(0deg)
      translate3d(-4%, 3%, 0);
  }
}

@keyframes arcOuter {
  from { transform: translate(-50%, -50%) scale(.985); opacity: .46; }
  to { transform: translate(-50%, -50%) scale(1.025); opacity: .72; }
}

@keyframes arcInner {
  from { transform: translate(-50%, -50%) rotate(-3deg) scale(.98); }
  to { transform: translate(-50%, -50%) rotate(1deg) scale(1.025); }
}

@keyframes auraBreath {
  from { transform: translate(-50%, -50%) scale(.95); opacity: .46; }
  to { transform: translate(-50%, -50%) scale(1.07); opacity: .70; }
}

@keyframes logoFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
  50% { transform: translate3d(0, -4px, 12px) rotateX(.35deg); }
}

@keyframes shadowBreath {
  from { transform: translateX(-50%) rotateX(70deg) scale(.92); opacity: .40; }
  to { transform: translateX(-50%) rotateX(70deg) scale(1.07); opacity: .58; }
}

@keyframes reflectionBreath {
  from { transform: translateX(-50%) rotateX(73deg) scale(.93); opacity: .28; }
  to { transform: translateX(-50%) rotateX(73deg) scale(1.06); opacity: .46; }
}

@keyframes grainShift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1%, .8%, 0); }
  50% { transform: translate3d(.8%, -1%, 0); }
  75% { transform: translate3d(.5%, .8%, 0); }
  100% { transform: translate3d(-.7%, -.4%, 0); }
}

@media (max-width: 900px) {
  .logo-stage {
    width: min(93vw, 900px, calc(66svh * 1.5));
  }

  .panel--right {
    right: -29%;
    opacity: .23;
  }

  .panel--left {
    left: -22%;
    opacity: .19;
  }

  .arc--outer { width: 94vw; }
  .arc--inner { width: 77vw; }
}

@media (max-width: 640px) {
  .launch {
    min-height: 470px;
  }

  .hero {
    padding-inline: 6px;
  }

  .logo-stage {
    width: min(96vw, calc(64svh * 1.5));
  }

  .hero-copy {
    margin-top: clamp(-.95rem, -1.65vh, -.32rem);
  }

  .coming-soon {
    font-size: .57rem;
    letter-spacing: .42em;
  }

  .supporting-copy {
    max-width: 84vw;
    margin-inline: auto;
    font-size: .86rem;
  }

  .panel--right {
    top: 12%;
    right: -58%;
    width: 108vw;
    height: 58vh;
    opacity: .17;
  }

  .panel--left,
  .light-beam--two,
  .arc--inner {
    display: none;
  }

  .arc--outer {
    width: 108vw;
    opacity: .27;
  }

  .gold-glow {
    width: 86vw;
    height: 86vw;
    opacity: .31;
  }

  .logo-blend {
    inset: -8%;
    filter: blur(26px);
  }

  .logo-aura {
    width: 88%;
    height: 68%;
  }
}

@media (max-height: 650px) {
  .logo-stage {
    width: min(87vw, 920px, calc(63svh * 1.5));
  }

  .hero-copy {
    margin-top: -.5rem;
  }

  .supporting-copy {
    margin-top: .62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .atmosphere,
  .logo-stage {
    transform: none !important;
    transition: none !important;
  }

  .js .reveal,
  .js.is-ready .reveal,
  .js.is-ready .reveal--logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}