/* =========================================================
   SPACES V28 — ISOLATED V11 MOBILE INTRO
   Exact V11-style portrait composition on every device.
   This file loads AFTER styles.css so old intro rules cannot
   resize/crop/stretch the launch video.
   ========================================================= */

#spaces-launch-v28.site-intro {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(ellipse 42% 56% at 50% 48%, rgba(105, 74, 151, .17) 0%, rgba(54, 38, 78, .07) 42%, transparent 74%),
    radial-gradient(circle at 16% 18%, rgba(94, 66, 132, .08), transparent 31%),
    radial-gradient(circle at 84% 82%, rgba(70, 49, 101, .07), transparent 32%),
    #05050a !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

#spaces-launch-v28::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(112deg, transparent 0 43%, rgba(255,255,255,.016) 50%, transparent 57%) !important;
  transform: translateX(-110%);
  animation: spacesV28Sweep 1.5s .2s cubic-bezier(.2,.7,.2,1) forwards !important;
}

#spaces-launch-v28 .launch-v28-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .055;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 82%, transparent 100%);
}

#spaces-launch-v28 .launch-v28-haze {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
  opacity: .09;
}
#spaces-launch-v28 .launch-v28-haze-a {
  width: min(52vw, 680px);
  aspect-ratio: 1;
  left: 7%;
  top: 2%;
  background: radial-gradient(circle, rgba(115,82,165,.72), transparent 69%);
}
#spaces-launch-v28 .launch-v28-haze-b {
  width: min(46vw, 600px);
  aspect-ratio: 1;
  right: 5%;
  bottom: -13%;
  background: radial-gradient(circle, rgba(73,55,99,.62), transparent 70%);
}

#spaces-launch-v28 .launch-v28-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Exact V11 mobile-style sizing. This is intentionally the SAME on desktop. */
#spaces-launch-v28 #spaces-launch-video-v28 {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: min(100vw, 560px) !important;
  height: min(100dvh, 900px) !important;
  max-width: 100% !important;
  max-height: 100dvh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0 !important;
  transform: scale(.985) !important;
  filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: opacity .22s ease, transform .55s cubic-bezier(.2,.8,.2,1) !important;
}

#spaces-launch-v28.is-playing #spaces-launch-video-v28,
#spaces-launch-v28.is-held #spaces-launch-video-v28 {
  opacity: 1 !important;
  transform: none !important;
}

#spaces-launch-v28.is-leaving {
  pointer-events: none !important;
  animation: spacesV28Exit .64s cubic-bezier(.62,0,.2,1) forwards !important;
}

#spaces-launch-v28 .launch-v28-fallback {
  display: none;
  position: absolute;
  z-index: 4;
  inset: 0;
  place-items: center;
  color: #eee9f7;
  font: 650 28px/1 system-ui, sans-serif;
  letter-spacing: -.04em;
}
#spaces-launch-v28.is-failed .launch-v28-fallback { display: grid; }
#spaces-launch-v28.is-failed #spaces-launch-video-v28 { display: none !important; }

@media (max-width: 780px) {
  #spaces-launch-v28 .launch-v28-grid { opacity: .035; background-size: 44px 44px; }
  #spaces-launch-v28 .launch-v28-haze { opacity: .055; }
}

@keyframes spacesV28Sweep { to { transform: translateX(110%); } }
@keyframes spacesV28Exit {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #spaces-launch-v28::before { animation: spacesV28Sweep 1.5s .2s cubic-bezier(.2,.7,.2,1) forwards !important; }
  #spaces-launch-v28.is-leaving { animation: spacesV28Exit .4s ease forwards !important; }
}

/* =========================================================
   SPACES V29 — DESKTOP SEAMLESS STAGE
   Keep the exact portrait/mobile MP4. On desktop, extend the
   video's own atmosphere across the viewport and feather the
   portrait edges so there is no visible pasted-on rectangle.
   Mobile is intentionally unchanged from V28.
   ========================================================= */
@media (min-width: 781px) {
  #spaces-launch-v28.site-intro {
    background:
      linear-gradient(rgba(5,5,10,.08), rgba(5,5,10,.08)),
      url('/spaces-intro-backdrop-v29.webp') center center / cover no-repeat,
      #05050a !important;
  }

  /* A soft central aura bridges the portrait video into the wide stage. */
  #spaces-launch-v28 .launch-v28-media::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(82vw, 1260px);
    height: min(92vh, 980px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(69,37,103,.24) 0%, rgba(39,21,58,.15) 36%, rgba(12,8,18,.04) 68%, transparent 82%);
  }

  #spaces-launch-v28 #spaces-launch-video-v28 {
    z-index: 1 !important;
    /* V28/V11 sizing is kept exactly; only the side edges are blended. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  /* The derived backdrop already carries the video atmosphere, so the
     older generic haze is toned down on desktop to avoid mismatched blobs. */
  #spaces-launch-v28 .launch-v28-haze-a { opacity: .045 !important; }
  #spaces-launch-v28 .launch-v28-haze-b { opacity: .035 !important; }
}

/* =========================================================
   SPACES V30 — DESKTOP ANIMATED LOGO STAGE
   Desktop uses a dedicated 1080x900 crop of the mobile
   animation so the mark + wordmark read as a desktop logo.
   Mobile remains the original portrait animation.
   ========================================================= */
@media (min-width: 781px) {
  #spaces-launch-v28.site-intro {
    background:
      linear-gradient(rgba(5,5,10,.06), rgba(5,5,10,.06)),
      url('/spaces-intro-backdrop-v29.webp') center center / cover no-repeat,
      #05050a !important;
  }

  #spaces-launch-v28 .launch-v28-media::before {
    width: min(88vw, 1320px) !important;
    height: min(90vh, 920px) !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(73,40,108,.22) 0%, rgba(42,23,63,.12) 40%, rgba(10,7,16,.025) 70%, transparent 86%) !important;
  }

  #spaces-launch-v28 #spaces-launch-video-v28 {
    /* 1080x900 = 1.2:1. Large enough to feel like a desktop logo,
       but never allowed to dominate the whole viewport. */
    width: min(820px, 72vw, 84vh) !important;
    height: auto !important;
    max-width: none !important;
    max-height: 70vh !important;
    aspect-ratio: 6 / 5 !important;
    object-fit: contain !important;
    object-position: center center !important;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 78%, rgba(0,0,0,.94) 90%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse at center, #000 78%, rgba(0,0,0,.94) 90%, transparent 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }
}

@media (min-width: 781px) and (max-height: 760px) {
  #spaces-launch-v28 #spaces-launch-video-v28 {
    width: min(680px, 68vw, 78vh) !important;
    max-height: 65vh !important;
  }
}


/* =========================================================
   V31 - ORIGINAL DESKTOP MP4, NO CROP
   Desktop uses the real 1920x1080 launch animation again.
   The ENTIRE source frame is always visible. Never cover/crop.
   Mobile remains exactly as V30.
   ========================================================= */
@media (min-width: 781px) {
  #spaces-launch-v28.site-intro {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse 46% 54% at 50% 50%, rgba(92, 58, 139, .16) 0%, rgba(49, 31, 75, .07) 45%, transparent 76%),
      radial-gradient(circle at 17% 22%, rgba(83, 53, 122, .07), transparent 32%),
      radial-gradient(circle at 84% 78%, rgba(68, 43, 101, .06), transparent 34%),
      #05050a !important;
  }

  #spaces-launch-v28 .launch-v28-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    transform: none !important;
    background: transparent !important;
  }

  #spaces-launch-v28 .launch-v28-media::before {
    content: none !important;
    display: none !important;
  }

  #spaces-launch-v28 #spaces-launch-video-v28 {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
    scale: 1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: transparent !important;
  }

  #spaces-launch-v28.intro-video-playing #spaces-launch-video-v28,
  #spaces-launch-v28.intro-video-held #spaces-launch-video-v28 {
    transform: none !important;
    scale: 1 !important;
  }
}


/* =========================================================
   SPACES V32 — TRUE DESKTOP INTRO
   Desktop is the real 1920x1080 MP4, edge-to-edge. No mobile
   stage, no derived backdrop, no grid/haze layers, no masks.
   Mobile remains unchanged.
   ========================================================= */
@media (min-width: 781px) {
  #spaces-launch-v28.site-intro {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #05050a !important;
  }

  #spaces-launch-v28::before,
  #spaces-launch-v28 .launch-v28-grid,
  #spaces-launch-v28 .launch-v28-haze,
  #spaces-launch-v28 .launch-v28-media::before {
    content: none !important;
    display: none !important;
  }

  #spaces-launch-v28 .launch-v28-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #05050a !important;
  }

  #spaces-launch-v28 #spaces-launch-video-v28 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    scale: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: #05050a !important;
  }
}


/* SPACES V33 — decorative intro video: no pointer/drag interaction */
#spaces-launch-v28 #spaces-launch-video-v28 {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  touch-action: none !important;
}