/* =========================================================
   PARTY & IMMERSIVE (#experiences)
   big-screen laser projector demo · dance-party reel · coming-soon cards · closing CTA
   ========================================================= */
.experiences.sec { padding-top: 0; overflow: hidden; isolation: isolate; }

/* ---------- 1 · big-screen projector: live demo scene ----------
   The scene is a size container. Everything in the "rig" (screen, picture, projector, stand, wall panels, uplights)
   is drawn in em, with the rig's font-size = one scene unit --u (≈ 1.16 in of a real 80" screen):
     wall/floor line = rig bottom · 80" picture 60em × 33.75em, 26em above the floor
     100" wall picture = the same picture scaled 1.25 from its bottom edge (75em wide) · projector top ≈ 17.6em      */
.experiences-big {
  --copy-w: 540px;
  /* scene palette (original dark theme); ice/experiences.css re-tints it */
  --bs-wall-1: #131a30; --bs-wall-2: #1a2342; --bs-wall-3: #222c4e;
  --bs-floor-1: #111628; --bs-floor-2: #080b15;
  --bs-base: #283153;
  --bs-amber: rgba(255, 170, 92, .34); --bs-violet: rgba(146, 104, 255, .3);
  --bs-panel-hi: rgba(255, 255, 255, .055); --bs-panel-lo: rgba(0, 0, 0, .24);
  --bs-haze: 3, 5, 13;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(700px, 100vh, 980px);
  display: flex; align-items: center;
  background: var(--bs-wall-2);
}
.experiences-big-scene {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size;
  /* --copy-r: right edge of the copy column · --floor-y: wall/floor line from the top · --u: scene unit · --rig-cx: picture centre */
  --copy-r: calc(max(var(--gutter), (100cqw - var(--maxw)) / 2) + var(--copy-w));
  --floor-y: min(100cqh - 150px, 800px);
  --u: min((100cqw - var(--copy-r) - var(--gutter) - 48px) / 76, (var(--floor-y) - 96px) / 73, 11px);
  --rig-cx: calc((var(--copy-r) + 100cqw - var(--gutter)) / 2);
}

/* room: evening venue wall (fine wallcovering stripe, warm low glow), polished floor, baseboard */
.experiences-big-room { position: absolute; inset: 0; }
.experiences-big-wall {
  position: absolute; left: 0; right: 0; top: 0; height: var(--floor-y);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 11px),
    radial-gradient(60% 60% at var(--rig-cx) 100%, rgba(255, 196, 140, .1), transparent 70%),
    radial-gradient(calc(var(--u) * 11) calc(var(--u) * 40) at calc(var(--rig-cx) - var(--u) * 44) 0, rgba(255, 226, 190, .2), transparent 72%),
    radial-gradient(calc(var(--u) * 11) calc(var(--u) * 40) at calc(var(--rig-cx) + var(--u) * 44) 0, rgba(255, 226, 190, .2), transparent 72%),
    radial-gradient(22% 70% at 100% 100%, var(--bs-amber), transparent 75%),
    radial-gradient(40% 46% at 84% 0%, rgba(146, 104, 255, .16), transparent 72%),
    linear-gradient(180deg, var(--bs-wall-1), var(--bs-wall-2) 55%, var(--bs-wall-3));
}
.experiences-big-floor {
  position: absolute; left: 0; right: 0; top: var(--floor-y); bottom: 0;
  background:
    radial-gradient(34% 60% at var(--rig-cx) 0%, rgba(214, 230, 255, .08), transparent 70%),
    linear-gradient(180deg, var(--bs-floor-1), var(--bs-floor-2));
}
.experiences-big-baseboard {
  position: absolute; left: 0; right: 0; top: calc(var(--floor-y) - var(--u) * 3.2); height: calc(var(--u) * 3.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, var(--bs-base) 1px, var(--bs-base) 70%, rgba(0, 0, 0, .3));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
/* haze: the copy side sits on it; top + bottom melt into the page */
.experiences-big-haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--bs-haze), .95) 0, rgba(var(--bs-haze), .9) calc(var(--copy-r) - 90px), rgba(var(--bs-haze), .5) calc(var(--copy-r) - 4px), rgba(var(--bs-haze), 0) calc(var(--copy-r) + 64px)),
    linear-gradient(180deg, var(--bg) 0, rgba(var(--bs-haze), 0) 120px, rgba(var(--bs-haze), 0) calc(100% - 120px), var(--bg) 100%);
}

/* ---- the rig ---- */
.experiences-big-rig, .experiences-big-decor {
  position: absolute; z-index: 2; font-size: var(--u);
  width: 100em; height: 80em;
  left: calc(var(--rig-cx) - 50em); top: calc(var(--floor-y) - 80em);
  pointer-events: none;
}
.experiences-big-decor { z-index: auto; } /* wall panels, uplights, floor pool: part of the room, under the copy haze */
.experiences-big-rig > *, .experiences-big-decor > * { position: absolute; }
/* wall panels (moulded frames) either side of the big plain wall the picture lands on */
.experiences-big-panel {
  bottom: 4.4em; width: 17em; height: 52em; border-radius: .25em;
  box-shadow: inset 0 0 0 .2em var(--bs-panel-hi), inset .5em .5em 1.2em var(--bs-panel-lo), .14em .14em 0 var(--bs-panel-hi), -.14em -.14em 0 var(--bs-panel-lo);
}
.experiences-big-panel.p1 { left: -47em; }
.experiences-big-panel.p2 { left: -28em; }
.experiences-big-panel.p3 { left: 111em; }
.experiences-big-panel.p4 { left: 130em; }
/* uplights: warm + violet washes rising from cans on the floor */
.experiences-big-wash {
  --can: rgba(255, 214, 160, .9);
  bottom: 0; width: 30em; height: 66em; margin-left: -15em;
  background: radial-gradient(50% 100% at 50% 100%, var(--bs-amber), transparent 72%);
}
.experiences-big-wash.w1 { left: -2em; }
.experiences-big-wash.w2 { left: 102em; }
.experiences-big-wash.w3, .experiences-big-wash.w4 { --can: rgba(196, 170, 255, .9); height: 58em; background: radial-gradient(50% 100% at 50% 100%, var(--bs-violet), transparent 72%); }
.experiences-big-wash.w3 { left: -37.5em; }
.experiences-big-wash.w4 { left: 137.5em; }
.experiences-big-wash::after {
  content: ""; position: absolute; left: 50%; bottom: -1.7em; width: 3.4em; height: 2.1em; margin-left: -1.7em;
  border-radius: .55em .55em .3em .3em; background: linear-gradient(180deg, #3a4258, #161a26);
  box-shadow: inset 0 .28em 0 var(--can), 0 .5em .8em -.3em rgba(0, 0, 0, .6);
}
/* light pool the picture throws on the floor */
.experiences-big-pool { /* the picture's glow on the polished floor */
  left: 14em; width: 72em; top: 80.6em; height: 16em; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(196, 222, 255, .2), rgba(196, 222, 255, .06) 55%, transparent);
  transform-origin: 50% 0; transition: transform 1s var(--ease);
}
.experiences-big.is-wall .experiences-big-pool { transform: scaleX(1.2); }

/* 80-inch screen on its own stand (two posts with tripod feet) */
.experiences-big-screen {
  left: 18.9em; bottom: -1.3em; width: 62.2em; height: 62.15em;
  transition: transform .95s var(--ease), opacity .35s ease;   /* rolling back in: visible straight away */
}
.experiences-big-screen::after {
  content: ""; position: absolute; left: -3em; right: -3em; bottom: -1.3em; height: 2.8em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .42), transparent);
}
.experiences-big-screen-frame {
  position: absolute; left: 0; right: 0; top: 0; height: 35.95em; box-sizing: border-box;
  border: 1.1em solid #101219; border-radius: .45em;
  background: linear-gradient(180deg, #e9edf2, #ccd3dc);
  box-shadow: 0 2.2em 3em -1.6em rgba(0, 0, 0, .65), 0 0 0 .1em rgba(255, 255, 255, .1), inset 0 0 0 .08em rgba(0, 0, 0, .3);
}
.experiences-big-leg {
  position: absolute; top: 34em; bottom: 0; width: .6em; border-radius: .3em;
  background: linear-gradient(90deg, #626a7c, #d9dee6 45%, #858d9e);
}
.experiences-big-leg.l { left: 2.6em; }
.experiences-big-leg.r { right: 2.6em; }
.experiences-big-leg::before, .experiences-big-leg::after {
  content: ""; position: absolute; left: .05em; top: calc(100% - 5em); width: .5em; height: 6.1em; border-radius: .25em;
  background: inherit; transform-origin: 50% 0;
}
.experiences-big-leg::before { transform: rotate(35deg); }
.experiences-big-leg::after { transform: rotate(-35deg); }
.experiences-big.is-wall .experiences-big-screen { /* rolls off to the side as a solid object, fades once clear of the picture */
  transform: translateX(42em); opacity: 0;
  transition: transform .9s cubic-bezier(.55, 0, .3, 1), opacity .3s ease .55s;
}

/* the projected picture: inside the screen (80"), or straight on the wall (100") */
.experiences-big-pic { /* 60 × 33.75em screen area + a hair of bleed under the frame (no sub-pixel matte line) */
  left: 19.85em; bottom: 25.85em; width: 60.3em; height: 33.92em; overflow: hidden; border-radius: .1em;
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease), box-shadow 1s ease;
}
.experiences-big-pic::after { /* projector falloff; a touch stronger on the wall */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(0, 0, 0, .26));
  opacity: .45; transition: opacity 1s;
}
.experiences-big.is-wall .experiences-big-pic {
  transform: translateY(-2em) scale(1.25);
  box-shadow: 0 0 3.6em .4em rgba(170, 206, 255, .14), 0 0 11em 2em rgba(170, 206, 255, .07);
}
.experiences-big.is-wall .experiences-big-pic::after { opacity: 1; }

/* light fan from the projector's top window up to the picture's bottom edge (+ a few dust motes in it) */
.experiences-big-fan {
  left: 20em; bottom: 17.4em; width: 60em; height: 8.9em; transform-origin: 50% 100%;
  filter: blur(.3em); transition: transform 1s var(--ease);
}
.experiences-big-fan i {
  position: absolute; inset: 0;
  clip-path: polygon(43.3% 100%, 56.7% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(234, 245, 255, .6), rgba(205, 228, 255, .2) 62%, rgba(205, 228, 255, .07));
}
.experiences-big.is-wall .experiences-big-fan { transform: scale(1.25, 1.24); }
.experiences-big-motes { left: 30em; bottom: 17.8em; width: 40em; height: 8em; }
.experiences-big-motes i {
  position: absolute; bottom: 0; width: .3em; height: .3em; border-radius: 50%;
  background: #eef7ff; opacity: 0; animation: experiences-mote 4.6s linear infinite;
}
.experiences-big-motes i:nth-child(1) { left: 44%; --dx: -6em; }
.experiences-big-motes i:nth-child(2) { left: 50%; --dx: 2em; animation-delay: -.8s; animation-duration: 5.4s; }
.experiences-big-motes i:nth-child(3) { left: 55%; --dx: 9em; animation-delay: -1.9s; }
.experiences-big-motes i:nth-child(4) { left: 47%; --dx: -12em; animation-delay: -2.7s; animation-duration: 5.8s; }
.experiences-big-motes i:nth-child(5) { left: 52%; --dx: 14em; animation-delay: -3.5s; animation-duration: 4.2s; }
.experiences-big-motes i:nth-child(6) { left: 49%; --dx: -1em; animation-delay: -4.2s; }
@keyframes experiences-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  25% { opacity: .75; }
  100% { transform: translate(var(--dx, 0), -8em); opacity: 0; }
}

/* slim walnut side table with brass legs; the ultra-short-throw laser projector sits on it, right against the screen */
.experiences-big-table { left: 40.5em; bottom: -3.2em; width: 19em; height: 16.6em; }
.experiences-big-table::after {
  content: ""; position: absolute; z-index: -1; left: -2em; right: -2em; bottom: -1.3em; height: 2.8em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}
.experiences-big-table-top {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3.3em;
  clip-path: polygon(3% 0, 97% 0, 100% 72%, 100% 100%, 0 100%, 0 72%);
  background: linear-gradient(180deg, #7d5939 0, #5f412a 71%, #f0d4a8 71%, #c69a68 74%, #4a3020 76%, #2b1c12 100%);
}
.experiences-big-table-leg {
  position: absolute; top: 3em; bottom: 0; width: .5em; border-radius: .25em;
  background: linear-gradient(90deg, #7a5a22, #e9cb85 45%, #8f6c2c);
}
.experiences-big-table-leg.f1 { left: 1.3em; }
.experiences-big-table-leg.f2 { right: 1.3em; }
.experiences-big-table-leg.b1, .experiences-big-table-leg.b2 { top: 2.6em; bottom: 2.1em; filter: brightness(.55); }
.experiences-big-table-leg.b1 { left: 2.6em; }
.experiences-big-table-leg.b2 { right: 2.6em; }
.experiences-big-proj { left: 43em; bottom: 12.4em; width: 14em; height: 5.2em; transition: transform 1s var(--ease); }
.experiences-big-proj::before { /* contact shadow */
  content: ""; position: absolute; left: -.8em; right: -.8em; bottom: -.75em; height: 1.7em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.experiences-big-proj-top { /* top surface, seen from a little above: shallow, narrower at the back */
  position: absolute; z-index: 1; left: .2em; right: .2em; top: .2em; height: 1.95em;
  border-radius: 1.1em 1.1em .25em .25em / .9em .9em .25em .25em;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%),
    linear-gradient(180deg, #f3f5f8, #fdfdfe 55%, #e4e8ee);
  box-shadow: inset 0 -.1em 0 rgba(150, 160, 175, .5);
}
.experiences-big-proj-win { /* dark glass window near the back edge: the laser light leaves upward from here */
  position: absolute; left: 3.6em; right: 3.6em; top: .3em; height: .62em; border-radius: .4em;
  background: linear-gradient(180deg, #04060b, #19202d 60%, #364156);
  box-shadow: inset 0 .07em .1em rgba(255, 255, 255, .22), 0 0 0 .07em rgba(0, 0, 0, .25);
}
.experiences-big-proj-win::after {
  content: ""; position: absolute; left: -1.6em; right: -1.6em; bottom: .15em; height: 2.6em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 251, 255, .95), rgba(170, 220, 255, .45) 45%, transparent);
  animation: experiences-lamp 3.4s ease-in-out infinite alternate;
}
@keyframes experiences-lamp { from { opacity: .78; } to { opacity: 1; } }
.experiences-big-proj-front {
  position: absolute; left: 0; right: 0; top: 1.95em; bottom: 0;
  border-radius: .5em .5em 1em 1em / .4em .4em 1em 1em;
  background: linear-gradient(180deg, #e0e4ea, #c7cdd6 55%, #a9b0bc);
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .75), inset 0 -.3em .5em rgba(0, 0, 0, .14), 0 .3em .6em -.2em rgba(0, 0, 0, .5);
}
.experiences-big-proj-front::before { /* speaker grille */
  content: ""; position: absolute; left: 1.1em; right: 3.1em; top: .7em; bottom: .75em; border-radius: .35em;
  background: radial-gradient(circle, rgba(64, 74, 92, .42) 30%, transparent 36%) 0 0 / .46em .46em;
}
.experiences-big-proj-led {
  position: absolute; right: 1.35em; top: 50%; width: .48em; height: .48em; margin-top: -.12em; border-radius: 50%;
  background: #5ef0c8; box-shadow: 0 0 .55em .12em rgba(94, 240, 200, .8);
}
.experiences-big.is-wall .experiences-big-proj { transform: translateY(.45em) scale(1.03); } /* eased out from the wall for 100 in */

/* picture-size tag that rides the top-right corner of the picture */
.experiences-big-size { right: 20em; bottom: 61.9em; transition: transform 1s var(--ease); }
.experiences-big.is-wall .experiences-big-size { transform: translate(7.5em, -9.25em); }
.experiences-big-size-t {
  display: inline-flex; align-items: center; gap: .6em; white-space: nowrap;
  font-family: var(--mono); font-size: clamp(9.5px, 1.15em, 12.5px); letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 244, 255, .9);
}
.experiences-big-size-t::before { content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: .5; }
.experiences-big-size-t b { font-weight: 600; }
.experiences-big-size-t .w, .experiences-big.is-wall .experiences-big-size-t .s { display: none; }
.experiences-big.is-wall .experiences-big-size-t .w { display: inline; }
/* callout beside the projector */
.experiences-big-callout { right: 58.4em; bottom: 12.6em; display: none; flex-direction: row-reverse; align-items: center; gap: .8em; }
.experiences-big-callout::before { content: ""; width: 3em; height: 1px; background: rgba(236, 244, 255, .55); }
.experiences-big-callout span {
  font-family: var(--mono); font-size: clamp(9px, 1.02em, 11.5px); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(236, 244, 255, .82); white-space: nowrap; text-align: right;
}

/* ---- picture layers (one per scene; em = scene unit) ---- */
/* crossfade: the new scene fades in on top, the old one stays underneath until it is covered (no blank frame) */
.experiences-big-layer {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #04060c;
  opacity: 0; visibility: hidden; transition: opacity 0s linear .75s, visibility 0s linear .75s;
}
.experiences-big-layer.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity .6s ease .12s, visibility 0s; }
.experiences-big-standby {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em;
  background: radial-gradient(80% 90% at 50% 40%, #17244b, #060914 75%); color: #eef4ff;
}
.experiences-big-standby-mark { width: 7.5em; height: 7.5em; }
.experiences-big-standby-name { font-size: 2.2em; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.experiences-big-standby-sub { font-family: var(--mono); font-size: max(7px, 1.05em); letter-spacing: .32em; text-transform: uppercase; color: rgba(236, 244, 255, .62); }
.experiences-big-chiprow { position: absolute; z-index: 4; left: 1.4em; top: 1.3em; display: flex; flex-wrap: wrap; gap: .55em; font-size: max(7px, 1.1em); }
.experiences-big-chip {
  display: inline-flex; align-items: center; gap: .5em; padding: .45em .85em; border-radius: 99em; line-height: 1;
  font-family: var(--mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(6, 9, 18, .66); border: 1px solid rgba(255, 255, 255, .24);
}
.experiences-big-chip.is-live { background: #e11d48; border-color: rgba(255, 255, 255, .3); }
.experiences-big-chip i { width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
.experiences-big-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.experiences-big-v.is-contain video, .experiences-big-v.is-tall video { object-fit: contain; }
/* Live Gala Wall: newest portrait drops into the big tile, the rest shift along */
.experiences-big-gala { display: flex; flex-direction: column; gap: .9em; padding: 1.2em 1.3em 1.3em; background: radial-gradient(110% 80% at 50% 0%, #1c2649, #070a15 70%); }
.experiences-big-gala-bar { display: flex; align-items: center; gap: .9em; font-size: max(7px, 1.1em); color: #eef4ff; white-space: nowrap; }
.experiences-big-gala-bar b { font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.experiences-big-gala-count { margin-left: auto; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 244, 255, .7); }
.experiences-big-gala-count em { font-style: normal; color: #fff; }
.experiences-big-gala-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .7em; }
.experiences-big-tile { position: relative; margin: 0; overflow: hidden; border-radius: .55em; background: #0e1428; box-shadow: 0 .4em 1em -.4em rgba(0, 0, 0, .7); }
.experiences-big-tile.is-hero { grid-row: 1 / span 2; }
.experiences-big-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.experiences-big-tile.is-swap img { animation: experiences-swap .6s ease both; }
.experiences-big-drop { animation: experiences-drop .8s cubic-bezier(.2, .85, .25, 1.1) both; }
.experiences-big-tile.is-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.experiences-big-tile.is-flash::after { animation: experiences-flash .7s ease-out .5s both; }
.experiences-big-new {
  position: absolute; z-index: 3; left: .8em; top: .8em; padding: .4em .8em; border-radius: 99em; line-height: 1;
  font-family: var(--mono); font-size: max(7px, 1.05em); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #2b1a00; background: linear-gradient(100deg, #ffe08a, #f6c66b); box-shadow: 0 .3em .8em -.2em rgba(0, 0, 0, .55);
}
.experiences-big-new.is-pop { animation: experiences-pop .5s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
@keyframes experiences-swap { from { opacity: .45; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes experiences-drop { 0% { transform: translateY(-108%) rotate(-3deg) scale(1.05); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes experiences-flash { from { opacity: .5; } to { opacity: 0; } }
@keyframes experiences-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* AI reveal: the AI version wipes across the original */
.experiences-big-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.experiences-big-ba-a { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.experiences-big-wipe { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.experiences-big-wipe::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -.16em; width: .32em;
  background: linear-gradient(180deg, #fff, #a5e6ff); box-shadow: 0 0 1.2em .2em rgba(140, 220, 255, .85);
}
.experiences-big-wipe::after {
  content: ""; position: absolute; top: 50%; left: -1.6em; width: 3.2em; height: 3.2em; margin-top: -1.6em; border-radius: 50%;
  border: .22em solid #fff; box-shadow: 0 0 1em rgba(140, 220, 255, .75);
  background: rgba(6, 9, 18, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.experiences-big-ba-tag {
  position: absolute; z-index: 3; bottom: 1.3em; padding: .45em .85em; border-radius: 99em; line-height: 1; opacity: 0; transition: opacity .3s;
  font-family: var(--mono); font-size: max(7px, 1.05em); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(6, 9, 18, .66);
}
.experiences-big-ba-tag.is-b { right: 1.4em; }
.experiences-big-ba-tag.is-a { left: 1.4em; background: linear-gradient(100deg, #0284c7, #5b4fe0); }
.experiences-big-reveal.is-b .experiences-big-ba-tag.is-b, .experiences-big-reveal.is-a .experiences-big-ba-tag.is-a { opacity: 1; }
/* premiere: title card, then the film */
.experiences-big-premiere-card {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
  background: radial-gradient(70% 80% at 50% 50%, #1b1531, #05040a 80%);
  transition: opacity .8s ease, transform 1.2s var(--ease);
}
.experiences-big-premiere-card span { font-family: var(--mono); font-size: max(7px, 1.1em); letter-spacing: .42em; text-transform: uppercase; color: #e9c77f; }
.experiences-big-premiere-card b { font-size: 3.3em; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.experiences-big-premiere-card i { width: 12em; height: .14em; background: linear-gradient(90deg, transparent, #e9c77f, transparent); }
.experiences-big-premiere.is-rolling .experiences-big-premiere-card { opacity: 0; transform: scale(1.06); }
/* closing highlight show lower-third */
.experiences-big-lower {
  position: absolute; z-index: 3; left: 1.4em; bottom: 1.3em; display: flex; flex-direction: column; gap: .25em;
  padding: .6em 1.1em .7em; border-left: .25em solid #f6c66b; color: #fff; font-size: max(7px, 1.1em);
  background: linear-gradient(90deg, rgba(6, 9, 18, .78), rgba(6, 9, 18, 0));
}
.experiences-big-lower b { font-size: 1.3em; font-weight: 750; line-height: 1.1; }
.experiences-big-lower span { font-family: var(--mono); font-size: .85em; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* ---- copy ---- */
.experiences-big-inner { position: relative; z-index: 3; padding-block: 108px 92px; }
.experiences-big-copy { max-width: var(--copy-w); }
.experiences-big-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.experiences-booking { color: #c9ffe6; border-color: rgba(61, 255, 168, .5); background: rgba(61, 255, 168, .08); }
.experiences-booking .dot { width: 6px; height: 6px; background: #3dffa8; box-shadow: 0 0 10px #3dffa8; }
.experiences-big-title { font-size: clamp(40px, 4.6vw, 68px); line-height: .98; letter-spacing: -.05em; font-weight: 800; margin: 16px 0 16px; text-shadow: 0 4px 40px rgba(0, 0, 0, .6); }
.experiences-big-lede { font-size: clamp(16px, 1.25vw, 18px); color: #d7def2; }
.experiences-big-uses { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 2px; }
.experiences-big-uses li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 6px 10px 8px 8px; font-size: 15px; line-height: 1.45; color: #d7def2; }
.experiences-big-uses li.is-btn { display: block; padding: 0; }
.experiences-big-use-btn {
  position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; margin: 0; padding: 6px 10px 8px 8px;
  border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.experiences-big-use-btn:hover { background: rgba(255, 255, 255, .04); border-color: var(--line); }
.experiences-big-use-btn:focus-visible { outline-offset: 1px; }
.experiences-big-uses li.is-on .experiences-big-use-btn { background: rgba(41, 231, 255, .07); border-color: var(--line-2); }
.experiences-big-num {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--cyan);
  border: 1px solid var(--line-2); background: rgba(41, 231, 255, .06); transition: background .3s, color .3s, border-color .3s;
}
.experiences-big-uses li.is-on .experiences-big-num { background: var(--grad); color: #04101c; border-color: transparent; }
.experiences-big-use b { color: var(--ink); font-weight: 650; }
.experiences-big-use-prog { position: absolute; left: 44px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.experiences-big-use-prog b { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.experiences-big-uses li.is-on .experiences-big-use-prog { opacity: 1; }
.experiences-big-specs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.experiences-big-specs li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}
.experiences-big-specs li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.experiences-big-price, .experiences-party-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; }
.experiences-big-note, .experiences-note { font-size: 13.5px; color: var(--muted); }
.experiences-big-note { color: #ffe3a3; }
.experiences-big-cta { margin-top: 20px; }

/* ---- HUD + pause ---- */
.experiences-big-hud { position: absolute; z-index: 4; top: 26px; right: var(--gutter); display: flex; align-items: center; gap: 10px; }
.experiences-big-hud-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 999px; overflow: hidden;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  background: rgba(5, 7, 16, .6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.experiences-big-hud-k { display: inline-flex; align-items: center; gap: 8px; }
.experiences-big-hud-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 10px #ff3b6b; animation: pulse 1.6s ease-in-out infinite; }
.experiences-big-label { color: var(--cyan); }
.experiences-big-prog { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.experiences-big-prog b { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.experiences-big-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(5, 7, 16, .6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .25s, background .25s;
}
.experiences-big-toggle:hover { border-color: rgba(41, 231, 255, .6); background: rgba(41, 231, 255, .1); }
.experiences-big-toggle .ico { width: 16px; height: 16px; }
html.reduced .experiences-big-toggle, .experiences-big.is-static .experiences-big-toggle, html.reduced .experiences-big-prog { display: none; }

/* ---------- 2 · dance-party reel ---------- */
.experiences-party { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.experiences-party-copy h3, .experiences-lab-head h3, .experiences-close-copy h3 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin: 12px 0 14px; }
.experiences-party-desc { color: var(--ink-2); font-size: 16px; }
.experiences-reel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.experiences-vid {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #05060c;
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  transition: border-color .3s, box-shadow .3s, transform .4s var(--ease);
}
.experiences-vid.is-lead { grid-column: 1 / -1; border-radius: 20px; }
.experiences-vid:hover, .experiences-vid:focus-within { border-color: rgba(255, 63, 208, .6); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9), 0 0 36px -10px rgba(255, 63, 208, .55); }
.experiences-vid video, .experiences-vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.experiences-vid-main { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: inherit; }
.experiences-vid-main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 5, 13, 0) 45%, rgba(3, 5, 13, .85)); transition: opacity .4s; }
.experiences-vid-main:focus-visible { outline-offset: -3px; outline: 2px solid var(--cyan); }
.experiences-vid-play {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(5, 7, 16, .55); border: 1px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 30px -6px rgba(255, 63, 208, .7); transition: opacity .3s, transform .3s var(--ease);
}
.experiences-vid-play .ico { width: 20px; height: 20px; margin-left: 3px; }
.experiences-vid:not(.is-lead) .experiences-vid-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.experiences-vid:not(.is-lead) .experiences-vid-play .ico { width: 15px; height: 15px; margin-left: 2px; }
.experiences-vid.is-playing .experiences-vid-play { opacity: 0; transform: scale(.8); }
.experiences-vid-cap { position: absolute; left: 14px; right: 52px; bottom: 12px; display: flex; flex-direction: column; gap: 1px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.experiences-vid-cap b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.experiences-vid-cap span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.experiences-vid:not(.is-lead) .experiences-vid-cap { left: 10px; right: 40px; bottom: 8px; }
.experiences-vid:not(.is-lead) .experiences-vid-cap b { font-size: 12.5px; }
.experiences-vid:not(.is-lead) .experiences-vid-cap span { display: none; }
.experiences-vid-open {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; color: #fff; padding: 0;
  background: rgba(5, 7, 16, .66); border: 1px solid rgba(255, 255, 255, .3);
  transition: background .25s, border-color .25s, opacity .25s;
}
.experiences-vid-open:hover { background: rgba(255, 63, 208, .25); border-color: rgba(255, 63, 208, .7); }
.experiences-vid-open svg { width: 16px; height: 16px; }
.experiences-vid.is-lead .experiences-vid-open { width: 40px; height: 40px; right: 14px; bottom: 14px; }
/* sound button: plays the full clip with its soundtrack */
.experiences-vid-sound {
  position: absolute; right: 52px; bottom: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; color: #ffe9a8; padding: 0;
  background: rgba(5, 7, 16, .66); border: 1px solid rgba(246, 198, 107, .55);
  transition: background .25s, border-color .25s, opacity .25s, box-shadow .25s;
}
.experiences-vid-sound:hover { background: rgba(246, 198, 107, .2); border-color: rgba(246, 198, 107, .9); }
.experiences-vid-sound svg { width: 17px; height: 17px; }
.experiences-vid-sound.is-on { background: rgba(246, 198, 107, .28); border-color: #f6c66b; box-shadow: 0 0 16px -2px rgba(246, 198, 107, .8); }
.experiences-vid.is-lead .experiences-vid-sound { width: 40px; height: 40px; right: 62px; bottom: 14px; }
.experiences-vid:not(.is-lead) .experiences-vid-cap { right: 92px; }
.experiences-vid-eq { position: absolute; right: 14px; top: 12px; z-index: 2; display: none; align-items: flex-end; gap: 2px; height: 14px; padding: 5px 7px; box-sizing: content-box; border-radius: 8px; background: rgba(5, 7, 16, .6); }
.experiences-vid-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--magenta); animation: experiences-eq .9s ease-in-out infinite alternate; transform-origin: bottom; }
.experiences-vid-eq i:nth-child(2) { animation-delay: -.3s; background: var(--violet); }
.experiences-vid-eq i:nth-child(3) { animation-delay: -.6s; background: var(--cyan); }
.experiences-vid.is-playing .experiences-vid-eq { display: inline-flex; }
@keyframes experiences-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.experiences-reel-hint { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .experiences-vid:not(.is-lead) .experiences-vid-open, .experiences-vid:not(.is-lead) .experiences-vid-sound:not(.is-on) { opacity: 0; }
  .experiences-vid:hover .experiences-vid-open, .experiences-vid:focus-within .experiences-vid-open,
  .experiences-vid:hover .experiences-vid-sound, .experiences-vid:focus-within .experiences-vid-sound { opacity: 1; }
}

/* ---------- 3 · coming-soon cards ---------- */
.experiences-lab { margin-top: clamp(80px, 10vw, 130px); }
.experiences-lab-head { max-width: 720px; }
.experiences-lab-head p:not(.kicker) { color: var(--ink-2); font-size: 16px; }
.experiences-lab-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.experiences-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; }
.experiences-card:hover, .experiences-card:focus-within { transform: translateY(-4px); border-color: rgba(138, 92, 255, .6); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 40px -16px rgba(138, 92, 255, .7); }
.experiences-card-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #05060c; }
.experiences-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.experiences-card:hover .experiences-card-art > img { transform: scale(1.05); }
.experiences-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8, 12, 30, .9)); pointer-events: none; }
.experiences-card-chips { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; gap: 6px; }
.experiences-card-chips .status-chip { background: rgba(5, 7, 16, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.experiences-card-icon { position: absolute; left: 14px; bottom: 10px; z-index: 3; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.experiences-card-icon img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
/* hologram: honoree portrait floating over the neon stage, fan blades spinning */
.experiences-holo-disc { position: absolute; left: 50%; top: 47%; z-index: 1; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; mix-blend-mode: screen; filter: brightness(1.15) drop-shadow(0 0 22px rgba(41, 231, 255, .55)); -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%); mask: radial-gradient(closest-side, #000 82%, transparent 100%); }
.experiences-holo-disc img { width: 100%; height: 100%; object-fit: cover; }
.experiences-holo-disc::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
.experiences-holo-disc::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 22%, rgba(190, 245, 255, .22) 25%, transparent 28% 55%, rgba(190, 245, 255, .18) 58%, transparent 61% 88%, rgba(190, 245, 255, .2) 91%, transparent 94%); animation: experiences-spin 1.1s linear infinite; }
.experiences-holo-base { position: absolute; left: 50%; top: 79%; z-index: 1; width: 30%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(41, 231, 255, .55), transparent); filter: blur(2px); }
@keyframes experiences-spin { to { transform: rotate(360deg); } }
/* songs: equalizer over the disco floor */
.experiences-eq { position: absolute; left: 50%; bottom: 22%; z-index: 1; display: flex; align-items: flex-end; gap: 5px; height: 38%; transform: translateX(-50%); }
.experiences-eq i { width: 7px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--magenta), var(--violet) 50%, var(--cyan)); box-shadow: 0 0 12px rgba(255, 63, 208, .6); transform-origin: bottom; animation: experiences-eq 1.1s ease-in-out infinite alternate; }
.experiences-eq i:nth-child(2n) { animation-duration: .8s; }
.experiences-eq i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.5s; }
.experiences-eq i:nth-child(4n+1) { animation-delay: -.25s; }
.experiences-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.experiences-card-body h4 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.experiences-card-body h4 a { text-decoration: none; }
.experiences-card-body h4 a:hover { color: var(--cyan); }
.experiences-card-tag { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.experiences-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.experiences-card-price { display: flex; flex-direction: column; gap: 2px; }
.experiences-card-note { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.experiences-card-btns { display: flex; gap: 8px; }
.experiences-card-btns .btn-sm { padding: 0 14px; }
.experiences-card-btns .btn { flex: 1 1 auto; }

/* CSS stage behind the hologram + songs cards (no photo of their own): soft spotlight + floor glow */
.experiences-card-stage {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 70% at 50% 0%, rgba(138, 92, 255, .38), transparent 70%),
    radial-gradient(70% 46% at 50% 100%, rgba(41, 231, 255, .24), transparent 70%),
    linear-gradient(180deg, #0b1030, #05060c);
}
.experiences-card-stage::before { /* spotlight cone */
  content: ""; position: absolute; left: 20%; right: 20%; top: 0; bottom: 14%;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(220, 235, 255, .26), rgba(220, 235, 255, .03));
  filter: blur(6px);
}
.experiences-card-stage::after { /* floor */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 200, 255, .32), transparent);
}
.experiences-card-stage.is-studio {
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(255, 63, 208, .26), transparent 70%),
    radial-gradient(50% 70% at 50% 0%, rgba(41, 231, 255, .22), transparent 70%),
    linear-gradient(180deg, #0a0d26, #05060c);
}

/* ---------- 4 · closing CTA ---------- */
.experiences-close { margin-top: clamp(72px, 9vw, 120px); }
.experiences-close-card { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: 28px 48px; padding: clamp(28px, 4vw, 52px); overflow: hidden; }
.experiences-close-copy { position: relative; z-index: 1; }
.experiences-close-copy h3 { margin-top: 10px; }
.experiences-close-copy p:not(.kicker) { color: var(--ink-2); max-width: 600px; }
.experiences-close-cta { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
/* decoration: a small projector throwing a soft light fan up to a glowing picture, tucked into the right of the card */
.experiences-close-fan { /* sits in the gap between the copy and the buttons (wide cards only) */
  position: absolute; right: calc(clamp(28px, 4vw, 52px) + 270px); top: 12%; bottom: 0; width: clamp(150px, 15vw, 210px);
  display: none; flex-direction: column; pointer-events: none; opacity: .6;
}
@media (min-width: 1200px) { .experiences-close-fan { display: flex; } }
.experiences-close-frame {
  order: 1; flex: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px;
  border: 1px solid rgba(41, 231, 255, .4);
  background: linear-gradient(135deg, rgba(41, 231, 255, .14), rgba(138, 92, 255, .1) 55%, rgba(255, 63, 208, .08));
  box-shadow: 0 0 46px -8px rgba(41, 231, 255, .45);
  animation: experiences-glowframe 5s ease-in-out infinite alternate;
}
.experiences-close-light {
  order: 2; flex: 1 1 auto; min-height: 20px; margin-top: -1px;
  clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(190, 240, 255, .5), rgba(41, 231, 255, .06));
  filter: blur(3px);
}
.experiences-close-proj {
  order: 3; flex: none; align-self: center; width: 22%; height: 11px; margin-bottom: 22%; border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #e9edf2, #aab2be); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
}
@keyframes experiences-glowframe { from { opacity: .7; } to { opacity: 1; } }

/* pause every decorative loop while the section is off-screen (and the demo's while it is paused) */
.experiences:not(.is-live) .experiences-holo-disc::after,
.experiences:not(.is-live) .experiences-eq i,
.experiences:not(.is-live) .experiences-close-frame,
.experiences:not(.is-live) .experiences-vid-eq i,
.experiences:not(.is-live) .experiences-big-motes i,
.experiences:not(.is-live) .experiences-big-proj-win::after,
.experiences:not(.is-live) .experiences-big-chip i,
.experiences:not(.is-live) .experiences-big-hud-k::before,
.experiences-big.is-paused .experiences-big-motes i,
.experiences-big.is-paused .experiences-big-chip i { animation-play-state: paused; }

/* ---------- responsive ---------- */
@media (min-width: 1280px) {
  .experiences-big-callout { display: flex; }
}
@media (max-width: 1180px) {
  .experiences-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below 1180px the scene sits on top, the copy follows (two columns on tablets) */
@media (max-width: 1179px) {
  .experiences-big { display: block; min-height: 0; background: transparent; }
  .experiences-big-scene {
    position: relative; inset: auto; height: clamp(440px, 64vw, 680px);
    --copy-r: 0px;
    --floor-y: calc(100cqh - clamp(66px, 14cqh, 104px));
    --u: min((100cqw - var(--gutter) * 2) / 80, (var(--floor-y) - 70px) / 73);
    --rig-cx: 50cqw;
  }
  .experiences-big-haze { background: linear-gradient(180deg, var(--bg) 0, rgba(var(--bs-haze), 0) 84px, rgba(var(--bs-haze), 0) calc(100% - 72px), var(--bg) 100%); }
  .experiences-big-inner { padding-block: 26px 40px; }
  /* tablet: copy left (+ price, buttons), use cases + features right */
  .experiences-big-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .experiences-big-copy-b { display: contents; }
  .experiences-big-copy-a { grid-column: 1; grid-row: 1; }
  .experiences-big-uses { grid-column: 2; grid-row: 1; margin-top: 2px; }
  .experiences-big-price { grid-column: 1; grid-row: 2; }
  .experiences-big-cta { grid-column: 1; grid-row: 3; }
  .experiences-big-specs { grid-column: 2; grid-row: 2 / span 2; margin-top: 18px; }
}
@media (max-width: 960px) {
  .experiences-party { grid-template-columns: 1fr; }
  .experiences-close-card { grid-template-columns: 1fr; }
  .experiences-close-cta { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .experiences-big-scene {
    height: clamp(380px, 114vw, 540px);
    --floor-y: calc(100cqh - 64px);
    --u: min((100cqw - var(--gutter) * 2) / 78, (var(--floor-y) - 72px) / 73);
  }
  .experiences-big-haze { background: linear-gradient(180deg, var(--bg) 0, rgba(var(--bs-haze), 0) 56px, rgba(var(--bs-haze), 0) calc(100% - 44px), var(--bg) 100%); }
  .experiences-big-callout { display: none; }
  .experiences-big-inner { padding-block: 18px 32px; }
  .experiences-big-copy, .experiences-big-copy-b { display: block; }
  .experiences-big-uses { margin-top: 18px; }
  .experiences-big-specs { margin-top: 16px; }
  .experiences-big-title { font-size: clamp(36px, 10.4vw, 46px); margin: 14px 0 14px; }
  .experiences-big-uses li, .experiences-big-use-btn { font-size: 14.5px; }
  .experiences-big-cta .btn, .experiences-party .cta-row .btn { flex: 1 1 100%; }
  .experiences-big-hud { top: 12px; left: var(--gutter); right: var(--gutter); justify-content: space-between; }
  .experiences-big-hud-pill { height: 32px; padding: 0 11px; gap: 8px; font-size: 9.5px; letter-spacing: .13em; }
  .experiences-big-hud-k { font-size: 0; gap: 0; } /* just the red dot on phones */
  .experiences-big-prog { left: 10px; right: 10px; bottom: 4px; }
  .experiences-big-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; }
  .experiences-big-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .experiences-reel-grid { gap: 8px; }
  .experiences-vid:not(.is-lead) .experiences-vid-cap,
  .experiences-vid:not(.is-lead) .experiences-vid-open { display: none; }
  .experiences-vid:not(.is-lead) .experiences-vid-play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .experiences-vid:not(.is-lead) .experiences-vid-play .ico { width: 12px; height: 12px; }
  .experiences-vid-open { width: 30px; height: 30px; right: 6px; bottom: 6px; border-radius: 8px; }
  .experiences-vid-open svg { width: 14px; height: 14px; }
  .experiences-lab-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .experiences-lab-grid::-webkit-scrollbar { display: none; }
  .experiences-card { flex: 0 0 84%; scroll-snap-align: center; }
  .experiences-close-cta .btn { flex: 1 1 100%; }
}

/* browsers without container units (pre-2023): same geometry from the viewport instead of the scene box */
@supports not (width: 1cqw) {
  .experiences-big-scene {
    --copy-r: calc(max(var(--gutter), (100vw - var(--maxw)) / 2) + var(--copy-w));
    --floor-y: calc(min(100vh, 980px) - 150px);
    --u: min((100vw - var(--copy-r) - var(--gutter) - 64px) / 76, (min(100vh, 980px) - 246px) / 73, 11px);
    --rig-cx: calc((var(--copy-r) + 100vw - var(--gutter)) / 2);
  }
  @media (max-width: 1179px) {
    .experiences-big-scene { --floor-y: calc(min(64vw, 680px) - 90px); --u: min((100vw - var(--gutter) * 2) / 80, (min(64vw, 680px) - 160px) / 73); --rig-cx: 50vw; }
  }
  @media (max-width: 760px) {
    .experiences-big-scene { --floor-y: calc(min(114vw, 540px) - 64px); --u: min((100vw - var(--gutter) * 2) / 78, (min(114vw, 540px) - 136px) / 73); }
  }
}

/* ---------- reduced motion ---------- */
html.reduced .experiences-holo-disc::after,
html.reduced .experiences-eq i,
html.reduced .experiences-vid-eq i,
html.reduced .experiences-close-frame,
html.reduced .experiences-big-motes i,
html.reduced .experiences-big-proj-win::after,
html.reduced .experiences-big-chip i,
html.reduced .experiences-big-hud-k::before { animation: none; }
html.reduced .experiences-big-motes { display: none; }
html.reduced .experiences-big-pic, html.reduced .experiences-big-pic::after, html.reduced .experiences-big-screen,
html.reduced .experiences-big-fan, html.reduced .experiences-big-proj, html.reduced .experiences-big-size,
html.reduced .experiences-big-pool, html.reduced .experiences-big-layer, html.reduced .experiences-big-layer.is-on,
html.reduced .experiences-big-premiere-card, html.reduced .experiences-big-ba-tag { transition: none; }
html.reduced .experiences-eq i:nth-child(odd) { transform: scaleY(.6); }
html.reduced .experiences-card, html.reduced .experiences-vid { transition: none; }