/* netflix_v18_1.css (2026-10-09): splash v4's CSS plus the v18.1 block at the end. Made by make_splash_v18_1.py. */
/* netflix_v4.css (2026-10-01). Styles for netflix_v4.js, the splash with an original double bass hit.
   Everything is prefixed .nf4 so it can sit next to netflix_v3.css and hub13-splash_v1.css without touching them.
   The look is the hub v13 look (dark film grain, fog, a light shaft, the v3 bubble emerging out of the dark),
   plus the v4 effects: a shockwave ring and a bloom flash on each hit, light ribbons behind the bubble,
   a micro camera shake on the big hit, a glint on the </> for the blink, and the sound picker in the bottom-right corner.
   Load atlas-bubble_v3.css too (netflix_v4.js adds it if the page has not). */

html.nf4-on, html.nf4-on body { overflow: hidden !important; }

.nf4 {
  --bs: clamp(150px, 30vmin, 270px);
  --nf4-blue: #2F8CFF;
  --nf4-blue-hi: #A8D8FF;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #020304;
  color: #E9EEF4;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
}
.nf4[hidden] { display: none !important; }
.nf4.is-out { opacity: 0; pointer-events: none; }
.nf4.is-run { cursor: default; }

/* ---------------------------------------------------------------- sky, fog, shaft */
.nf4-sky, .nf4-grain, .nf4-vig, .nf4-flash { position: absolute; pointer-events: none; }
.nf4-sky {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, #0B1322 0%, #05070C 56%, #020304 100%);
}
.nf4-fog { position: absolute; border-radius: 50%; filter: blur(46px); }
.nf4-fog.f1 { left: -24%; top: 34%; width: 92%; height: 62%; background: radial-gradient(closest-side, rgba(64, 98, 150, .36), transparent); animation: nf4-fog1 23s ease-in-out infinite alternate; }
.nf4-fog.f2 { right: -28%; top: 8%; width: 88%; height: 72%; background: radial-gradient(closest-side, rgba(34, 64, 118, .34), transparent); animation: nf4-fog2 29s ease-in-out infinite alternate; }
@keyframes nf4-fog1 { to { transform: translate3d(18%, -6%, 0) scale(1.12); } }
@keyframes nf4-fog2 { to { transform: translate3d(-16%, 8%, 0) scale(1.08); } }
.nf4-shaft {
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(78vw, 980px);
  height: 86%;
  transform: translateX(-50%);
  opacity: 0;
  filter: blur(12px);
  background: conic-gradient(from 180deg at 50% 0%, rgba(178, 212, 255, .2) 0deg, rgba(110, 160, 240, .09) 9deg, transparent 21deg, transparent 339deg, rgba(110, 160, 240, .09) 351deg, rgba(178, 212, 255, .2) 360deg);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
  mask: linear-gradient(180deg, #000 0%, #000 46%, transparent 96%);
}

/* ---------------------------------------------------------------- light ribbons behind the bubble */
.nf4-ribbons { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: grid; place-items: center; }
.nf4-ribbons i {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--bs) * .1 + var(--y, 0) * var(--bs));
  width: calc(var(--w, 1) * 150vmax);
  height: var(--h, 2px);
  margin: calc(var(--h, 2px) * -.5) 0 0 calc(var(--w, 1) * -75vmax);
  opacity: 0;
  transform: scaleX(.02) rotate(var(--r, 0deg));
  background: linear-gradient(90deg, transparent, rgba(110, 170, 255, .22) 18%, var(--c, #F4F9FF) 50%, rgba(110, 170, 255, .22) 82%, transparent);
  box-shadow: 0 0 12px 2px rgba(90, 165, 255, .85), 0 0 38px 7px rgba(24, 119, 242, .42);
  mix-blend-mode: screen;
}
.nf4-ribbons i.soft { filter: blur(3px); }

/* ---------------------------------------------------------------- stage: rig, bubble, rings, bloom */
.nf4-cam { position: relative; z-index: 2; display: grid; place-items: center; will-change: transform; }
.nf4-stage { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-items: center; gap: clamp(26px, 5vh, 48px); }
.nf4-rig { grid-row: 1; display: flex; align-items: center; gap: calc(var(--bs) * .12); }
.nf4-chevs { --dir: 1; display: flex; gap: calc(var(--bs) * .05); }
.nf4-chevs.r { --dir: -1; flex-direction: row-reverse; }
.nf4-chevs i {
  display: block;
  width: calc(var(--bs) * .13);
  height: calc(var(--bs) * .36);
  opacity: .07;
  filter: brightness(1) drop-shadow(0 0 5px rgba(47, 140, 255, .95)) drop-shadow(0 0 16px rgba(24, 119, 242, .6));
}
.nf4-chevs b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #EAF4FF 0%, #7DB8FF 34%, #2F8CFF 70%, #1462D6 100%);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.nf4-chevs.r b { transform: scaleX(-1); }
.nf4-core { position: relative; width: var(--bs); height: var(--bs); display: grid; place-items: center; }
.nf4-core .abub3 {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: .2;
  transform: scale(.9);
  filter: brightness(.26) saturate(.3) blur(1.5px);
  will-change: transform, filter, opacity;
}
.nf4.is-lit .nf4-core .abub3 { opacity: 1; transform: none; filter: none; }
.nf4-bloom, .nf4-pop, .nf4-ring, .nf4-spark { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.nf4-bloom {
  width: calc(var(--bs) * 2.7);
  height: calc(var(--bs) * 2.7);
  margin: calc(var(--bs) * -1.35) 0 0 calc(var(--bs) * -1.35);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .12;
  transform: scale(.6);
  background: radial-gradient(circle closest-side, rgba(170, 212, 255, .7) 0%, rgba(60, 150, 255, .5) 30%, rgba(30, 110, 240, .26) 46%, rgba(20, 80, 200, .09) 64%, transparent 80%);
}
.nf4:not(.is-run):not(.is-lit) .nf4-bloom { animation: nf4-idle 3.4s ease-in-out infinite; }
@keyframes nf4-idle { 50% { opacity: .22; transform: scale(.66); } }
.nf4-pop {
  width: calc(var(--bs) * 6);
  height: calc(var(--bs) * 6);
  margin: calc(var(--bs) * -3) 0 0 calc(var(--bs) * -3);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side, rgba(225, 240, 255, .55) 0%, rgba(110, 175, 255, .28) 18%, rgba(40, 120, 255, .1) 40%, transparent 70%);
}
.nf4-ring {
  width: var(--bs);
  height: var(--bs);
  margin: calc(var(--bs) * -.5) 0 0 calc(var(--bs) * -.5);
  border-radius: 50%;
  opacity: 0;
  border: max(2px, .7vmin) solid #F2F8FF;
  box-shadow: 0 0 18px 3px #9ACBFF, 0 0 56px 12px rgba(47, 140, 255, .8), inset 0 0 22px 4px rgba(150, 200, 255, .8);
  mix-blend-mode: screen;
}
.nf4-spark { width: calc(var(--bs) * .9); height: calc(var(--bs) * .9); margin: calc(var(--bs) * -.45) 0 0 calc(var(--bs) * -.45); opacity: 0; mix-blend-mode: screen; }
.nf4-spark::before, .nf4-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF 0%, rgba(190, 225, 255, .9) 28%, rgba(60, 150, 255, .0) 100%);
}
.nf4-spark::before { width: 100%; height: 5%; margin: -2.5% 0 0 -50%; }
.nf4-spark::after { width: 5%; height: 100%; margin: -50% 0 0 -2.5%; }
.nf4-flash {
  inset: 0;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 52% 46% at 50% 46%, rgba(205, 228, 255, .75) 0%, rgba(90, 160, 255, .34) 34%, rgba(20, 90, 220, .1) 62%, transparent 82%);
}

/* ---------------------------------------------------------------- wordmark, gate */
.nf4-word, .nf4-gate { grid-row: 2; grid-column: 1; }
.nf4-gate { display: grid; justify-items: center; gap: 12px; transition: opacity .25s; }
.nf4-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family:inherit;font-weight:700;font-size:15px;line-height:1;
  background: linear-gradient(180deg, #2A88FF, #1877F2 55%, #0F5BD0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(10, 70, 170, .5), 0 0 26px rgba(24, 119, 242, .6);
  animation: nf4-cta 2.4s ease-in-out infinite;
}
.nf4-enter svg { width: 17px; height: 17px; }
.nf4-enter:focus-visible, .nf4-skip:focus-visible, .nf4-snd:focus-visible, .nf4-mute:focus-visible { outline: 2px solid #A8D8FF; outline-offset: 3px; }
@keyframes nf4-cta { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(10, 70, 170, .5), 0 0 40px 4px rgba(24, 119, 242, .8); } }
.nf4-hint { margin: 0; font-size: 12px; color: #6E7783; }
.nf4.is-run .nf4-gate { opacity: 0; pointer-events: none; }
.nf4-word {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.6vh, 16px);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.nf4-word .w1 {
  display: block;
  font-size: clamp(32px, 4.8vw, 66px);
  font-weight: 880;
  letter-spacing: .32em;
  padding-left: .32em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, #E9EEF4 0%, #E9EEF4 42%, #FFFFFF 48%, #BFE0FF 50%, #FFFFFF 52%, #E9EEF4 58%, #E9EEF4 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(110, 170, 255, .32));
}
.nf4-word .w2 { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); color: #8E98A4; }
.nf4-word .w2 > span { font-size: clamp(11px, 1vw, 14px); font-weight: 750; letter-spacing: .4em; padding-left: .4em; }
.nf4-word .w2 b { font-size: clamp(18px, 2.1vw, 29px); font-weight: 880; letter-spacing: .24em; padding-left: .24em; color: #EEF2F6; }
.nf4-word .w2 em { font-style: normal; color: #79BBFF; text-shadow: 0 0 14px rgba(47, 140, 255, .95), 0 0 30px rgba(24, 119, 242, .6); }
.nf4-word .w2 i { width: clamp(22px, 4vw, 60px); height: 1px; background: linear-gradient(90deg, transparent, #4F5966); }
.nf4-word .w2 i:last-child { background: linear-gradient(90deg, #4F5966, transparent); }

/* ---------------------------------------------------------------- grain, vignette */
.nf4-grain {
  inset: -60%;
  z-index: 4;
  opacity: .085;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: nf4-grain .8s steps(5) infinite;
}
@keyframes nf4-grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-5%, 3%, 0); }
  40% { transform: translate3d(4%, -6%, 0); }
  60% { transform: translate3d(-7%, -2%, 0); }
  80% { transform: translate3d(6%, 5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.nf4-vig { inset: 0; z-index: 5; background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 42%, rgba(0, 0, 0, .5) 74%, rgba(0, 0, 0, .92) 100%); }

/* ---------------------------------------------------------------- skip, sound picker, mute */
.nf4-skip {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 8;
  font-family:inherit;font-weight:500;font-size:12.5px;line-height:1;
  color: #8D96A3;
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nf4-skip:hover { color: #D6DEE8; }
.nf4-picker {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 32px);
  cursor: default;
}
.nf4-picker-h {
  align-self: flex-end;
  margin: 0 4px 1px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7C8794;
}
.nf4-snd, .nf4-mute {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  cursor: pointer;
  color: #D5DDE7;
  font-family:inherit;font-weight:650;font-size:12.5px;line-height:1;
  letter-spacing: .01em;
  text-align: left;
  white-space: nowrap;
  border: 1px solid rgba(190, 215, 255, .26);
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .045) 55%, rgba(120, 170, 255, .08) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 8px 20px -8px rgba(0, 0, 0, .7);
  transition: border-color .2s, box-shadow .2s, color .2s, transform .12s;
}
.nf4-snd:hover, .nf4-mute:hover { color: #fff; border-color: rgba(190, 225, 255, .55); }
.nf4-snd:active, .nf4-mute:active { transform: translateY(1px); }
.nf4-snd .n {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 850;
  color: #9FB4CC;
  background: rgba(7, 11, 18, .55);
  box-shadow: inset 0 0 0 1px rgba(170, 205, 255, .3);
}
.nf4-snd[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(120, 190, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(47, 140, 255, .45), 0 0 22px -2px rgba(47, 140, 255, .75), 0 8px 20px -8px rgba(0, 0, 0, .7);
}
.nf4-snd[aria-pressed="true"] .n { color: #06101F; background: linear-gradient(180deg, #D6EAFF, #7DB8FF); box-shadow: 0 0 10px rgba(120, 190, 255, .9); }
.nf4-mute { align-self: flex-end; width: 34px; padding: 0; justify-content: center; }
.nf4-mute svg { width: 16px; height: 16px; }
.nf4-mute .off { display: none; }
.nf4-mute[aria-pressed="true"] .on { display: none; }
.nf4-mute[aria-pressed="true"] .off { display: block; }
.nf4-mute[aria-pressed="true"] { color: #FF9C86; }
.nf4-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 560px) {
  .nf4 { --bs: clamp(132px, 40vw, 170px); }
  .nf4-chevs i:first-child { display: none; }
  .nf4-word .w1 { font-size: clamp(28px, 8.6vw, 40px); }
  .nf4-word .w2 i { width: 18px; }
  .nf4-snd { height: 32px; font-size: 12px; padding: 0 12px 0 8px; }
  .nf4-skip { bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) {
  .nf4-picker-h { display: none; }
  .nf4-picker { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 70vw; }
  .nf4-snd { height: 28px; }
}

/* ---------------------------------------------------------------- reduced motion: no shake, no rings, no ribbons, no moving chevrons */
@media (prefers-reduced-motion: reduce) {
  .nf4, .nf4 * { animation: none !important; }
  .nf4-core .abub3 { opacity: 1; transform: none; filter: none; }
  .nf4-chevs i { opacity: .6; }
  .nf4-bloom { opacity: .5; transform: none; }
  .nf4-shaft { opacity: .5; }
  .nf4-ring, .nf4-ribbons, .nf4-spark, .nf4-flash { display: none !important; }
  .nf4-word .w1 { background-position: 0 0; }
}
.nf4.is-reduced .nf4-ring, .nf4.is-reduced .nf4-ribbons, .nf4.is-reduced .nf4-spark, .nf4.is-reduced .nf4-flash { display: none !important; }
.nf4.is-reduced .nf4-fog { animation: none; }


/* ---------------------------------------------------------------- v18.1: no tap gate, no sound picker; one faint mute button */
.nf4-gate, .nf4-picker-h, .nf4-snd, .nf4-enter, .nf4-hint { display: none !important; }
.nf4-picker.nf4-solo { opacity: .5; transition: opacity .2s; }
.nf4-picker.nf4-solo:hover, .nf4-picker.nf4-solo:focus-within { opacity: 1; }
.nf4-picker.nf4-solo .nf4-mute { width: 34px; padding: 0; justify-content: center; }