/* BASICIGGY LAB — v1.2 / Soft atmospheric teal fog.
   Reference direction: dark glass, round edges and turquoise light pooling at the bottom.
   A small locally bundled animated WebP carries the drifting cloud texture; no libraries,
   filters on text, or video/network requirements. */
:root { --vapor-mint: #52f6cb; --vapor-cyan: #26bcae; }

/* Only dark surfaces use this treatment. The colored portfolio artwork is untouched. */
.landing .fog-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --fog-strength: .76;
}
.landing .fog-surface > .fog-vapor,
.landing .fog-surface > .fog-pool {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.landing .fog-surface > .fog-vapor {
  inset: auto -10% -15%;
  height: 85%;
  background: url('./assets/fog-drift.webp') center bottom / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: var(--fog-strength);
  filter: blur(8px) saturate(1.18);
  transform-origin: 50% 100%;
  animation: vapor-eddy 19s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
}
.landing .fog-surface > .fog-pool {
  inset: auto 3% -11%;
  height: 47%;
  background:
    radial-gradient(ellipse 54% 19% at 54% 80%, rgba(116,255,215,.53) 0%, rgba(28,214,175,.24) 49%, transparent 100%),
    radial-gradient(ellipse 52% 52% at 48% 94%, rgba(25,221,172,.22), transparent 79%);
  filter: blur(25px);
  opacity: .8;
  animation: vapor-pool 16s ease-in-out infinite alternate;
}
@keyframes vapor-eddy {
  0% { transform: translate3d(-2.3%, 1%, 0) scale(1.065,1.04) skewX(-1deg); opacity: calc(var(--fog-strength) * .77); }
  35% { transform: translate3d(2%, -1.5%, 0) scale(1.11,1.02) skewX(1.4deg); }
  72% { transform: translate3d(-1.5%, -4%, 0) scale(1.13,1.09) skewX(-.7deg); }
  100% { transform: translate3d(2.8%, -2%, 0) scale(1.08,1.02); opacity: var(--fog-strength); }
}
@keyframes vapor-pool {
  from { transform: translate3d(-4%,1%,0) scale(.93,1); opacity: .6; }
  to { transform: translate3d(4%,-4%,0) scale(1.09,1.04); opacity: .9; }
}

/* Foreground visuals, labels and buttons always sit above the fog. */
.landing .fog-surface > :not(.fog-vapor):not(.fog-pool) { position: relative; z-index: 1; }
.landing .fog-surface.world-card > .world-card-bottom { z-index: 3; }
.landing .fog-surface.world-card > .world-card-top { z-index: 3; }
.landing .fog-surface.world-card > .world-art { z-index: 2; }
.landing .fog-surface.world-card { border-radius: 21px; border-color: rgba(76,172,153,.23); box-shadow: inset 0 -1px 1px rgba(141,255,226,.13); }
.landing .fog-surface.world-card:hover { border-color: rgba(105,245,207,.48); box-shadow: inset 0 -1px 1px rgba(141,255,226,.28), 0 17px 52px rgba(5,138,102,.12); }
.landing .fog-surface.world-card > .fog-vapor { height: 78%; --fog-strength: .62; }
.landing .world-notch.fog-surface > .fog-vapor { --fog-strength: .76; }
.landing .world-cfw.fog-surface > .fog-vapor { --fog-strength: .36; }
.landing .world-os.fog-surface > .fog-vapor { --fog-strength: .68; }
.landing .world-cfw.fog-surface > .fog-pool { opacity: .42; }

/* A restrained underglow instead of a giant glowing hero: the projects remain first. */
.landing .lp-work-intro.fog-surface { padding-bottom: 33px; border-radius: 13px; }
.landing .lp-work-intro.fog-surface > .fog-vapor {
  height: 90%; bottom: -52%; --fog-strength: .24; filter: blur(15px);
}
.landing .lp-work-intro.fog-surface > .fog-pool { bottom: -45%; height: 48%; opacity: .4; }
.landing .lp-work-intro.fog-surface > :not(.fog-vapor):not(.fog-pool) { z-index: 2; }
.landing .site-header-main.fog-surface > .fog-vapor { height: 160%; bottom: -135%; --fog-strength: .28; filter: blur(8px); }
.landing .site-header-main.fog-surface > .fog-pool { bottom: -105%; height: 145%; opacity: .23; }
.landing .site-header-main.fog-surface > :not(.fog-vapor):not(.fog-pool) { z-index: 2; }
.landing .site-header-main.fog-surface { isolation: auto; }

/* The Playground gets the more luminous underlit-glass treatment. */
.landing .lp-hero-showcase.fog-surface { border-radius: 21px; border-color: rgba(77,191,163,.3); }
.landing .lp-hero-showcase.fog-surface > .fog-vapor { height: 68%; --fog-strength: .56; }
.landing .lp-hero-showcase.fog-surface > .fog-pool { height: 38%; }
.landing .lp-hero-showcase.fog-surface > canvas { z-index: 2; }
.landing .lp-hero-showcase.fog-surface > .showcase-center { z-index: 3; }
.landing .lp-hero-showcase.fog-surface > .showcase-head,
.landing .lp-hero-showcase.fog-surface > .showcase-foot { z-index: 4; }
.landing .play-stage-list.fog-surface { --fog-strength: .37; background-color: #101715; }
.landing .play-stage-list.fog-surface > .fog-vapor { height: 54%; }
.landing .play-stage-list.fog-surface > .fog-pool { height: 32%; opacity: .35; }
.landing .play-stage-list.fog-surface > button { z-index: 2; }

/* The actual browser OS also gets the atmospheric language without hiding UI. */
body.os-mode .app-window {
  background-color: rgba(10,19,18,.97);
  background-image: url('./assets/fog-drift.webp'), linear-gradient(180deg,rgba(14,22,21,.96),rgba(8,15,15,.97));
  background-repeat: no-repeat;
  background-position: center bottom, center;
  background-size: 100% 43%, cover;
  border-color: rgba(102,187,164,.35);
}
body.os-mode .app-window.inactive { border-color: rgba(87,121,113,.27); }
body.os-mode .dock {
  background-image: url('./assets/fog-drift.webp'),linear-gradient(180deg,rgba(23,36,32,.94),rgba(12,24,21,.95));
  background-size: 100% 130%,cover;
  background-position: center bottom,center;
  background-repeat:no-repeat;
}
body.os-mode .desktop-icon-visual { box-shadow: 0 9px 22px rgba(0,0,0,.3), 0 7px 23px rgba(38,220,174,.08), inset 0 -1px 7px rgba(46,234,180,.16); }

@media (max-width:700px) {
  .landing .fog-surface > .fog-vapor { filter: blur(10px); opacity: calc(var(--fog-strength) * .74); }
  .landing .fog-surface > .fog-pool { opacity: .48; }
  .landing .fog-surface.world-card { border-radius: 16px; }
  .landing .lp-hero-showcase.fog-surface { border-radius: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .landing .fog-surface > .fog-vapor { animation: none; background-image: url('./assets/fog-still.webp'); }
  .landing .fog-surface > .fog-pool { animation: none; }
  body.os-mode .app-window,body.os-mode .dock { background-image: url('./assets/fog-still.webp'),linear-gradient(180deg,#101918,#0a1110); }
}
/* Keep the Playground's existing absolutely positioned content intact. */
.landing .lp-hero-showcase.fog-surface > canvas,
.landing .lp-hero-showcase.fog-surface > .showcase-head,
.landing .lp-hero-showcase.fog-surface > .showcase-center,
.landing .lp-hero-showcase.fog-surface > .showcase-foot { position: absolute; }