@font-face{font-family:'Mr Dafoe';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/MrDafoe-normal-400.woff2) format('woff2')}
@font-face{font-family:'Saira';font-style:italic;font-weight:900;font-stretch:125%;font-display:swap;src:url(fonts/Saira-italic-900-125.woff2) format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-stretch:112%;font-display:swap;src:url(fonts/Saira-normal-700-112.woff2) format('woff2')}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0B0B0D;color:#0B0B0D;font-family:'Saira',Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .6s ease}
body.on{background:#F7F4EE}

.page{
  --s:clamp(40px,12vw,150px);
  --pad:clamp(24px,8.6vw,110px);
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:calc(clamp(16px,3vw,32px) + 72px) var(--pad) calc(var(--pad) + clamp(60px,12vh,120px));
}

.fade{opacity:0;transition:opacity .7s ease}
body.on .fade{opacity:1}
body.on .tag.fade{transition-delay:.15s}
body.on .stripes.fade{transition-delay:.3s}

.stripes{
  position:absolute;left:-60px;right:-60px;bottom:clamp(56px,12vh,120px);
  display:flex;flex-direction:column;gap:clamp(6px,0.8vw,10px);
  transform:skewY(-4deg);
}
.stripes span{display:block;height:clamp(10px,1.4vw,18px)}
.stripes .red{background:#E3232C}
.stripes .blue{background:#1E5BC6}

.content{position:relative;display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px);width:max-content;max-width:100%}

.tag{
  display:flex;align-items:center;gap:14px;
  font-weight:700;font-stretch:112%;
  font-size:clamp(11px,1.2vw,15px);letter-spacing:clamp(0.25em,0.4vw,0.4em);
}
.tag-end{align-self:flex-end;margin-top:-4px}
.dash{width:clamp(28px,3.75vw,48px);height:4px;background:#E3232C;flex:none}

.logo{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-weight:normal}
.saturday{
  font-weight:900;font-stretch:125%;font-style:italic;
  font-size:var(--s);line-height:0.85;white-space:nowrap;
}
.electrical{
  font-family:'Mr Dafoe',cursive;color:#E3232C;
  font-size:calc(var(--s) * 0.93);line-height:1;white-space:nowrap;
  margin-left:calc(var(--s) * 1.73);margin-top:-4px;
  transform:rotate(-5deg);transform-origin:left center;
  opacity:0;transition:opacity .3s,color .6s,text-shadow .6s;
}
body.igniting .electrical,body.on .electrical{
  opacity:1;color:#FFE3E4;
  text-shadow:0 0 2px #fff,0 0 8px #FF3B44,0 0 18px #FF2A35,0 0 38px #FF2A35,0 0 70px rgba(255,42,53,.7);
}
body.igniting .electrical{animation:flicker 1.1s linear both}
body.on .electrical{color:#E3232C;text-shadow:none}
@keyframes flicker{
  0%{opacity:0}8%{opacity:1}12%{opacity:.1}20%{opacity:1}24%{opacity:.2}
  34%{opacity:.9}38%{opacity:.3}50%,100%{opacity:1}
}

.switch{
  position:fixed;z-index:2;
  top:50%;left:50%;transform:translate(-50%,-50%) scale(1.5);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:top .7s cubic-bezier(.6,0,.2,1),left .7s cubic-bezier(.6,0,.2,1),transform .7s cubic-bezier(.6,0,.2,1);
}
body.igniting .switch,body.on .switch{
  top:clamp(16px,3vw,32px);left:calc(100% - clamp(16px,3vw,32px));
  transform:translate(-100%,0) scale(1);
}
.plate{
  width:44px;height:64px;background:#F7F4EE;border:2px solid #0B0B0D;border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:3px 3px 0 #E3232C;transition:transform .1s,box-shadow .1s;
}
body.on .plate{box-shadow:3px 3px 0 #0B0B0D}
.plate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0B0B0D}
.plate:focus-visible{outline:3px solid #1E5BC6;outline-offset:3px}
.toggle{width:14px;height:30px;border:2px solid #0B0B0D;border-radius:3px;position:relative;background:#F7F4EE}
.toggle::after{content:'';position:absolute;left:1px;right:1px;height:12px;bottom:13px;background:#0B0B0D;border-radius:1px;transition:all .15s}
body.igniting .toggle::after,body.on .toggle::after{bottom:1px;background:#E3232C}

.hint{
  font-weight:700;font-stretch:112%;font-size:8px;letter-spacing:0.3em;color:#F7F4EE;white-space:nowrap;
  animation:pulse 2.4s ease-in-out infinite;
}
body.igniting .hint,body.on .hint{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

body:not(.on) .tag-end{pointer-events:none}
.contact-btn{
  font:inherit;letter-spacing:inherit;color:#0B0B0D;background:none;border:0;padding:0;cursor:pointer;
}
.contact-btn:hover{color:#E3232C}
.email{
  font-weight:700;font-stretch:112%;font-size:1.2em;letter-spacing:0.12em;line-height:1;
  color:#0B0B0D;text-decoration:none;
  animation:pop .35s ease both;
}
.email:hover{color:#E3232C}
.contact-btn:focus-visible,.email:focus-visible{outline:3px solid #1E5BC6;outline-offset:4px}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (max-width:600px){
  .electrical{margin-left:calc(var(--s) * 1.4)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}