:root{
  --black:#050505;
  --white:#f4f4f4;
  --red:#e0202a;
  --red-glow:rgba(224,32,42,.65);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--black);
  color:var(--white);
  font-family:"Inter","Noto Sans JP",sans-serif;
  overflow-x:hidden;
}

/* ============ LOADER ============ */
#loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  overflow:hidden;
}

.loader__noise{
  position:absolute;
  inset:-50%;
  background-image:url("assets/noise.png");
  background-size:340px;
  opacity:.05;
  mix-blend-mode:screen;
  animation:noiseShift .6s steps(4) infinite;
  pointer-events:none;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}
.loader__vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

/* REC */
.rec{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.7rem;
  opacity:0;
}
.rec__label{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  letter-spacing:.35em;
  font-size:clamp(1rem,2.6vw,1.6rem);
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.25);
}
.rec__dot{
  width:clamp(12px,1.4vw,16px);
  height:clamp(12px,1.4vw,16px);
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 16px var(--red-glow),0 0 34px var(--red-glow);
}

/* Waveform */
.wave{
  position:absolute;
  top:50%;left:50%;
  width:88vw;max-width:1100px;height:160px;
  transform:translate(-50%,-50%);
  opacity:0;
}
#waveCanvas{width:100%;height:100%;display:block}

/* Map */
.map{
  position:absolute;
  top:50%;left:50%;
  width:min(96vw,1180px);
  aspect-ratio:876/859;
  transform:translate(-50%,-50%);
  opacity:0;
}
.map__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:.34;
  filter:drop-shadow(0 0 6px rgba(255,140,120,.12));
}
.map__lines{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
}
.map__lines .line-glow{
  fill:none;
  stroke:#ffb9a6;
  stroke-width:3.4;
  stroke-linecap:round;
  opacity:.45;
}
.map__lines .line-core{
  fill:none;
  stroke:url(#lineGrad);
  stroke-width:.7;
  stroke-linecap:round;
}
.map__lines .city-glow{ fill:#ff6a4d; opacity:.85; }
.map__lines .city{ fill:#fff; }
.map__lines .dust{ fill:#fff; }
.map__label{
  position:absolute;
  left:6%;bottom:30%;
  font-family:"Oswald",sans-serif;
  letter-spacing:.4em;
  font-size:clamp(.5rem,1.1vw,.72rem);
  color:#fff;
  padding-left:1.1em;
  opacity:0;
  white-space:nowrap;
}
.map__label::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:.55em;height:.55em;
  margin-top:-.27em;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px var(--red-glow);
}

/* Brand logo */
.brand{
  position:absolute;
  top:50%;left:50%;
  width:min(46vw,440px);
  transform:translate(-50%,-50%) scale(1.04);
  opacity:0;
}
.brand__logo{
  width:100%;display:block;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.18));
}

/* Tagline */
.tagline{
  position:absolute;
  top:calc(50% + clamp(70px,12vw,140px));
  left:50%;
  transform:translateX(-50%);
  font-family:"Oswald",sans-serif;
  font-weight:300;
  letter-spacing:.42em;
  font-size:clamp(.7rem,1.9vw,1.15rem);
  color:#fff;
  white-space:nowrap;
  opacity:0;
}

/* FV styles live in fv.css */

/* ============ RESPONSIVE ============ */
@media(max-width:640px){
  .wave{width:92vw;height:120px}
  .map{width:min(94vw,420px)}
  .map__label{bottom:26%}
  .brand{width:74vw}
  .tagline{
    letter-spacing:.22em;
    white-space:normal;
    width:88vw;text-align:center;line-height:1.8;
  }
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  .loader__noise{animation:none}
}