/* hinagiku.moe — deep-sea pop-art zine */

:root{
  --abyss:#0a1f3d;
  --cobalt:#062338;
  --midnight-tide:#03304a;
  --daisy-yellow:#ffd23f;
  --lipstick-magenta:#ff2e7e;
  --mint-surf:#6ce5b8;
  --paper-white:#fff5e8;
  --ben-day-shadow:rgba(255,46,126,0.14);
  --registration-line:rgba(255,245,232,0.06);

  --font-display:"Fredoka", system-ui, -apple-system, "Hiragino Maru Gothic ProN", sans-serif;
  --font-brand:"Baloo 2", system-ui, -apple-system, "Hiragino Maru Gothic ProN", sans-serif;
  --font-body:"Quicksand", system-ui, -apple-system, "Hiragino Maru Gothic ProN", sans-serif;
  --font-ja:"Zen Maru Gothic", system-ui, -apple-system, "Hiragino Maru Gothic ProN", sans-serif;
  --font-marker:"Permanent Marker", system-ui, -apple-system, "Hiragino Maru Gothic ProN", sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
}

body{
  height:100vh;
  width:100%;
  background:var(--abyss);
  color:var(--paper-white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- ZINE RAIL ---------------- */
.zine{
  display:flex;
  height:100vh;
  width:max-content;
}

.panel{
  position:relative;
  width:100vw;
  height:100vh;
  flex-shrink:0;
  scroll-snap-align:start;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* registration-sheet vertical guides */
.reg-guides{
  position:absolute;inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100%/12 - 1px),
    var(--registration-line) calc(100%/12 - 1px),
    var(--registration-line) calc(100%/12)
  );
  z-index:1;
}

/* printer's registration marks in 4 corners */
.regmarks i{
  position:absolute;
  width:14px;height:14px;
  border:1px solid rgba(255,245,232,0.30);
  border-radius:50%;
  z-index:6;
  pointer-events:none;
}
.regmarks i::before,.regmarks i::after{
  content:"";position:absolute;background:rgba(255,245,232,0.30);
}
.regmarks i::before{left:50%;top:-7px;width:1px;height:28px;transform:translateX(-50%);}
.regmarks i::after{top:50%;left:-7px;height:1px;width:28px;transform:translateY(-50%);}
.regmarks i:nth-child(1){top:26px;left:26px;}
.regmarks i:nth-child(2){top:26px;right:26px;}
.regmarks i:nth-child(3){bottom:26px;left:26px;}
.regmarks i:nth-child(4){bottom:26px;right:26px;}

.panel-no{
  position:absolute;
  bottom:30px;left:50%;transform:translateX(-50%);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(255,245,232,0.4);
  z-index:6;
}

/* ---------------- FADE REVEAL ---------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 800ms cubic-bezier(.22,.8,.36,1), transform 800ms cubic-bezier(.22,.8,.36,1);
}
.panel.in-view .reveal{opacity:1;transform:none;}
.panel.in-view .reveal:nth-child(1){transition-delay:80ms;}
.panel.in-view .reveal:nth-child(2){transition-delay:200ms;}
.panel.in-view .reveal:nth-child(3){transition-delay:340ms;}
.panel.in-view .reveal:nth-child(4){transition-delay:480ms;}
.panel.in-view .reveal:nth-child(5){transition-delay:600ms;}
.panel.in-view .reveal:nth-child(6){transition-delay:720ms;}

/* ---------------- HALFTONE DAISY ---------------- */
.daisy-stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}

.daisy{
  position:relative;
  border-radius:50%;
  background-color:var(--daisy-yellow);
  background-image:radial-gradient(circle, var(--paper-white) 1.5px, transparent 1.5px);
  background-size:7px 7px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.45));
}
.daisy-xl{width:62vh;height:62vh;}
.daisy-lg{width:46vh;height:46vh;}
.daisy-sm{width:62%;height:62%;background-size:6px 6px;}

.daisy .petal{
  position:absolute;
  width:46%;height:74%;
  left:27%;top:-30%;
  background-color:inherit;
  background-image:radial-gradient(circle, var(--paper-white) 1.5px, transparent 1.5px);
  background-size:7px 7px;
  clip-path:ellipse(42% 50% at 50% 70%);
  transform-origin:50% 90%;
}
.daisy-sm .petal{background-size:6px 6px;}
.daisy .petal:nth-child(1){transform:rotate(0deg);}
.daisy .petal:nth-child(2){transform:rotate(45deg);}
.daisy .petal:nth-child(3){transform:rotate(90deg);}
.daisy .petal:nth-child(4){transform:rotate(135deg);}
.daisy .petal:nth-child(5){transform:rotate(180deg);}
.daisy .petal:nth-child(6){transform:rotate(225deg);}
.daisy .petal:nth-child(7){transform:rotate(270deg);}
.daisy .petal:nth-child(8){transform:rotate(315deg);}

.daisy .core{
  position:absolute;
  width:34%;height:34%;
  left:33%;top:33%;
  border-radius:50%;
  background-color:var(--lipstick-magenta);
  background-image:radial-gradient(circle, var(--abyss) 1.6px, transparent 1.6px);
  background-size:7px 7px;
  z-index:2;
}

/* color variants */
.daisy-white{background-color:var(--paper-white);}
.daisy-white .petal{background-color:var(--paper-white);}
.daisy-white .core{background-color:var(--daisy-yellow);background-image:radial-gradient(circle, var(--abyss) 1.6px, transparent 1.6px);}

/* ==================================================
   PANEL 01 — TITLE CARD
   ================================================== */
.panel-01{background:var(--abyss);}

.mini-speech{
  position:absolute;
  left:54%;top:30%;
  transform:translate(-50%,-50%);
  background:var(--abyss);
  border:4px solid var(--paper-white);
  border-radius:30px;
  padding:14px 22px 18px;
  text-align:center;
  z-index:4;
  background-image:radial-gradient(circle, var(--ben-day-shadow) 2px, transparent 2px);
  background-size:8px 8px;
}
.mini-speech::after{
  content:"";
  position:absolute;
  left:18%;bottom:-26px;
  width:46px;height:30px;
  background:var(--paper-white);
  clip-path:polygon(0 0, 100% 0, 35% 100%);
  transform:rotate(23deg);
}
.mini-speech::before{
  content:"";
  position:absolute;
  left:calc(18% + 4px);bottom:-18px;
  width:38px;height:22px;
  background:var(--abyss);
  clip-path:polygon(0 0, 100% 0, 35% 100%);
  transform:rotate(23deg);
  z-index:1;
}
.mini-speech .ja{display:block;font-family:var(--font-ja);font-weight:700;font-size:1.7rem;color:var(--daisy-yellow);}
.mini-speech .rom{display:block;font-family:var(--font-body);font-weight:600;font-size:0.95rem;letter-spacing:0.18em;color:var(--paper-white);margin-top:2px;}
.mini-speech .tld{display:block;font-family:var(--font-body);font-weight:700;font-size:0.78rem;letter-spacing:0.3em;color:var(--mint-surf);margin-top:2px;}

.totem{
  position:absolute;
  right:5vw;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  gap:12px;
  z-index:5;
}
.totem .bead{
  width:clamp(38px,4.6vw,52px);
  height:clamp(38px,4.6vw,52px);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--paper-white);
  color:var(--abyss);
  font-family:var(--font-brand);
  font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.totem .bead:nth-child(odd){background:var(--daisy-yellow);}

/* ==================================================
   PANEL 02 — WARHOL GRID
   ================================================== */
.panel-02{background:var(--cobalt);}

.warhol{
  width:min(74vh,74vw);
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  background:var(--paper-white);
  padding:3px;
  transform:rotate(-10deg);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  z-index:3;
}
.warhol .cell{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* cell colour treatments */
.cell-1{background:var(--lipstick-magenta);}
.cell-1 .daisy,.cell-1 .petal{background-color:var(--daisy-yellow);}
.cell-1 .core{background-color:var(--lipstick-magenta);background-image:radial-gradient(circle, var(--paper-white) 1.6px, transparent 1.6px);}

.cell-2{background:var(--daisy-yellow);}
.cell-2 .daisy,.cell-2 .petal{background-color:var(--mint-surf);}
.cell-2 .core{background-color:var(--daisy-yellow);background-image:radial-gradient(circle, var(--abyss) 1.6px, transparent 1.6px);}

.cell-3{background:var(--lipstick-magenta);}
.cell-3 .daisy,.cell-3 .petal{background-color:var(--paper-white);}
.cell-3 .core{background-color:var(--lipstick-magenta);background-image:radial-gradient(circle, var(--paper-white) 1.6px, transparent 1.6px);}

.cell-4{background:var(--daisy-yellow);}
.cell-4 .daisy,.cell-4 .petal{background-color:var(--lipstick-magenta);}
.cell-4 .core{background-color:var(--daisy-yellow);background-image:radial-gradient(circle, var(--abyss) 1.6px, transparent 1.6px);}

.scrawl{
  position:absolute;
  bottom:14vh;left:50%;
  transform:translateX(-50%) rotate(-4deg);
  font-family:var(--font-marker);
  font-size:clamp(2rem,5vw,3.4rem);
  color:var(--mint-surf);
  z-index:5;
  white-space:nowrap;
}

/* ==================================================
   PANEL 03 — SOUND-EFFECT BLOOM
   ================================================== */
.panel-03{
  background-color:var(--abyss);
  background-image:radial-gradient(circle, var(--lipstick-magenta) 2px, transparent 2.5px);
  background-size:8px 8px;
}

.sonar-field{
  position:absolute;
  left:62%;top:42%;
  width:0;height:0;
  z-index:2;
  pointer-events:none;
}
.sonar{
  position:absolute;
  left:50%;top:50%;
  width:1200px;height:1200px;
  margin-left:-600px;margin-top:-600px;
  border:3px solid var(--daisy-yellow);
  border-radius:50%;
  opacity:0;
}
.panel-03.in-view .sonar{
  animation:sonar 2.4s var(--delay) cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes sonar{
  0%{transform:scale(0);opacity:0.9;}
  100%{transform:scale(1);opacity:0;}
}

.bloom{
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(6rem,18vw,18rem);
  line-height:0.92;
  letter-spacing:-0.02em;
  color:var(--daisy-yellow);
  text-shadow:12px 12px 0 var(--lipstick-magenta);
  transform:rotate(-8deg);
  font-feature-settings:"ss01" on, "calt" on;
  z-index:4;
}
.bloom .bang{color:var(--mint-surf);text-shadow:12px 12px 0 var(--lipstick-magenta);}

.tiny-note{
  position:absolute;
  bottom:16vh;left:50%;
  transform:translateX(-50%);
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(0.9rem,1.6vw,1.2rem);
  letter-spacing:0.18em;
  color:var(--paper-white);
  z-index:5;
}

/* ==================================================
   PANEL 04 — LICHTENSTEIN SPEECH
   ================================================== */
.panel-04{
  background-color:var(--cobalt);
  background-image:radial-gradient(circle, var(--ben-day-shadow) 2px, transparent 2px);
  background-size:8px 8px;
}

.big-speech{
  position:relative;
  width:min(62vw,760px);
  background:var(--abyss);
  border:5px solid var(--paper-white);
  border-radius:48px;
  padding:6vh 5vw;
  text-align:center;
  z-index:3;
  background-image:radial-gradient(circle, var(--lipstick-magenta) 2px, transparent 2.5px);
  background-size:8px 8px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.big-speech::after{
  content:"";
  position:absolute;
  left:14%;bottom:-58px;
  width:120px;height:64px;
  background:var(--paper-white);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform:rotate(23deg);
}
.big-speech::before{
  content:"";
  position:absolute;
  left:calc(14% + 5px);bottom:-44px;
  width:104px;height:48px;
  background:var(--abyss);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform:rotate(23deg);
  z-index:1;
}
.ja-big{
  font-family:var(--font-ja);
  font-weight:700;
  font-size:clamp(2.6rem,5vw,5rem);
  color:var(--daisy-yellow);
  line-height:1.1;
  position:relative;z-index:2;
}
.en-small{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(1rem,2vw,1.5rem);
  letter-spacing:0.22em;
  color:var(--mint-surf);
  margin-top:2.2vh;
  position:relative;z-index:2;
}

/* ==================================================
   PANEL 05 — RETRO STRIPE BLOOM
   ================================================== */
.panel-05{
  background-image:repeating-linear-gradient(
    23deg,
    var(--daisy-yellow) 0 80px,
    var(--mint-surf) 80px 140px,
    var(--lipstick-magenta) 140px 220px,
    var(--paper-white) 220px 280px
  );
}

.bullets{
  position:absolute;
  left:4vw;top:50%;
  transform:translateY(-50%);
  list-style:none;
  display:flex;flex-direction:column;
  gap:2.2vh;
  z-index:5;
}
.bullets li{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1rem,1.8vw,1.4rem);
  letter-spacing:0.12em;
  color:var(--abyss);
  text-shadow:0 1px 0 rgba(255,245,232,0.6);
}
.bullets .num{
  width:clamp(36px,3.6vw,46px);
  height:clamp(36px,3.6vw,46px);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--abyss);
  border-radius:50%;
  background:var(--paper-white);
  font-family:"Courier New", monospace;
  font-weight:700;
  font-size:0.95rem;
}

.stripe-daisy{z-index:3;}
.stripe-daisy .daisy{filter:drop-shadow(0 18px 50px rgba(10,31,61,0.55));}

/* ==================================================
   PANEL 06 — COLOPHON / SIGN-OFF
   ================================================== */
.panel-06{background:var(--abyss);}
.panel-06::before{
  content:"";
  position:absolute;
  left:-6vw;top:-6vh;
  width:78vw;height:118vh;
  background:var(--lipstick-magenta);
  transform:rotate(-3deg);
  z-index:0;
}

.colophon{
  position:relative;
  width:46vmin;height:46vmin;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.colophon .sun{
  width:12.5vmin;height:12.5vmin;
  border-radius:50%;
  background-color:var(--daisy-yellow);
  background-image:radial-gradient(circle, var(--abyss) 1.4px, transparent 1.4px);
  background-size:6px 6px;
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
.ring-text{
  position:absolute;
  inset:0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(0.8rem,1.5vw,1.1rem);
  letter-spacing:0.06em;
  color:var(--paper-white);
  animation:spin 28s linear infinite;
}
.ring-text span{
  position:absolute;
  left:50%;top:0;
  height:50%;
  transform-origin:bottom center;
  text-transform:uppercase;
}
.sr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---------------- PROGRESS RIBBON ---------------- */
.progress{
  position:fixed;
  top:22px;right:24px;
  display:flex;
  gap:16px;
  z-index:50;
}
.progress .dot{
  width:12px;height:12px;
  border-radius:50%;
  background:rgba(255,245,232,0.22);
  transition:background 350ms ease, box-shadow 350ms ease, transform 350ms ease;
}
.progress .dot.active{
  background:var(--daisy-yellow);
  box-shadow:0 0 0 4px rgba(255,210,63,0.22);
  transform:rotate(6deg) scale(1.15);
}

/* ---------------- RESPONSIVE TWEAKS ---------------- */
@media (max-width:720px){
  .daisy-xl{width:54vh;height:54vh;}
  .daisy-lg{width:40vh;height:40vh;}
  .totem{right:3vw;gap:8px;}
  .warhol{width:min(80vh,86vw);}
  .scrawl{bottom:10vh;}
  .bullets{left:3vw;gap:1.6vh;}
  .big-speech{width:80vw;padding:5vh 6vw;}
  .progress{gap:12px;top:16px;right:16px;}
}