/* ============================================================
   kanojo.love — deep-sea goblincore shrine
   Palette (ocean-deep):
     #03111c trench black   |  #0a2540 hadal blue
     #1a4d5c kelp green     |  #5fd4c4 bioluminescence
     #c89968 brass tarnish  |  #e8e2d0 bone white
     #7a3b4a drowned rose
   Fonts: Bodoni Moda / Space Grotesk / Cutive Mono / Caveat
   ============================================================ */

:root{
  --trench:#03111c;
  --hadal:#0a2540;
  --kelp:#1a4d5c;
  --biolum:#5fd4c4;
  --brass:#c89968;
  --bone:#e8e2d0;
  --rose:#7a3b4a;
  --specimen-radius:18px 22px 16px 24px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--trench);
  color:var(--bone);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

/* ---------- ripple injection layer ---------- */
#ripple-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  overflow:hidden;
}
.cursor-ripple{
  position:fixed;
  width:0;height:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cursor-ripple circle{vector-effect:non-scaling-stroke;}

/* ---------- shared specimen frame ---------- */
.specimen-frame,
.cell,
.glyph{
  border:1px solid var(--brass);
  border-radius:var(--specimen-radius);
  box-shadow:inset 0 0 24px rgba(95,212,196,0.08);
  position:relative;
}
/* brass rivets at the four corners */
.cell::before,.cell::after,
.glyph::before,.glyph::after{
  content:"";
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 4px rgba(200,153,104,0.5);
}
.cell::before{top:5px;left:5px;}
.cell::after{top:5px;right:5px;}
/* extra rivets via box-shadow trick on a pseudo? keep simple: two more via outline elements not possible; add bottom rivets using ::before on inner — use background images instead */
.cell{
  background:
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--brass) 0 2px, transparent 2.5px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--brass) 0 2px, transparent 2.5px),
    var(--hadal);
}

.specimen-label{
  display:block;
  font-family:"Cutive Mono",monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--biolum);
  opacity:0.78;
  margin-bottom:0.85rem;
  border-bottom:1px dotted rgba(200,153,104,0.35);
  padding-bottom:0.4rem;
}

.hand-label{
  font-family:"Caveat",cursive;
  font-size:1.25rem;
  color:var(--bone);
  opacity:0.85;
  margin-top:0.8rem;
  line-height:1.25;
}

.seaglass{
  background:rgba(95,212,196,0.12);
  border-radius:4px;
  padding:0 6px;
}

/* ---------- margin glyphs ---------- */
.margin-glyph{
  position:absolute;
  width:30px;height:30px;
  opacity:0.7;
  z-index:5;
}
.margin-heart{width:46px;height:46px;top:8%;right:6%;opacity:0.45;}
.margin-eye{width:46px;height:28px;bottom:14px;right:16px;opacity:0.5;}
.margin-bone{width:74px;height:38px;left:4%;bottom:24px;opacity:0.55;}
.margin-cord{width:54px;height:46px;right:7%;bottom:5%;opacity:0.55;}

/* ============================================================
   THE TRENCH (HERO)
   ============================================================ */
.trench{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(26,77,92,0.35), transparent 60%),
    radial-gradient(ellipse at 50% -10%, rgba(95,212,196,0.06), transparent 50%),
    var(--trench);
  display:flex;
  align-items:center;
  overflow:hidden;
}

.kelp-field{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.kelp{
  position:absolute;
  bottom:-10%;
  height:130%;
  width:18vw;
  min-width:160px;
}
.kelp-1{left:4%;opacity:0.22;transform-origin:bottom center;animation:sway 23s ease-in-out infinite;}
.kelp-2{left:24%;opacity:0.14;animation:sway 17s ease-in-out infinite reverse;}
.kelp-3{right:8%;opacity:0.08;animation:sway 12s ease-in-out infinite;}
.kelp-2.kelp{width:14vw;}
.kelp-3.kelp{width:11vw;}

@keyframes sway{
  0%,100%{transform:rotate(-3deg) translateX(-1%);}
  50%{transform:rotate(3deg) translateX(1.5%);}
}

.ambient-ripple{
  position:absolute;
  width:46vw;height:46vw;
  max-width:620px;max-height:620px;
  pointer-events:none;
  opacity:0.55;
}
.ambient-ripple-a{right:6%;top:12%;}
.ambient-ripple circle{vector-effect:non-scaling-stroke;}

.trench-inner{
  position:relative;
  z-index:3;
  padding:0 7vw;
  max-width:1100px;
}
.trench-eyebrow{
  font-family:"Cutive Mono",monospace;
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
  opacity:0.8;
  margin-bottom:1.4rem;
}

.domain-title{
  font-family:"Bodoni Moda",serif;
  font-weight:800;
  font-size:clamp(4rem,11vw,9rem);
  letter-spacing:-0.04em;
  line-height:1;
  color:var(--bone);
  display:flex;
  flex-wrap:wrap;
  gap:0.06em;
  margin-bottom:1.6rem;
}
.glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.04em 0.12em 0.02em;
  border-radius:14px 16px 12px 18px;
  box-shadow:inset 0 0 18px rgba(95,212,196,0.1), 0 0 22px rgba(3,17,28,0.4);
  background:rgba(10,37,64,0.4);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.glyph::before{top:3px;left:3px;width:3px;height:3px;}
.glyph::after{top:3px;right:3px;width:3px;height:3px;}
.glyph:hover{
  transform:translateY(-4px) rotate(-1.5deg);
  box-shadow:inset 0 0 22px rgba(95,212,196,0.2), 0 0 34px rgba(95,212,196,0.18);
}
.dot-glyph{
  width:0.42em;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-color:transparent;
}
.dot-glyph::before,.dot-glyph::after{display:none;}
.lure-dot{width:0.6em;height:0.6em;align-self:flex-end;margin-bottom:0.12em;overflow:visible;}

.trench-sub{
  font-size:clamp(1rem,1.6vw,1.25rem);
  max-width:48ch;
  color:var(--bone);
  opacity:0.86;
  margin-bottom:2.4rem;
}
.trench-scroll{
  font-family:"Cutive Mono",monospace;
  font-size:0.8rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--biolum);
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);opacity:0.55;}50%{transform:translateY(6px);opacity:1;}}

/* ============================================================
   MOVEMENT LABELS
   ============================================================ */
.movement-label{
  font-family:"Cutive Mono",monospace;
  font-size:0.82rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass);
  opacity:0.75;
  padding:0 7vw;
  margin:0 auto 2.2rem;
  max-width:1400px;
}

/* ============================================================
   THE HOARD (BENTO)
   ============================================================ */
.hoard{
  position:relative;
  padding:6rem 0 5rem;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(26,77,92,0.18), transparent 55%),
    var(--trench);
}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:118px;
  gap:14px;
  padding:0 7vw;
  max-width:1400px;
  margin:0 auto;
}
.cell{
  padding:1.1rem 1.25rem 1.2rem;
  overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
  display:flex;
  flex-direction:column;
}
.cell:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 28px rgba(95,212,196,0.14), 0 10px 30px rgba(3,17,28,0.55);
}

/* hoard sediment texture on select cells */
.cell-saidlist,.cell-tidepool,.cell-voicememo,.cell-quote{
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(95,212,196,0.08) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--brass) 0 2px, transparent 2.5px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--brass) 0 2px, transparent 2.5px);
  background-color:var(--hadal);
}

/* explicit asymmetric placement */
.c-1{grid-column:1 / span 4; grid-row:1 / span 3;}    /* love letter */
.c-2{grid-column:5 / span 2; grid-row:1 / span 4;}    /* pressed kelp */
.c-3{grid-column:7 / span 6; grid-row:1 / span 3;}    /* anglerfish */
.c-4{grid-column:1 / span 3; grid-row:4 / span 2;}    /* she said list */
.c-5{grid-column:4 / span 3; grid-row:5 / span 3;}    /* tidepool */
.c-6{grid-column:7 / span 4; grid-row:4 / span 2;}    /* cassette */
.c-7{grid-column:11 / span 2; grid-row:4 / span 4;}   /* polaroid */
.c-8{grid-column:1 / span 3; grid-row:6 / span 3;}    /* anat heart */
.c-9{grid-column:7 / span 4; grid-row:6 / span 3;}    /* big quote */
.c-10{grid-column:4 / span 3; grid-row:8 / span 2;}   /* sea glass shards (overlaps after tidepool ends row 7) */
.c-11{grid-column:11 / span 2; grid-row:8 / span 2;}  /* signature */
.c-12{grid-column:1 / span 6; grid-row:9 / span 2;}   /* voice memo */

/* cell 5 tidepool actually rows 5-7; cell 10 starts row 8 in col4 — fine.
   adjust c-9 and c-12 to not collide: c-9 col7 rows6-8; c-12 col1 span6 rows9-10 collides col1-3 with c-8(rows6-8) ok, col4-6 rows9-10 with c-10(rows8-9) — minor overlap row9 col4-6. Fix c-12: */
.c-12{grid-column:1 / span 5; grid-row:10 / span 2;}
.c-10{grid-column:7 / span 4; grid-row:9 / span 2;}
/* now: c-9 col7 r6-8, c-10 col7 r9-10 — clean. c-11 col11 r8-9. c-12 col1 r10-11. ok */

/* ---- cell 1: love letter ---- */
.letter-line{
  font-family:"Caveat",cursive;
  font-size:clamp(1.6rem,2.6vw,2.3rem);
  font-style:italic;
  line-height:1.3;
  color:var(--bone);
}
.letter-line + .letter-line{margin-top:0.5rem;opacity:0.92;}
.cell-letter{justify-content:center;}

/* ---- cell 2: pressed kelp ---- */
.cell-kelp{align-items:center;text-align:center;}
.pressed-kelp-svg{flex:1;width:auto;max-width:75%;max-height:62%;margin:0.4rem auto 0;}

/* ---- cell 3: anglerfish ---- */
.cell-angler{align-items:flex-start;}
.angler-svg{flex:1;width:60%;max-width:340px;height:auto;margin:0.6rem 0;overflow:visible;}
.cell-angler .hand-label{align-self:flex-end;text-align:right;}

/* ---- cell 4: she said list ---- */
.said-list{list-style:none;font-family:"Cutive Mono",monospace;font-size:0.92rem;line-height:1.55;}
.said-list li{padding-left:1.1rem;position:relative;margin-bottom:0.4rem;color:var(--bone);opacity:0.9;}
.said-list li::before{content:"—";position:absolute;left:0;color:var(--biolum);opacity:0.7;}
.said-list li:last-child{color:var(--biolum);opacity:0.95;}

/* ---- cell 5: tidepool ---- */
.cell-tidepool{align-items:center;}
.tidepool-svg{flex:1;width:auto;max-height:74%;margin:0.3rem auto;overflow:visible;}
.tide-annot{
  position:absolute;
  font-family:"Cutive Mono",monospace;
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--brass);
  opacity:0.8;
}
.tide-a1{top:32%;right:9%;}
.tide-a2{bottom:24%;left:7%;}
.tide-a3{bottom:14%;right:12%;}

/* ---- cell 6: cassette ---- */
.cell-cassette{align-items:center;}
.cassette-svg{flex:1;width:auto;max-height:62%;max-width:90%;margin:0.4rem auto 0;}

/* ---- cell 7: polaroid ---- */
.cell-polaroid{align-items:center;justify-content:flex-start;}
.polaroid{
  background:var(--bone);
  padding:10px 10px 34px;
  margin-top:0.6rem;
  width:88%;
  max-width:140px;
  box-shadow:0 6px 18px rgba(3,17,28,0.5);
  transform:rotate(-2.5deg);
}
.polaroid-window{
  aspect-ratio:1/1;
  background:repeating-linear-gradient(45deg,#d8d2c0,#d8d2c0 8px,#cfc8b4 8px,#cfc8b4 16px);
  display:flex;align-items:center;justify-content:center;
}
.polaroid-missing{
  font-family:"Cutive Mono",monospace;
  font-size:0.6rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:#7a7464;
}
.polaroid-caption{
  font-family:"Caveat",cursive;
  font-size:1.05rem;
  color:#2a2620;
  text-align:center;
  margin-top:8px;
  line-height:1;
}

/* ---- cell 8: anatomical heart ---- */
.cell-heart{align-items:center;}
.anat-heart-svg{flex:1;width:auto;max-height:74%;margin:0.3rem auto;overflow:visible;}
.heart-annot{
  position:absolute;
  font-family:"Cutive Mono",monospace;
  font-size:0.6rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--rose);
  opacity:0.85;
}
.ha-1{top:30%;left:8%;}
.ha-2{top:42%;right:6%;}
.ha-3{bottom:18%;left:10%;}

/* ---- cell 9: big quote ---- */
.cell-quote{justify-content:center;}
.big-quote{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:1.28;
  color:var(--bone);
}
.big-quote em{font-style:italic;}

/* ---- cell 10: sea-glass shards ---- */
.cell-seaglass{align-items:center;}
.shards-svg{flex:1;width:auto;max-height:60%;max-width:92%;margin:0.4rem auto 0;}

/* ---- cell 11: signature ---- */
.cell-signature{align-items:flex-start;}
.sig-svg{flex:1;width:100%;max-height:56%;margin:0.5rem 0;overflow:visible;}
#sig-path{
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
}
.sig-svg.drawn #sig-path{
  animation:draw-on 3.4s ease forwards;
}
@keyframes draw-on{to{stroke-dashoffset:0;}}

/* ---- cell 12: voice memo ---- */
.cell-voicememo{justify-content:center;align-items:center;}
.memo-jar{
  display:flex;
  align-items:center;
  gap:1.4rem;
  border:1px solid var(--brass);
  border-radius:var(--specimen-radius);
  background:rgba(3,17,28,0.5);
  box-shadow:inset 0 0 24px rgba(95,212,196,0.08);
  padding:1.1rem 1.6rem;
}
.memo-time{
  font-family:"Cutive Mono",monospace;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  color:var(--biolum);
  letter-spacing:0.04em;
}
.memo-wave{display:flex;align-items:center;gap:4px;height:34px;}
.memo-wave span{
  width:3px;
  background:var(--biolum);
  opacity:0.7;
  border-radius:2px;
  animation:memo-pulse 1.6s ease-in-out infinite;
}
.memo-wave span:nth-child(1){height:30%;animation-delay:0s;}
.memo-wave span:nth-child(2){height:70%;animation-delay:.12s;}
.memo-wave span:nth-child(3){height:45%;animation-delay:.24s;}
.memo-wave span:nth-child(4){height:90%;animation-delay:.36s;}
.memo-wave span:nth-child(5){height:55%;animation-delay:.48s;}
.memo-wave span:nth-child(6){height:80%;animation-delay:.6s;}
.memo-wave span:nth-child(7){height:35%;animation-delay:.72s;}
.memo-wave span:nth-child(8){height:65%;animation-delay:.84s;}
.memo-wave span:nth-child(9){height:25%;animation-delay:.96s;}
@keyframes memo-pulse{0%,100%{transform:scaleY(0.5);}50%{transform:scaleY(1);}}

/* ============================================================
   THE DRIFT (BUBBLE BAND)
   ============================================================ */
.drift{
  position:relative;
  height:130px;
  background:linear-gradient(180deg,var(--trench),var(--hadal),var(--trench));
  overflow:hidden;
}
.bubble{
  position:absolute;
  bottom:-20px;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(232,226,208,0.6), rgba(95,212,196,0.18) 60%, transparent 70%);
  animation:rise linear infinite;
}
.b1{left:6%;width:6px;height:6px;animation-duration:9s;animation-delay:0s;}
.b2{left:14%;width:10px;height:10px;animation-duration:11s;animation-delay:1.4s;}
.b3{left:22%;width:5px;height:5px;animation-duration:8s;animation-delay:.6s;}
.b4{left:31%;width:9px;height:9px;animation-duration:12s;animation-delay:2.2s;}
.b5{left:40%;width:7px;height:7px;animation-duration:10s;animation-delay:.2s;}
.b6{left:49%;width:11px;height:11px;animation-duration:13s;animation-delay:1.8s;}
.b7{left:58%;width:6px;height:6px;animation-duration:9s;animation-delay:.9s;}
.b8{left:66%;width:8px;height:8px;animation-duration:11s;animation-delay:2.6s;}
.b9{left:74%;width:5px;height:5px;animation-duration:8.5s;animation-delay:.4s;}
.b10{left:82%;width:10px;height:10px;animation-duration:12.5s;animation-delay:1.2s;}
.b11{left:90%;width:7px;height:7px;animation-duration:10.5s;animation-delay:2s;}
.b12{left:96%;width:6px;height:6px;animation-duration:9.5s;animation-delay:.7s;}
@keyframes rise{
  0%{transform:translate(0,0);opacity:0;}
  10%{opacity:0.9;}
  50%{transform:translate(14px,-65px);}
  90%{opacity:0.6;}
  100%{transform:translate(-10px,-150px);opacity:0;}
}

/* ============================================================
   THE SPECIMEN WALL (CLOSING)
   ============================================================ */
.wall{
  position:relative;
  padding:5rem 0 7rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26,77,92,0.16), transparent 55%),
    var(--trench);
}
.movement-label-light{color:var(--biolum);opacity:0.7;}
.wall-column{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:540px;
  margin:0 auto;
  padding:0 1.5rem;
}
.placard{
  padding:14px 20px;
  border-left:2px solid var(--brass);
  background:rgba(10,37,64,0.4);
  border-radius:0 6px 6px 0;
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.placard.in{opacity:1;transform:none;}
.placard-label{
  display:block;
  font-family:"Cutive Mono",monospace;
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--biolum);
  opacity:0.7;
  margin-bottom:0.25rem;
}
.placard-text{
  font-family:"Space Grotesk",sans-serif;
  font-size:0.98rem;
  color:var(--bone);
  line-height:1.5;
}
.placard-final{
  margin-top:1.4rem;
  border-left-color:var(--rose);
  background:rgba(122,59,74,0.16);
  position:relative;
  padding:22px 20px;
}
.final-text{
  font-family:"Bodoni Moda",serif;
  font-weight:800;
  font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-0.03em;
  color:var(--bone);
}
.strike-svg{
  position:absolute;
  left:0;right:0;
  bottom:50%;
  width:100%;
  height:40px;
  transform:translateY(50%);
  overflow:visible;
}
#strike-path{
  stroke-dasharray:300;
  stroke-dashoffset:300;
}
.placard-final.in .strike-svg #strike-path{
  animation:draw-strike 1.6s ease .5s forwards;
}
@keyframes draw-strike{to{stroke-dashoffset:0;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .bento-grid{grid-auto-rows:auto;}
  .cell{grid-column:1 / -1 !important;grid-row:auto !important;min-height:160px;}
  .cell-letter,.cell-quote{min-height:200px;}
  .kelp-1{left:-4%;}
  .kelp-3{right:-2%;}
}
@media (max-width:600px){
  body{font-size:15px;}
  .trench-inner{padding:0 6vw;}
  .memo-jar{flex-direction:column;gap:0.8rem;padding:1rem 1.2rem;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  .kelp,.bubble,.trench-scroll,.memo-wave span{animation:none !important;}
  #sig-path,#strike-path{stroke-dashoffset:0 !important;}
  .placard{opacity:1;transform:none;}
}