/* =============================================================
   mosun.xyz — coastal-cyberpunk salvage log of an impossible weapon
   palette: coastal-blend (drained, salted)
   layout : full-bleed, six 100vh plates, split along tide-line
   ============================================================= */

:root{
  --drowned-deep:#0c1b22;
  --kelp-circuit:#1f4d57;
  --led-cyan:#5fb6b0;
  --bleached-sand:#d8c7a3;
  --rust-tideline:#b6826a;
  --salt-bloom:#f2ede0;
  --flare-coral:#e8553f;

  --tide-stroke:1.25px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--drowned-deep);color:var(--salt-bloom)}
html{scroll-behavior:smooth}
body{
  font-family:"Roboto Flex","Roboto",system-ui,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 380,"opsz" 14;
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
}
img,svg{display:block;max-width:100%}

/* -------------------------------------------------------------
   DEAD-PIXEL FIELD — sparse cyan dots over the drowned ground
   ------------------------------------------------------------- */
.dead-pixels{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 8% 14%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 22% 38%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 38% 71%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 53% 9%,  var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 67% 47%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 81% 24%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 91% 88%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 12% 92%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 44% 33%, var(--led-cyan) .8px, transparent 1.4px),
    radial-gradient(circle at 73% 68%, var(--led-cyan) .8px, transparent 1.4px);
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity:.06;
  mix-blend-mode:screen;
}
.dead-pixel-flicker{
  position:fixed;width:2px;height:2px;background:var(--led-cyan);
  pointer-events:none;z-index:1;mix-blend-mode:screen;
  animation: pixflick 1.4s steps(2) infinite;
}
@keyframes pixflick{
  0%,40%,80%,100%{opacity:.0}
  20%{opacity:.85}
  60%{opacity:.45}
}

/* -------------------------------------------------------------
   DEPTH GAUGE — only chrome
   ------------------------------------------------------------- */
.depth-gauge{
  position:fixed;top:0;right:18px;height:100vh;width:46px;z-index:50;
  pointer-events:none;
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 80,"wght" 380;
  font-size:.66rem;letter-spacing:.08em;
  color:var(--salt-bloom);
}
.depth-gauge__rail{
  position:absolute;top:0;right:14px;bottom:0;width:1px;background:var(--rust-tideline);opacity:.55;
}
.depth-gauge__rail::before,.depth-gauge__rail::after{
  content:"";position:absolute;left:-3px;width:7px;height:1px;background:var(--rust-tideline);
}
.depth-gauge__rail::before{top:0}
.depth-gauge__rail::after{bottom:0}
.depth-gauge__tick{
  position:absolute;top:0;right:0;
  transform:translateY(0);
  width:46px;height:14px;
  display:flex;align-items:center;justify-content:flex-end;
  transition:transform .12s linear;
}
.depth-gauge__tick::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:1px;background:var(--led-cyan);
  box-shadow:0 0 0 1px var(--drowned-deep);
}
.depth-gauge__label{
  background:var(--drowned-deep);
  padding:0 6px 0 2px;
  color:var(--led-cyan);
  font-feature-settings:"tnum";
}
.depth-gauge__caption{
  position:absolute;bottom:14px;right:0;width:120px;
  text-align:right;
  color:var(--rust-tideline);opacity:.7;
  font-size:.58rem;line-height:1.3;
}

/* -------------------------------------------------------------
   PLATE — 100vw × 100vh, full-bleed, the split is here
   ------------------------------------------------------------- */
.plate{
  position:relative;
  width:100vw;height:100vh;min-height:560px;
  overflow:hidden;
  background:var(--drowned-deep);
  isolation:isolate;
}

/* the diagonal tide-line clip — rotated per plate via --tide-angle */
.territory{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:8vh 9vw;
  z-index:2;
}
.territory--spear{
  /* SPEAR side — kelp-circuit / drowned-deep, clipped above the tide-line */
  background:linear-gradient(var(--tide-angle), var(--drowned-deep) 0%, var(--drowned-deep) 50%, transparent 50.01%, transparent 100%);
  color:var(--salt-bloom);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(50% - 50vmax * tan(var(--tide-angle))),
    0 calc(50% + 50vmax * tan(var(--tide-angle)))
  );
  /* fallback: top-left half */
}
.territory--shield{
  background:var(--bleached-sand);
  color:var(--kelp-circuit);
  clip-path: polygon(
    0 calc(50% + 50vmax * tan(var(--tide-angle))),
    100% calc(50% - 50vmax * tan(var(--tide-angle))),
    100% 100%,
    0 100%
  );
  align-items:flex-end;
  text-align:right;
}

/* graceful fallback (browsers without trig) — diagonal halves */
@supports not (clip-path: polygon(0 calc(50% + 50vmax * tan(8deg)), 0 0)){
  .territory--spear{ clip-path: polygon(0 0, 100% 0, 100% 50%, 0 70%); }
  .territory--shield{ clip-path: polygon(0 70%, 100% 50%, 100% 100%, 0 100%); }
}

/* the tide SVG sits between layers */
.tide{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tide__path{fill:var(--bleached-sand);opacity:0;}
.tide__line{
  fill:none;stroke:var(--rust-tideline);stroke-width:var(--tide-stroke);
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 .4px var(--flare-coral));
  opacity:.92;
}
.tide__dither{opacity:.55}

/* -------------------------------------------------------------
   TYPOGRAPHY — three faces, all variable
   ------------------------------------------------------------- */
.display, .title{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-size:clamp(3rem, 11vw, 12rem);
  line-height:.94;
  letter-spacing:-.01em;
  margin:0 0 1.4rem;
}
.display--spear{
  letter-spacing:-.04em;
  font-variation-settings:"wght" 720,"opsz" 96;
  transform:skewX(-3deg);
  color:var(--salt-bloom);
}
.display--shield{
  letter-spacing:.06em;
  font-variation-settings:"wght" 320,"opsz" 14;
  color:var(--kelp-circuit);
}
.display .ltr, .title .ltr{
  display:inline-block;
  /* per-letter disagreement on weight + opsz */
  font-variation-settings:
    "wght" calc(280 + (var(--i) * 90)),
    "opsz" calc(14 + (var(--i) * 16));
}
.display--spear .ltr{
  font-variation-settings:
    "wght" calc(640 + (var(--i) * 30)),
    "opsz" calc(96 - (var(--i) * 8));
}
.display--shield .ltr{
  font-variation-settings:
    "wght" calc(260 + (var(--i) * 70)),
    "opsz" calc(14 + (var(--i) * 18));
}
.title{font-size:clamp(2.4rem, 8vw, 7.5rem);}

.display-sub{
  font-family:"Gowun Batang",serif;
  font-size:clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing:.4em;
  margin-top:.2rem;color:var(--led-cyan);
}
.territory--shield .display-sub{color:var(--rust-tideline)}

/* meta / micro labels */
.meta{
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 80,"wght" 380;
  text-transform:uppercase;
  font-size:.7rem;letter-spacing:.18em;
  color:var(--led-cyan);
  margin-bottom:1.6rem;
  opacity:.85;
}
.territory--shield .meta{color:var(--rust-tideline)}

/* paragraph captions */
.caption{
  font-family:"Roboto Flex",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(.9rem,1.2vw,1.1rem);
  max-width:46ch;
  margin-top:1rem;
  opacity:.92;
}
.caption--small{font-size:.85rem;opacity:.78}
.caption em{
  font-family:"Gowun Batang",serif;
  font-style:normal;font-weight:700;
}

/* spec list — salvage-shorthand */
.spec{list-style:none;margin-top:1.4rem}
.spec li{
  display:flex;gap:1.2rem;align-items:baseline;
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 85,"wght" 380;
  font-size:.86rem;
  border-top:1px solid currentColor;
  padding:.45rem 0;
  opacity:.9;
}
.territory--spear .spec li{border-top-color:rgba(95,182,176,.35)}
.territory--shield .spec li{border-top-color:rgba(31,77,87,.35)}
.spec .k{
  text-transform:uppercase;letter-spacing:.16em;
  width:5.5rem;flex-shrink:0;color:var(--led-cyan);
}
.territory--shield .spec .k{color:var(--rust-tideline)}
.spec .v{font-variation-settings:"wdth" 100,"wght" 380}

.plate-edge{
  position:absolute;left:0;bottom:1.2rem;width:100%;text-align:center;
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 75,"wght" 320;
  font-size:.6rem;letter-spacing:.45em;
  color:var(--rust-tideline);
  opacity:.7;
  z-index:6;
  text-transform:uppercase;
}

/* -------------------------------------------------------------
   PLATE 1 · THE FIND — neon sign half-buried
   ------------------------------------------------------------- */
.plate--find .territory--spear{padding-top:14vh}
.plate--find .display--spear{
  text-shadow:
    0 0 8px rgba(95,182,176,.35),
    0 0 22px rgba(95,182,176,.15);
}

/* -------------------------------------------------------------
   PLATE 2 / 3 — diagrams
   ------------------------------------------------------------- */
.diagram{
  width:min(64vw, 720px);
  margin-top:1.2rem;margin-bottom:1.2rem;
  fill:none;
  stroke:var(--kelp-circuit);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}
.territory--spear .diagram{stroke:var(--led-cyan);opacity:.92}
.territory--shield .diagram{stroke:var(--rust-tideline);opacity:.92;margin-left:auto}
.diagram .lbl{
  fill:currentColor;stroke:none;
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 80,"wght" 380;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.8;
}
.territory--spear .diagram .lbl{fill:var(--led-cyan)}
.territory--shield .diagram .lbl{fill:var(--rust-tideline)}
.diagram .lbl--hot{fill:var(--flare-coral)!important}
.diagram .leader{stroke-dasharray:2 3;opacity:.55}
.diagram .hot{fill:var(--flare-coral);stroke:var(--flare-coral)}
.diagram .pins circle{fill:currentColor;stroke:none;opacity:.9}
.diagram .composite-shield circle{opacity:.7}

/* draw-on stroke for QUESTION/TIDE diagrams */
.diagram--composite line, .diagram--composite circle, .diagram--composite polygon{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation: drawIn 2.4s ease-out forwards;
}
@keyframes drawIn{ to{stroke-dashoffset:0} }

/* -------------------------------------------------------------
   PLATE 4 · THE QUESTION — full-bleed type
   ------------------------------------------------------------- */
.question{
  font-family:"Gowun Batang",serif;
  font-size:clamp(2.2rem, 7.5vw, 8rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
}
.question--ko{color:var(--salt-bloom)}
.question--zh{color:var(--kelp-circuit);text-align:right}
.question .hot{color:var(--flare-coral)}
.question .qmark{
  display:inline-block;
  color:var(--flare-coral);
  font-size:1.05em;
  margin-left:.05em;
  animation: qpulse 2.6s ease-in-out infinite;
}
@keyframes qpulse{
  0%,100%{opacity:.85;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-.02em)}
}

/* -------------------------------------------------------------
   PLATE 5 · THE SILENCE — empty
   ------------------------------------------------------------- */
.silence{
  font-family:"Gowun Batang",serif;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.6em;
  opacity:.45;
}
.territory--shield .silence{color:var(--kelp-circuit)}
.ticker{
  position:absolute;left:0;right:0;
  top:50%;height:24px;
  transform:translateY(-12px) rotate(0deg);
  overflow:hidden;
  z-index:5;pointer-events:none;
  border-top:1px dashed var(--rust-tideline);
  border-bottom:1px dashed var(--rust-tideline);
  background:linear-gradient(180deg, transparent, rgba(184,130,106,.08), transparent);
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 80,"wght" 380;
  font-size:.66rem;letter-spacing:.18em;
  color:var(--led-cyan);
  text-transform:uppercase;
}
.ticker__track{
  display:flex;gap:3rem;
  white-space:nowrap;
  padding:5px 0;
  animation: tickerScroll 38s linear infinite;
  width:max-content;
}
.ticker span{display:inline-block;padding-right:3rem}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* -------------------------------------------------------------
   PLATE 6 · THE TIDE — composite + footer
   ------------------------------------------------------------- */
.plate--tide .territory--spear{align-items:flex-start;text-align:left}
.plate--tide .territory--shield{align-items:flex-start;text-align:left;color:var(--bleached-sand);background:var(--drowned-deep)}
.plate--tide .territory--shield .meta{color:var(--led-cyan)}

.diagram--composite{stroke:var(--rust-tideline)}
.composite-shield{stroke:var(--rust-tideline);opacity:.7}
.composite-spear{stroke:var(--led-cyan);opacity:.85}

.footer{
  position:absolute;left:0;right:0;bottom:1.4rem;
  display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
  font-family:"Roboto Flex",monospace;
  font-variation-settings:"wdth" 80,"wght" 380;
  font-size:.7rem;letter-spacing:.16em;
  color:var(--salt-bloom);
  text-transform:uppercase;
  z-index:6;
  opacity:.85;
}
.footer__sep{color:var(--rust-tideline)}
.footer__lot{color:var(--led-cyan)}
.footer__time{color:var(--flare-coral);font-feature-settings:"tnum"}

/* -------------------------------------------------------------
   GLITCH BAND — narrow strip along the tide-line
   ------------------------------------------------------------- */
.glitch-band{
  position:absolute;left:0;right:0;
  top:50%;height:3.4rem;
  transform-origin:50% 50%;
  transform:translateY(-1.7rem) rotate(calc(var(--tide-angle) * -1));
  display:flex;align-items:center;justify-content:center;gap:2.4rem;
  z-index:6;pointer-events:none;
  font-family:"Gowun Batang",serif;
  font-size:clamp(1rem,1.6vw,1.4rem);
  letter-spacing:.04em;
  color:var(--salt-bloom);
  mix-blend-mode:screen;
  opacity:.5;
}
.glitch-band--strong{opacity:.85}
.glitch-glyph{
  position:relative;
  display:inline-block;
  color:var(--salt-bloom);
}
.glitch-glyph::before,
.glitch-glyph::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  pointer-events:none;
}
.glitch-glyph::before{ color:var(--led-cyan); transform:translate(0,0); opacity:0; }
.glitch-glyph::after { color:var(--flare-coral); transform:translate(0,0); opacity:0; }
.glitch-glyph.is-active::before{ animation: glitchA .14s steps(2) 1; }
.glitch-glyph.is-active::after { animation: glitchB .14s steps(2) 1; }
.glitch-glyph.is-active{ animation: glitchTear .14s steps(2) 1; }

@keyframes glitchA{
  0%{transform:translate(0,0);opacity:0}
  20%{transform:translate(3px,-1px);opacity:.95}
  100%{transform:translate(0,0);opacity:0}
}
@keyframes glitchB{
  0%{transform:translate(0,0);opacity:0}
  20%{transform:translate(-2px,1px);opacity:.85}
  100%{transform:translate(0,0);opacity:0}
}
@keyframes glitchTear{
  0%{clip-path:inset(0 0 0 0)}
  18%{clip-path:inset(45% 0 30% 0)}
  36%{clip-path:inset(20% 0 55% 0)}
  100%{clip-path:inset(0 0 0 0)}
}

/* -------------------------------------------------------------
   SCROLL-DRIVEN VARIABLE TYPE — js sets --tide-progress 0..1 on plate
   ------------------------------------------------------------- */
.plate{ --tide-progress: 0; }
.plate .caption{
  font-variation-settings:
    "wdth" calc(100 + (var(--tide-progress) * 25) - 12),
    "wght" calc(380 + (var(--tide-progress) * 220) - 110);
  transition: font-variation-settings .25s linear;
}

/* -------------------------------------------------------------
   reduced motion — freeze
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker__track{animation:none}
  .plate{--tide-progress:.5}
  .diagram--composite line,.diagram--composite circle,.diagram--composite polygon{stroke-dashoffset:0!important}
}

/* -------------------------------------------------------------
   small viewport — keep the split, shrink type, reflow safety
   ------------------------------------------------------------- */
@media (max-width:720px){
  .territory{padding:6vh 7vw}
  .display, .title{font-size:clamp(2.2rem, 16vw, 5.6rem)}
  .question{font-size:clamp(1.6rem, 11vw, 4rem)}
  .diagram{width:88vw}
  .footer{font-size:.6rem;letter-spacing:.1em}
  .depth-gauge{width:34px;right:8px}
  .depth-gauge__caption{display:none}
}