/* Half Baked reserve page. Layout and look only: words live in words-and-settings.js */

:root {
  --navy: #1b1833;
  --navy-2: #241f44;
  --ink: #0d0b1c;
  --orange: #ff7a3c;
  --mustard: #e9b23a;
  --teal: #2fb8a6;
  --cream: #f6e7c8;
  --cream-dim: #cbbfa8;

  /* sky, overwritten from words-and-settings.js */
  --sky-a-top: #151338; --sky-a-mid: #4b2a6e; --sky-a-hor: #f2876a;
  --sky-b-top: #0e0c27; --sky-b-mid: #3a2462; --sky-b-hor: #e0607a;
  --sky-shift: 40s;

  /* where the blank sign sits, as % of the hero picture (measured from hero.png) */
  --sign-l: 8.14%; --sign-t: 9.23%; --sign-w: 45.38%; --sign-h: 12.75%;
  --hero-ratio: 1536 / 2752;

  --display: "Bagel Fat One", "Cooper Black", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font: 400 17px/1.5 var(--body);
  overflow-x: hidden;
}
a { color: var(--mustard); }
img { max-width: 100%; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================= SCENE (phone layout first) ================= */
.scene { position: relative; width: 100%; overflow: hidden; isolation: isolate; }

.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sky-layer { position: absolute; inset: 0; }
.sky-a {
  background: linear-gradient(to bottom,
    var(--sky-a-top) 0%, var(--sky-a-mid) 20%, var(--sky-a-hor) 38%, var(--navy) 62%);
}
.sky-b {
  background: linear-gradient(to bottom,
    var(--sky-b-top) 0%, var(--sky-b-mid) 22%, var(--sky-b-hor) 40%, var(--navy) 62%);
  opacity: 0;
  animation: sky-shift var(--sky-shift) ease-in-out infinite alternate;
}
@keyframes sky-shift { to { opacity: 1; } }

.stars { position: absolute; inset: 0 0 60% 0; }
.star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff8e6; box-shadow: 0 0 4px 1px rgba(255, 248, 230, .6);
  opacity: .25;
  animation: twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate;
}
.star.big { width: 3px; height: 3px; }
@keyframes twinkle { to { opacity: 1; } }

.clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute; left: 0; width: 40vw; max-width: 560px; aspect-ratio: 3 / 1;
  /* rounded puffs with firmer edges, so the cloud reads clearly against the sky */
  background:
    radial-gradient(circle at 24% 66%, rgba(255, 200, 210, .85) 0 17%, rgba(255, 200, 210, 0) 24%),
    radial-gradient(circle at 42% 48%, rgba(255, 216, 222, .9) 0 22%, rgba(255, 216, 222, 0) 29%),
    radial-gradient(circle at 60% 42%, rgba(255, 224, 228, .92) 0 19%, rgba(255, 224, 228, 0) 26%),
    radial-gradient(circle at 76% 62%, rgba(250, 200, 216, .85) 0 15%, rgba(250, 200, 216, 0) 22%),
    radial-gradient(ellipse 34% 26% at 50% 70%, rgba(246, 198, 214, .88) 0 70%, rgba(246, 198, 214, 0) 100%);
  filter: blur(1.2px);
  animation: drift var(--dur, 80s) linear var(--d, 0s) infinite;
  will-change: transform;
}
/* thin streaks low in the sky, passing behind the mountains */
.cloud.thin {
  aspect-ratio: 9 / 1;
  background:
    linear-gradient(90deg, rgba(255, 214, 224, 0), rgba(255, 214, 224, .8) 18%, rgba(255, 220, 228, .85) 60%, rgba(255, 214, 224, 0)) 0 40% / 100% 34% no-repeat,
    linear-gradient(90deg, rgba(240, 190, 210, 0) 20%, rgba(240, 190, 210, .6) 45%, rgba(240, 190, 210, 0) 90%) 0 78% / 100% 22% no-repeat;
  border-radius: 999px;
}
@keyframes drift {
  from { transform: translateX(-60vw); }
  to   { transform: translateX(110vw); }
}

.ground { display: none; }

.hero-frame {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
}
.hero-frame picture, .hero-img { display: block; width: 100%; height: 100%; }

.sign {
  position: absolute;
  left: var(--sign-l); top: var(--sign-t);
  width: var(--sign-w); height: var(--sign-h);
  display: grid; place-items: center;
  padding: 4% 5%;
}
.sign-spill {
  position: absolute; inset: 0; border-radius: 6%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 140, 90, .42), rgba(62, 230, 210, .18) 55%, transparent 75%);
  opacity: 0;
}
.neon { position: relative; width: 100%; height: 100%; overflow: visible; }
.neon text { font-family: var(--display); }
.neon .outline { stroke: var(--ink); stroke-linejoin: round; paint-order: stroke; fill: #191632; }
.neon .tube-off { fill: none; stroke-linejoin: round; opacity: .28; }
.neon .lit { opacity: 0; }
.neon .lit .glow { fill: none; stroke-linejoin: round; }
.neon .lit .core { fill: none; stroke: #fff6e8; stroke-linejoin: round; opacity: .85; }
.neon .lit .face { stroke: none; opacity: .2; }
.neon .halo { opacity: .75; }
.neon .halo-line { fill: none; stroke-linejoin: round; }

/* once on: brightness wanders at random (set by main.js as --b), with an occasional flicker (blip) */
.neon .word { --b: 1; }
.sign { --spill: 1; }

/* flicker on */
.sign.on .lit { opacity: var(--b, 1); }
.sign.on .sign-spill { opacity: var(--spill, 1); }
.sign.booting .word-0 .lit { animation: flick-on 1.5s steps(1, end) .35s both; }
.sign.booting .word-1 .lit { animation: flick-on 1.7s steps(1, end) .75s both; }
.sign.booting .sign-spill { animation: spill-on 2.4s ease-out .4s both; }
@keyframes flick-on {
  0% { opacity: 0 } 8% { opacity: .9 } 12% { opacity: 0 } 22% { opacity: 1 } 26% { opacity: .1 }
  40% { opacity: 0 } 48% { opacity: 1 } 52% { opacity: .3 } 58% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes spill-on { 0% { opacity: 0 } 60% { opacity: .5 } 100% { opacity: 1 } }

/* the occasional small flicker once steady */
.sign.on .word.blip .lit { animation: blip .8s steps(1, end); }
@keyframes blip {
  0% { opacity: 1 } 8% { opacity: .05 } 16% { opacity: 1 } 28% { opacity: .1 } 34% { opacity: .9 }
  48% { opacity: .05 } 60% { opacity: 1 } 100% { opacity: 1 }
}

.snow {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* paused when off screen */
.paused *, .paused { animation-play-state: paused !important; }

/* ================= CONTENT ================= */
.content {
  position: relative; z-index: 3;
  margin-top: -16vw;
  padding: 0 16px 24px;
}

.intro-block { position: relative; text-align: center; padding: 8px 0 20px; }
.sunburst {
  position: absolute; left: 50%; top: -30px; width: 150%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(233, 178, 58, .10) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 58%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 58%);
  z-index: -1; pointer-events: none;
}

.headline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 16vw, 5.4rem); line-height: .95;
  margin: 0 0 14px;
  color: var(--cream);
  text-shadow: .045em .045em 0 var(--orange), .09em .09em 0 var(--teal), .13em .13em 0 var(--ink);
  transform: rotate(-3deg);
  letter-spacing: .01em;
}
.slide-in { opacity: 0; transform: translateX(-40px) rotate(-6deg); }
.slide-in.in {
  opacity: 1; transform: translateX(0) rotate(-3deg);
  transition: opacity .6s ease-out, transform .8s cubic-bezier(.2, 1.4, .4, 1);
}

.intro {
  max-width: 24em; margin: 0 auto;
  font-size: 1.12rem; line-height: 1.45; color: var(--cream);
  font-weight: 600;
}

.photo-slot { margin: 22px 0 6px; }
.photo-slot img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 18px; border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--mustard);
}
.photo-slot figcaption { margin-top: 10px; font-size: .8rem; color: var(--cream-dim); text-align: right; }

.stripes { margin: 18px -16px 22px; height: 46px; }
.stripes svg { width: 100%; height: 100%; display: block; }
.stripes path { fill: none; stroke-width: 7; }
.stripes .st1 { stroke: var(--orange); }
.stripes .st2 { stroke: var(--mustard); }
.stripes .st3 { stroke: var(--teal); }
.stripes .st4 { stroke: var(--cream); }

section.product, section.reserve {
  background-size: cover; background-position: center;
  border-radius: 24px;
}
section.reserve { margin-top: 18px; }

.card {
  position: relative;
  background: var(--navy-2);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 6px 0 var(--ink);
}

.preview {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--ink);
  background:
    repeating-conic-gradient(from 0deg at 50% 62%, rgba(233, 178, 58, .22) 0 9deg, rgba(255, 122, 60, .14) 9deg 18deg),
    linear-gradient(#3a2462, #1b1833);
}
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-empty { position: absolute; inset: 0; display: grid; place-items: center; }
.preview-badge {
  display: block;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  /* 70s running stripes, darker than the cream yeti so he stands out while the beanie loads */
  background: repeating-linear-gradient(-28deg,
    #e2571f 0 12%, #e9a520 12% 24%, #2a9d8f 24% 36%, #c2185b 36% 48%, #5b2a86 48% 60%) 0 0 / 100% 200%;
  border: 4px solid var(--ink); box-shadow: 0 0 0 8px var(--orange), 0 0 0 12px var(--ink);
  animation: stripes-run 9s linear infinite;
}
@keyframes stripes-run { to { background-position: 0 -100%; } }
/* spinning 3D beanie (model-viewer), sits under the label */
.preview model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; --poster-color: transparent;
  opacity: 0; transition: opacity .6s ease;
  touch-action: pan-y;
}
.preview model-viewer.ready { opacity: 1; }
.preview-loader {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  transition: opacity .5s ease;
}
.preview-loader img { width: 90px; height: auto; }
.preview-loader.done { opacity: 0; pointer-events: none; }
.preview-label {
  z-index: 2;
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(13, 11, 28, .82); color: var(--cream);
  font-size: .8rem; text-align: center; padding: 6px 10px; border-radius: 999px;
}
.price {
  font-family: var(--display); font-size: 1.6rem; line-height: 1.15;
  margin: 16px 0 4px; color: var(--mustard);
}
.pickup { margin: 0; color: var(--cream-dim); font-size: .95rem; }

/* ---- form ---- */
#reserveForm { display: grid; gap: 12px; }
#email {
  width: 100%; height: 58px; padding: 0 18px;
  border: 3px solid var(--ink); border-radius: 16px;
  background: var(--cream); color: var(--navy);
  font: 600 1.1rem var(--body);   /* 16px+ stops iPhone zooming in */
}
#email:focus { outline: 3px solid var(--teal); outline-offset: 2px; }
#email[aria-invalid="true"] { outline: 3px solid var(--orange); outline-offset: 2px; }

button[type="submit"] {
  height: 62px; border: 3px solid var(--ink); border-radius: 16px;
  background: var(--orange); color: var(--ink);
  font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em;
  box-shadow: 0 6px 0 var(--ink); cursor: pointer;
  transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
button[type="submit"]:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
button[type="submit"]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
button[disabled] { opacity: .6; }

.turnstile:empty { display: none; }
.turnstile { display: flex; justify-content: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error { margin: 0; color: var(--orange); font-weight: 700; font-size: .95rem; }
.consent { margin: 4px 0 0; font-size: .78rem; line-height: 1.45; color: var(--cream-dim); }
.consent a { display: inline-block; margin-top: 2px; }

.loader { display: grid; justify-items: center; gap: 6px; padding: 16px 0; color: var(--cream-dim); }
.loader p { margin: 0; }
.yeti-walk { width: 96px; height: auto; }

.success { text-align: center; padding: 10px 0; outline: none; }
.success-title {
  font-family: var(--display); font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.05;
  margin: 0 0 12px; color: var(--cream);
  text-shadow: .05em .05em 0 var(--orange), .1em .1em 0 var(--ink);
}
.success-title .pos { color: var(--mustard); display: inline-block; min-width: 1ch; }
.success-body { margin: 0; color: var(--cream); }

.footer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 30px 0 calc(16px + env(safe-area-inset-bottom));
  color: var(--cream-dim); font-size: .9rem; text-align: left;
}
.footer p { margin: 0; }
.footer-yeti { width: 54px; height: auto; flex: none; }

.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: url("../images/grain.png");
  opacity: .55;
}


/* ================= OLD TV IN THE STREET ================= */
.sky-static {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: 0; pointer-events: none;
}
.sky-static.on { animation: sky-static var(--zap-s, 1s) ease-in-out; }
/* solid grey like an old TV between channels (mid greys, never white). Two peaks only: never more than 3 flashes a second */
@keyframes sky-static { 0% { opacity: 0 } 16% { opacity: .95 } 42% { opacity: .82 } 62% { opacity: .95 } 100% { opacity: 0 } }

.tv {
  position: absolute; z-index: 1;
  left: calc(var(--tv-across, 68) * 1%);
  bottom: calc((100 - var(--tv-down, 100)) * 1%);
  width: calc(var(--tv-size, 70) * 1%);
  aspect-ratio: 1960 / 1783;
  transform: translateX(-50%);
  container-type: inline-size;
  pointer-events: none;
}
.tv-shadow {
  position: absolute; left: 2%; right: 2%; bottom: -1.5%; height: 10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(6, 5, 18, .8) 0%, rgba(6, 5, 18, .45) 45%, transparent 72%);
}
.tv-screen {
  position: absolute;
  left: var(--scr-l); top: var(--scr-t); width: var(--scr-w); height: var(--scr-h);
  background: radial-gradient(ellipse at 50% 45%, #1c1e1c 0%, #0e0f0e 70%, #060706 100%);   /* switched off: dead glass */
  overflow: hidden;
  container-type: inline-size;
}
/* the picture tube: off until main.js turns it on, then it opens like an old TV (dot, line, full picture) */
.tv-tube {
  position: absolute; inset: -10%; transform: scale(0, 0);
  rotate: -6.4deg;   /* measured: the top edge of the screen hole slopes 6.4 degrees. Static, scan lines, words and the switch-on line all share it */
  background: radial-gradient(ellipse at 50% 45%, #2c3519 0%, #1a2110 55%, #0a0e06 100%);
}
.tv.on .tv-tube { transform: none; animation: crt-on .9s ease-out; }
@keyframes crt-on {
  0%   { transform: scale(0, 0); filter: brightness(4); }
  12%  { transform: scale(.04, .012); filter: brightness(4); }
  45%  { transform: scale(1, .012); filter: brightness(3); }
  75%  { transform: scale(1, 1); filter: brightness(1.8); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
.tv-static {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; mix-blend-mode: screen;
  opacity: calc(.22 * var(--static, 1));
}
.tv-scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, .6) 100%);
}
.tv-words {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 0 9%;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 19cqw; line-height: .95; letter-spacing: .02em;
  color: #ffd84a;
  text-shadow: 0 0 .18em rgba(255, 205, 70, .9), 0 0 .55em rgba(255, 165, 40, .5);
  transform: skewX(-3.8deg);   /* the screen's sides lean less than its top edge: this stands the letters up to match */
  animation: tube 3.7s infinite;
}
.tv-words .big { font-size: 1.25em; }
.tv-words .cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes tube { 0%, 100% { opacity: 1 } 48% { opacity: 1 } 50% { opacity: .86 } 53% { opacity: .96 } 80% { opacity: .93 } }
.tv-zapping .tv-words { animation: jitter .14s steps(2) infinite; }
@keyframes jitter { 0% { transform: skewX(-3.8deg) translate(1.5%, -1%); } 100% { transform: skewX(-3.8deg) translate(-1.5%, 1.2%); } }

.tv-pic, .tv-pic img { position: relative; display: block; width: 100%; height: 100%; }
.tv-glass {
  position: absolute; inset: 0;
  -webkit-mask: url("../images/tv-screen-mask.png") center / 100% 100% no-repeat;
          mask: url("../images/tv-screen-mask.png") center / 100% 100% no-repeat;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, .05) 40%, transparent 48%),
    radial-gradient(ellipse 30% 18% at 44% 40%, rgba(255, 255, 255, .1), transparent 70%),
    radial-gradient(ellipse 20% 10% at 64% 70%, rgba(255, 255, 255, .05), transparent 70%);
}
.tv-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc, .sparks { opacity: 0; }
.tv.intro .arc { opacity: 1; }
.ball-sparks path { fill: none; stroke: #e9fffb; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.intro-fx path { fill: none; stroke: #e4fffb; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
/* NEXT DROP IN: starts hidden; main.js reveals it from the middle outwards with the electricity */
.tv-label.label-hidden { clip-path: polygon(50% -60%, 50% -60%, 50% 50%, 50% 160%, 50% 160%, 50% 50%); }
.tv-zapping .arc, .tv-zapping .sparks { opacity: 1; }
.arc path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.arc-glow { stroke: #3ee6d2; stroke-width: 40; opacity: .8; }
.arc-core { stroke: #f2fffd; stroke-width: 13; }
.sparks path { fill: none; stroke: #effffc; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }

.tv-label {
  position: absolute; left: 50%; bottom: 104%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--display); font-size: 12.5cqw; line-height: 1;
  color: var(--tv-label, #c8ff3c);
  text-shadow:
    0 0 .12em var(--tv-glow, #6dff2a),
    0 0 .4em var(--tv-glow, #6dff2a),
    0 0 1em rgba(90, 255, 40, .55),
    .06em .07em 0 #17400c;
}
.tv-label .lt { display: inline-block; animation: bob-letter 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.27s); }
@keyframes bob-letter { from { transform: translateY(0); } to { transform: translateY(-10%); } }

/* ================= DESKTOP: fill the whole screen ================= */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --hero-w: calc(100vh * var(--hero-ratio)); }

  .scene { position: fixed; inset: 0; height: 100vh; }
  .hero-frame {
    position: absolute; left: 0; top: 0;
    height: 100vh; width: var(--hero-w);
  }
  .hero-frame > picture {
    -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
            mask-image: linear-gradient(to right, #000 72%, transparent 100%);
  }
  .ground {
    display: block; position: absolute; z-index: 0;
    left: -20vw; right: -20vw; top: 70vh; height: 70vh;
    border-radius: 50% 50% 0 0 / 22% 22% 0 0;
    background: linear-gradient(to bottom, #a993c9 0%, #6c5a98 12%, #3a2f63 30%, var(--navy) 55%);
    filter: blur(8px);
  }
  .sky-a { background: linear-gradient(to bottom, var(--sky-a-top) 0%, var(--sky-a-mid) 24%, var(--sky-a-hor) 52%, #7a4f86 70%); }
  .sky-b { background: linear-gradient(to bottom, var(--sky-b-top) 0%, var(--sky-b-mid) 26%, var(--sky-b-hor) 54%, #6b4580 70%); }
  .stars { inset: 0 0 45% 0; }

  .content {
    margin: 0 max(4vw, calc((100vw - var(--hero-w) - 540px) / 2)) 0 auto;
    width: min(540px, calc(100vw - var(--hero-w) - 6vw));
    padding: 12vh 0 32px;
  }
  .headline { font-size: clamp(4rem, 7vw, 6rem); }
  .intro-block { padding-bottom: 28px; }
  .stripes { margin: 18px 0 22px; }
  .card { background: rgba(36, 31, 68, .9); }
  .footer { color: var(--cream); text-shadow: 0 1px 3px var(--ink); }
}

/* wide desktop picture (only if one is set in words-and-settings.js) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body.has-wide { --hero-w: 45vw; }
  /* keeps the picture's own shape so the sign position stays true; sky fills any gap above */
  body.has-wide .hero-frame {
    top: auto; bottom: 0; height: auto;
    width: max(100vw, calc(100vh * var(--hero-ratio)));
  }
  body.has-wide .hero-frame > picture { -webkit-mask-image: none; mask-image: none; }
  body.has-wide .ground { display: none; }
}

/* ================= REDUCED MOTION: everything still ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide-in { opacity: 1; transform: rotate(-3deg); }
  .cloud { transform: translateX(18vw); }
  .cloud:nth-child(even) { transform: translateX(58vw); }
  .star { opacity: .7; }
  .arc, .sparks, .sky-static { display: none; }
  .tv-tube { transform: none; }
}