/* Yume Party Mode. Deliberately ridiculous, but all colour/motion cycles are
   kept slow enough to avoid rapid flashing. Reduced-motion users get a static
   party skin instead of flight, spinning or falling effects. */

html.yume-party-mode-active,
body.yume-party-mode-active{
  overflow-x:hidden!important;
}
body.yume-party-mode-active{
  background:#ffdf43!important;
}

/* Make the actual site dance without breaking its layout or click targets. */
body.yume-party-mode-active main{
  position:relative;
  z-index:1;
  animation:yumePartyPageDance 4.6s ease-in-out infinite alternate;
  filter:saturate(1.24);
}
body.yume-party-mode-active header,
body.yume-party-mode-active .site-header,
body.yume-party-mode-active nav:not(.phone-nav){
  animation:yumePartyHeaderWobble 3.8s ease-in-out infinite alternate;
}
body.yume-party-mode-active footer{
  animation:yumePartyFooterDance 4.2s ease-in-out infinite alternate;
}
body.yume-party-mode-active h1,
body.yume-party-mode-active h2,
body.yume-party-mode-active h3{
  text-shadow:3px 3px 0 rgba(255,223,67,.58),-2px -2px 0 rgba(64,194,255,.22)!important;
}
body.yume-party-mode-active main button:not(.phone-companion button),
body.yume-party-mode-active main a:not(.phone-companion a){
  animation:yumePartyButtonBob 2.9s ease-in-out infinite alternate;
}
body.yume-party-mode-active main img{
  animation:yumePartyImageHue 7s linear infinite;
}

/* Full-site decorative takeover. Everything here ignores pointer input. */
.yume-party-site-layer{
  position:fixed;
  inset:0;
  z-index:2147470000;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  font-family:Arial,Helvetica,sans-serif;
}
.yume-party-rainbow-wash{
  position:absolute;
  inset:0;
  z-index:-5;
  opacity:.22;
  background:linear-gradient(120deg,#ff365f,#ff9b30,#ffe934,#52d76a,#37b7ff,#8564ff,#ff58c8,#ff365f);
  background-size:360% 360%;
  mix-blend-mode:multiply;
  animation:yumePartyWash 10s ease-in-out infinite;
}
.yume-party-site-layer:before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-4;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0 8deg,rgba(255,255,255,0) 8deg 22deg);
  animation:yumePartySlowSpin 28s linear infinite;
}

.yume-party-beam{
  position:absolute;
  top:-26vh;
  width:28vw;
  height:160vh;
  opacity:.20;
  filter:blur(3px);
  transform-origin:50% 0;
}
.yume-party-beam.beam-a{
  left:6vw;
  background:linear-gradient(180deg,rgba(255,245,64,.95),rgba(255,245,64,0));
  animation:yumePartyBeamA 7.5s ease-in-out infinite alternate;
}
.yume-party-beam.beam-b{
  right:3vw;
  background:linear-gradient(180deg,rgba(59,188,255,.9),rgba(59,188,255,0));
  animation:yumePartyBeamB 8.7s ease-in-out infinite alternate;
}

.yume-party-disco{
  position:absolute;
  top:52px;
  left:50%;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:4px solid #111;
  border-radius:50%;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,transparent 47%,rgba(0,0,0,.25) 48% 52%,transparent 53%),
    linear-gradient(0deg,transparent 47%,rgba(0,0,0,.25) 48% 52%,transparent 53%),
    repeating-linear-gradient(45deg,#f7f7f7 0 9px,#c6f0ff 9px 18px,#ffd8ef 18px 27px,#fff2a8 27px 36px);
  box-shadow:0 0 0 5px #fff,0 0 36px rgba(255,255,255,.9),0 0 80px rgba(90,180,255,.5);
  animation:yumePartyDisco 9s linear infinite;
}
.yume-party-disco:before{
  content:"";
  position:absolute;
  width:3px;
  height:58px;
  top:-61px;
  background:#111;
}
.yume-party-disco span{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#111;
  color:#ffdf43;
  font:1000 17px/1 Arial;
}

.yume-party-marquee{
  position:absolute;
  left:-3vw;
  width:106vw;
  height:34px;
  overflow:hidden;
  border-block:3px solid #111;
  background:#ffdf43;
  color:#111;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
  font:1000 16px/30px Arial,Helvetica,sans-serif;
  letter-spacing:.05em;
  white-space:nowrap;
  transform:rotate(-1deg);
}
.yume-party-marquee.top{top:7px}
.yume-party-marquee.bottom{bottom:8px;transform:rotate(1deg);background:#111;color:#fff;border-color:#ffdf43}
.yume-party-marquee span{
  display:inline-block;
  min-width:180%;
  animation:yumePartyMarquee 12s linear infinite;
}
.yume-party-marquee.bottom span{animation-direction:reverse;animation-duration:14s}

.yume-party-stamp{
  position:absolute;
  right:4vw;
  top:16vh;
  padding:10px 13px 8px;
  border:5px double #d21d49;
  color:#d21d49;
  background:rgba(255,255,255,.83);
  font:1000 17px/.88 Arial;
  letter-spacing:.02em;
  text-align:center;
  transform:rotate(11deg);
  box-shadow:4px 5px 0 rgba(0,0,0,.16);
  animation:yumePartyStamp 3.4s ease-in-out infinite alternate;
}

.yume-party-alert{
  position:absolute;
  left:4vw;
  bottom:14vh;
  width:min(310px,76vw);
  padding:11px 12px;
  border:3px solid #111;
  background:#fff;
  color:#111;
  box-shadow:7px 7px 0 #ffdf43,10px 10px 0 #111;
  transform:rotate(-3deg);
  animation:yumePartyAlert 4s ease-in-out infinite alternate;
}
.yume-party-alert b{
  display:block;
  margin-bottom:4px;
  font:1000 11px/1 Arial;
}
.yume-party-alert span{
  font:800 10px/1.25 Arial;
}

.yume-party-confetti-field,
.yume-party-floaters,
.yume-party-popups{
  position:absolute;
  inset:0;
}
.yume-party-confetti{
  --x:50%;
  --delay:0s;
  --duration:7s;
  --spin:540deg;
  --drift:0px;
  position:absolute;
  left:var(--x);
  top:-10vh;
  width:9px;
  height:18px;
  border:2px solid #111;
  background:#ffdf43;
  animation:yumePartyConfetti var(--duration) linear var(--delay) infinite;
  will-change:transform;
}
.yume-party-confetti[data-tone="1"]{background:#ff4f82}
.yume-party-confetti[data-tone="2"]{background:#45c7ff}
.yume-party-confetti[data-tone="3"]{background:#67df7d}
.yume-party-confetti[data-tone="4"]{background:#9b72ff}
.yume-party-confetti[data-tone="5"]{background:#fff}

.yume-party-floater{
  --left:50%;
  --top:50%;
  --delay:0s;
  --tilt:0deg;
  --scale:1;
  position:absolute;
  left:var(--left);
  top:var(--top);
  padding:5px 8px;
  border:2px solid #111;
  background:#fff;
  color:#111;
  box-shadow:3px 3px 0 #111;
  font:1000 11px/1 Arial;
  transform:rotate(var(--tilt)) scale(var(--scale));
  animation:yumePartyFloater 4.8s ease-in-out var(--delay) infinite alternate;
}
.yume-party-floater:nth-child(3n){background:#ffdf43}
.yume-party-floater:nth-child(4n){background:#ff4f82;color:#fff}
.yume-party-floater:nth-child(5n){background:#45c7ff}

.yume-party-popup{
  --px:50%;
  --py:50%;
  --prot:0deg;
  position:absolute;
  left:var(--px);
  top:var(--py);
  max-width:250px;
  padding:9px 11px;
  border:3px solid #111;
  background:#ffdf43;
  color:#111;
  box-shadow:5px 5px 0 #111;
  font:1000 11px/1.05 Arial;
  text-align:center;
  transform:translate(-50%,-50%) rotate(var(--prot)) scale(.7);
  animation:yumePartyPopup 4.3s cubic-bezier(.2,.9,.3,1) forwards;
}
.yume-party-popup:nth-child(even){background:#fff}
.yume-party-popup:nth-child(3n){background:#ff5a93;color:#fff}

/* The actual phone leaves its parking spot and flies around the viewport. */
.phone-companion.yume-music-takeover{
  z-index:2147481000!important;
}
.phone-companion.yume-party-phone-flight{
  animation:yumePartyPhoneFlight 11.5s cubic-bezier(.45,.02,.52,.98) infinite!important;
  transform-origin:50% 50%!important;
  will-change:transform!important;
}
.phone-companion.yume-music-takeover .jamie-phone-screen{
  position:relative;
  overflow:hidden!important;
}
.phone-companion.yume-music-takeover .phone-contact-bar,
.phone-companion.yume-music-takeover .phone-nav,
.phone-companion.yume-music-takeover .phone-content{
  pointer-events:none!important;
  user-select:none!important;
}

/* Phone takeover itself. */
.yume-music-takeover-overlay{
  position:absolute;
  inset:0;
  z-index:2147480000;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:18px 14px;
  color:#fff;
  text-align:center;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.38),transparent 24%),
    linear-gradient(135deg,#ff244f,#ff8c1a,#ffe62d,#25d366,#24b7ff,#745cff,#ff43be,#ff244f);
  background-size:320% 320%;
  animation:yumeMusicRainbow 5.6s linear infinite;
  isolation:isolate;
  cursor:default;
}
.yume-music-takeover-overlay:before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  background:conic-gradient(from 20deg,rgba(255,255,255,.04),rgba(255,255,255,.34),rgba(0,0,0,.08),rgba(255,255,255,.25),rgba(255,255,255,.04));
  animation:yumeMusicSpin 10s linear infinite;
}
.music-takeover-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 1px,transparent 1px,transparent 4px);
  mix-blend-mode:overlay;
}
.music-takeover-content{
  position:relative;
  z-index:2;
  width:min(88%,250px);
  padding:18px 14px 14px;
  border:3px solid #fff;
  border-radius:8px;
  background:rgba(0,0,0,.56);
  box-shadow:8px 8px 0 rgba(0,0,0,.58);
  transform:rotate(-1deg);
}
.music-takeover-content>small{
  display:block;
  margin-bottom:10px;
  font:900 7px/1 Arial;
  letter-spacing:.16em;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.music-takeover-disc{
  width:86px;
  height:86px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border:8px solid rgba(0,0,0,.82);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 9%,#ffdf43 10% 26%,#111 27% 100%);
  box-shadow:0 0 0 4px rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.35);
  animation:yumeMusicDisc 2.8s linear infinite;
}
.music-takeover-disc span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fff;
  color:#111;
  font:900 14px Arial;
}
.music-takeover-content h2{
  margin:0;
  font:1000 27px/.95 Arial;
  letter-spacing:-.04em;
  text-shadow:0 2px 5px rgba(0,0,0,.55);
}
.music-takeover-content p{
  margin:7px 0 9px;
  font:800 9px/1.25 Arial;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.music-takeover-content strong{
  display:block;
  min-height:13px;
  font:900 7px/1.25 Arial;
  letter-spacing:.09em;
}
.music-takeover-bars{
  height:35px;
  margin:12px auto 9px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}
.music-takeover-bars i{
  display:block;
  width:7px;
  height:12px;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.58);
  transform-origin:bottom;
  animation:yumeMusicBar .95s ease-in-out infinite alternate;
}
.music-takeover-bars i:nth-child(2){animation-delay:-.22s;height:25px}
.music-takeover-bars i:nth-child(3){animation-delay:-.48s;height:18px}
.music-takeover-bars i:nth-child(4){animation-delay:-.68s;height:32px}
.music-takeover-bars i:nth-child(5){animation-delay:-.14s;height:21px}
.music-takeover-bars i:nth-child(6){animation-delay:-.54s;height:28px}
.music-takeover-bars i:nth-child(7){animation-delay:-.36s;height:15px}
.music-takeover-lock{
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:2px;
  background:rgba(0,0,0,.28);
  font:900 6.5px/1.3 Arial;
  letter-spacing:.08em;
}

@keyframes yumePartyWash{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes yumePartySlowSpin{to{transform:rotate(360deg)}}
@keyframes yumePartyBeamA{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
@keyframes yumePartyBeamB{from{transform:rotate(19deg)}to{transform:rotate(-24deg)}}
@keyframes yumePartyDisco{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes yumePartyMarquee{to{transform:translateX(-45%)}}
@keyframes yumePartyStamp{from{transform:rotate(8deg) scale(.96)}to{transform:rotate(14deg) scale(1.06)}}
@keyframes yumePartyAlert{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(2deg) translateY(-18px)}}
@keyframes yumePartyConfetti{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift),118vh,0) rotate(var(--spin))}
}
@keyframes yumePartyFloater{
  from{transform:translate(-6px,-8px) rotate(var(--tilt)) scale(var(--scale))}
  to{transform:translate(9px,11px) rotate(calc(var(--tilt) + 8deg)) scale(calc(var(--scale) * 1.06))}
}
@keyframes yumePartyPopup{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--prot)) scale(.55)}
  12%{opacity:1;transform:translate(-50%,-50%) rotate(var(--prot)) scale(1.08)}
  75%{opacity:1;transform:translate(-50%,-50%) rotate(var(--prot)) scale(1)}
  100%{opacity:0;transform:translate(-50%,-72%) rotate(calc(var(--prot) + 5deg)) scale(.92)}
}
@keyframes yumePartyPageDance{
  from{transform:rotate(-.35deg) translateX(-2px)}
  to{transform:rotate(.35deg) translateX(2px)}
}
@keyframes yumePartyHeaderWobble{
  from{transform:translateX(-3px) rotate(-.25deg)}
  to{transform:translateX(3px) rotate(.25deg)}
}
@keyframes yumePartyFooterDance{
  from{transform:skewX(-.6deg)}
  to{transform:skewX(.6deg)}
}
@keyframes yumePartyButtonBob{
  from{translate:0 0}
  to{translate:0 -3px}
}
@keyframes yumePartyImageHue{
  0%{filter:hue-rotate(0deg) saturate(1.1)}
  50%{filter:hue-rotate(38deg) saturate(1.35)}
  100%{filter:hue-rotate(0deg) saturate(1.1)}
}
@keyframes yumePartyPhoneFlight{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  13%{transform:translate3d(-18vw,-10vh,0) rotate(-8deg) scale(.94)}
  27%{transform:translate3d(-48vw,-52vh,0) rotate(13deg) scale(.9)}
  41%{transform:translate3d(-68vw,-18vh,0) rotate(-15deg) scale(.97)}
  56%{transform:translate3d(-43vw,-68vh,0) rotate(10deg) scale(.91)}
  71%{transform:translate3d(-9vw,-54vh,0) rotate(-9deg) scale(.95)}
  86%{transform:translate3d(-58vw,-34vh,0) rotate(16deg) scale(.92)}
  100%{transform:translate3d(0,0,0) rotate(360deg) scale(1)}
}
@keyframes yumeMusicRainbow{
  0%{background-position:0% 50%;filter:hue-rotate(0deg)}
  50%{background-position:100% 50%;filter:hue-rotate(55deg)}
  100%{background-position:0% 50%;filter:hue-rotate(110deg)}
}
@keyframes yumeMusicSpin{to{transform:rotate(360deg)}}
@keyframes yumeMusicDisc{to{transform:rotate(360deg)}}
@keyframes yumeMusicBar{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1.05);opacity:1}}

@media(max-width:700px){
  .yume-party-disco{width:62px;height:62px;top:47px}
  .yume-party-stamp{top:13vh;right:3vw;font-size:13px}
  .yume-party-alert{bottom:12vh;width:min(260px,72vw)}
  .yume-party-floater:nth-child(n+8){display:none}
  @keyframes yumePartyPhoneFlight{
    0%{transform:translate3d(0,0,0) rotate(0deg) scale(.88)}
    20%{transform:translate3d(-10vw,-18vh,0) rotate(-7deg) scale(.78)}
    40%{transform:translate3d(-2vw,-42vh,0) rotate(9deg) scale(.74)}
    60%{transform:translate3d(-12vw,-26vh,0) rotate(-10deg) scale(.8)}
    80%{transform:translate3d(-3vw,-55vh,0) rotate(8deg) scale(.76)}
    100%{transform:translate3d(0,0,0) rotate(360deg) scale(.88)}
  }
}

@media(prefers-reduced-motion:reduce){
  body.yume-party-mode-active main,
  body.yume-party-mode-active header,
  body.yume-party-mode-active .site-header,
  body.yume-party-mode-active nav:not(.phone-nav),
  body.yume-party-mode-active footer,
  body.yume-party-mode-active main button,
  body.yume-party-mode-active main a,
  body.yume-party-mode-active main img,
  .yume-party-site-layer *,
  .phone-companion.yume-party-phone-flight,
  .yume-music-takeover-overlay,
  .yume-music-takeover-overlay:before,
  .music-takeover-disc,
  .music-takeover-bars i{
    animation:none!important;
  }
  .phone-companion.yume-party-phone-flight{transform:none!important}
  .yume-party-confetti{display:none!important}
  .yume-party-rainbow-wash{background:linear-gradient(135deg,rgba(255,54,95,.2),rgba(255,223,67,.2),rgba(69,199,255,.2),rgba(155,114,255,.2))}
  .yume-music-takeover-overlay{background:linear-gradient(135deg,#ff365f,#ffca2f,#4fd36c,#4aa5ff,#945dff,#ff55bd)}
}