/* Mainely Code site ambience + card containment hardening — 11 September 2026.
   The animated source is the exact rendered Buildroom aurora exported from the
   ADVANCED repository. Motion is decorative and automatically becomes static
   when the visitor requests reduced motion or data saving. */

:root{
  --mc-ambient-deep:#020a12;
  --mc-ambient-cyan:#11cfff;
  --mc-ambient-teal:#28e6c4;
  --mc-ambient-violet:#7658ff;
}

html{background:var(--mc-ambient-deep)}

body.mc-aurora-enabled{
  position:relative;
  isolation:isolate;
  background-color:transparent!important;
  background-image:none!important;
}

body.mc-aurora-enabled.mc-family-page{background:transparent!important}

.mc-site-ambience{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,10,18,.28),rgba(2,10,18,.73) 58%,rgba(2,10,18,.92)),
    url('/assets/ambiance/buildroom-aurora-idle-poster-20260911.webp') center 8%/cover no-repeat,
    var(--mc-ambient-deep);
}

.mc-site-ambience::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:1;
  background:
    radial-gradient(ellipse at 14% 8%,rgba(20,205,255,.12),transparent 37%),
    radial-gradient(ellipse at 80% 13%,rgba(53,230,190,.10),transparent 34%),
    radial-gradient(ellipse at 58% 50%,rgba(111,74,255,.05),transparent 38%);
  mix-blend-mode:screen;
}

.mc-site-ambience::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(2,10,18,.56),transparent 19%,transparent 81%,rgba(2,10,18,.52)),
    linear-gradient(180deg,rgba(2,10,18,.08),rgba(2,10,18,.30) 48%,rgba(2,10,18,.68));
}

.mc-site-aurora{
  position:absolute;
  left:50%;
  top:44%;
  width:max(100vw,178vh);
  height:max(100vh,56.2vw);
  min-width:100%;
  min-height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%) scale(1.08);
  opacity:.52;
  filter:saturate(1.42) contrast(1.18) brightness(1.22) blur(.3px);
  mix-blend-mode:screen;
}

/* Keep the ambient layer behind all actual page controls and content. */
body.mc-aurora-enabled > .lc-notice,
body.mc-aurora-enabled > header,
body.mc-aurora-enabled > main,
body.mc-aurora-enabled > footer,
body.mc-aurora-enabled > dialog,
body.mc-aurora-enabled > .lc-toast,
body.mc-aurora-enabled > .toast{
  position:relative;
  z-index:1;
}
body.mc-aurora-enabled > .lc-header,
body.mc-aurora-enabled > .header{z-index:100}

/* Let the aurora read as atmosphere—not as a wallpaper pasted over the copy. */
body.mc-aurora-enabled .lc-hero,
body.mc-aurora-enabled .lc-page-hero,
body.mc-aurora-enabled .mc-family-hero{
  background:
    linear-gradient(180deg,rgba(3,14,23,.10),rgba(3,14,23,.34));
}
body.mc-aurora-enabled .lc-section:not(.lc-mission):not(.lc-editions),
body.mc-aurora-enabled .section{
  background-color:rgba(4,18,27,.22);
}
body.mc-aurora-enabled .lc-section:nth-of-type(even):not(.lc-mission):not(.lc-editions),
body.mc-aurora-enabled .section:nth-of-type(even){background-color:rgba(5,24,34,.30)}
body.mc-aurora-enabled .lc-editions{background:rgba(7,26,35,.88)}
body.mc-aurora-enabled .lc-word-of-mouth{background:rgba(13,44,43,.89)}
body.mc-aurora-enabled .lc-final{background:linear-gradient(100deg,rgba(20,55,49,.91),rgba(8,34,44,.91))}
body.mc-aurora-enabled .lc-footer{background:rgba(2,14,22,.96)}
body.mc-aurora-enabled .lc-header{background:rgba(4,18,26,.90)}
body.mc-aurora-enabled .header{background:rgba(1,17,42,.88)}

/* -------------------------------------------------------------------------
   Card bleed prevention.

   Every product/room grid contributes its real height to the section. Cards
   remain normal-flow grid items, stretch only inside their own row, and may
   never paint down into the next section. These rules intentionally cover the
   current product constellation and the retained/legacy room-card surfaces.
   ------------------------------------------------------------------------- */

:is(#products,.mc-products-section,.lc-products-section,.mc-room-section,.room-section,[data-card-grid-section]){
  display:flow-root;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  contain:none!important;
}

:is(#products,.mc-products-section,.lc-products-section,.mc-room-section,.room-section,[data-card-grid-section]) > :is(.lc-wrap,.wrap){
  display:flow-root;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

:is(.mc-product-constellation,.lc-family-grid,.mc-room-grid,.room-grid,.product-grid,[data-card-grid]){
  position:relative;
  display:grid;
  width:100%;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  grid-auto-flow:row;
  grid-auto-rows:auto!important;
  align-items:stretch;
  align-content:start;
  overflow:visible!important;
}

/* Readable desktop cards: three across at the site's 1240px content width. */
.mc-product-constellation,
.lc-family-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;
}

:is(.mc-product-card,.lc-product,.mc-room-card,.room-card,.product-card,[data-card]){
  box-sizing:border-box;
  min-width:0!important;
  width:auto;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:stretch;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:normal;
}

:is(.mc-room-grid,.room-grid,.product-grid,[data-card-grid]) > :is(.mc-room-card,.room-card,.product-card,[data-card]){
  position:relative!important;
  inset:auto!important;
  transform:none;
}

:is(.mc-product-card-body,.lc-product-body,.mc-room-card-body,.room-card-body,.product-card-body){
  min-width:0;
  min-height:0;
  height:auto!important;
  max-height:none!important;
  overflow-wrap:anywhere;
}

#products .mc-product-constellation,
#products .lc-family-grid{margin-bottom:clamp(30px,4vw,52px)}
#products .mc-security-horizon{margin-top:0}
#products .lc-architecture-strip{clear:both;margin-top:clamp(32px,4vw,48px)}
#products + section{clear:both;position:relative;z-index:1}

/* Prevent hover motion from crossing a section boundary on pointer devices. */
@media(hover:hover) and (pointer:fine){
  #products .mc-product-card:hover{transform:translateY(-4px)}
}

@media(max-width:980px){
  .mc-product-constellation,
  .lc-family-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))!important}
}

@media(max-width:620px){
  .mc-product-constellation,
  .lc-family-grid{grid-template-columns:1fr!important}
  .mc-site-aurora{top:35%;width:230vh;height:100vh;opacity:.19}
}

@media(prefers-reduced-motion:reduce){
  .mc-site-aurora{display:none!important}
  .mc-site-ambience{background:
    linear-gradient(180deg,rgba(2,10,18,.35),rgba(2,10,18,.78)),
    url('/assets/ambiance/buildroom-aurora-idle-poster-20260911.webp') center top/cover no-repeat,
    var(--mc-ambient-deep)}
}

@media print{
  .mc-site-ambience{display:none!important}
  body.mc-aurora-enabled{background:#fff!important}
}

/* Product artwork is constrained to its media bay. Intrinsic square logos must
   never spill over the media boundary into card copy. */
.launch-site .mc-product-card-media,
.launch-site .lc-product-img{
  overflow:hidden!important;
  contain:paint;
}
.launch-site .mc-product-card-media img,
.launch-site .lc-product-img img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}