/* ============================================================
   lov.st — a glitch-aesthetic shrine to digital affection
   watercolour paper + dopamine-neon eruptions
   ============================================================ */

:root{
  --gesso:#fdf6f7;        /* primary canvas */
  --petal:#f6e9f1;        /* sidebar wash */
  --dusk:#ece2f0;         /* deeper watercolour pool */
  --ink:#1a0e1f;          /* primary text — mulberry-black */
  --magenta:#ff2d8a;      /* neon heartbeat flare */
  --mint:#00f0d4;         /* electric mint shock */
  --signal:#fbd95e;       /* signal yellow */
  --lilac:#d8a8c4;        /* bruised lilac midtone */
  --spine-w:clamp(240px,22vw,320px);
  --measure:56ch;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--gesso);
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.125rem;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

::selection{background:var(--magenta);color:var(--gesso);}

/* ========================= SIDEBAR ========================= */
.spine{
  position:fixed;
  top:0;left:0;
  width:var(--spine-w);
  height:100vh;
  overflow-y:auto;
  background:linear-gradient(180deg,#fdf6f7 0%,#f6e9f1 35%,#ece2f0 100%);
  border-right:1px solid rgba(216,168,196,.5);
  z-index:30;
  box-shadow:2px 0 24px rgba(26,14,31,.06);
}
.spine-grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix type='matrix' values='0 0 0 0 0.1  0 0 0 0 0.06  0 0 0 0 0.12  0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity:.4;pointer-events:none;mix-blend-mode:multiply;
}
.spine-inner{
  position:relative;
  padding:2.4rem 1.8rem 2.4rem;
  min-height:100%;
  display:flex;flex-direction:column;
}
.glyph{
  display:block;
  font-family:"Caveat",cursive;
  font-weight:700;
  font-size:clamp(2.6rem,4.4vw,3.6rem);
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  transform:rotate(-2.4deg);
  transform-origin:left center;
  text-shadow:0 0 12px rgba(255,45,138,.25),1px 1px 0 rgba(255,45,138,.12);
  transition:text-shadow .5s ease;
}
.glyph:hover{text-shadow:0 0 18px rgba(255,45,138,.45),2px 1px 0 rgba(0,240,212,.2);}
.spine-sub{
  font-family:"Caveat",cursive;
  font-size:1.1rem;
  color:var(--lilac);
  margin:.9rem 0 2.2rem;
  line-height:1.2;
  transform:rotate(-.8deg);
}

.toc{display:flex;flex-direction:column;gap:.1rem;flex:1;}
.toc-item{
  font-family:"Caveat",cursive;
  font-weight:600;
  font-size:1.5rem;
  line-height:1.1;
  color:var(--ink);
  text-decoration:none;
  padding:.5rem .4rem .5rem .9rem;
  border-left:4px solid transparent;
  position:relative;
  transition:border-color .4s ease,color .3s ease,background .3s ease,transform .3s ease;
}
.toc-item span{
  font-family:"Space Mono",monospace;
  font-size:.62rem;
  color:var(--lilac);
  text-transform:lowercase;
  letter-spacing:.04em;
  margin-right:.4rem;
}
.toc-item::after{
  content:"";position:absolute;left:.9rem;right:.4rem;bottom:.32rem;height:2px;
  background:var(--magenta);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.toc-item:hover{color:var(--magenta);transform:translateX(2px);}
.toc-item:hover::after{transform:scaleX(1);}
.toc-item.active{
  border-left-color:var(--magenta);
  background:rgba(255,45,138,.06);
  color:var(--ink);
}
.toc-item.active::after{transform:scaleX(1);background:var(--mint);}
.toc-wave{display:block;width:100%;height:14px;opacity:.7;margin:.05rem 0;}

.spine-foot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(216,168,196,.5);}
.heartbeat{
  font-family:"Space Mono",monospace;
  font-size:1.05rem;
  letter-spacing:.18em;
  color:var(--magenta);
  opacity:.7;
  white-space:pre;
  margin-bottom:.7rem;
  user-select:none;
}
.heartbeat span{transition:opacity .12s linear;}
.stamp{
  font-family:"Space Mono",monospace;
  font-size:.7rem;
  letter-spacing:.04em;
  text-transform:lowercase;
  color:var(--ink);
  opacity:.65;
  line-height:1.5;
}
.stamp.dim{opacity:.4;}

/* ========================= CANVAS ========================= */
.canvas{
  margin-left:var(--spine-w);
  position:relative;
  cursor:none;
  background:
    radial-gradient(60vw 60vw at 85% 10%,rgba(216,168,196,.10),transparent 60%),
    radial-gradient(50vw 50vw at 5% 60%,rgba(236,226,240,.5),transparent 65%),
    var(--gesso);
}

.progress-vein{
  position:fixed;top:0;left:var(--spine-w);right:0;height:2px;
  background:rgba(216,168,196,.25);z-index:25;
}
.progress-vein span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--magenta),var(--mint));
  transition:width .15s linear;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:160vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-wavefield{
  position:absolute;left:0;right:0;bottom:0;height:60%;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.hero-wavefield .bigwave{width:100%;height:100%;display:block;}
.hero-line{
  position:relative;z-index:2;text-align:center;padding:0 2rem;
  margin-top:-12vh;
}
.hero-text{
  font-family:"Caveat",cursive;
  font-weight:700;
  font-size:clamp(2.4rem,6.5vw,5.6rem);
  line-height:1.05;
  color:var(--ink);
}
.hero-text em{
  font-style:normal;
  position:relative;
  color:var(--ink);
}
.hero-text em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.16em;
  background:var(--mint);opacity:.6;border-radius:2px;
}
.datestamp{
  font-family:"Space Mono",monospace;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:lowercase;
  color:var(--lilac);
  margin-top:2.2rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .8s ease;
}
.datestamp.in{opacity:.8;transform:translateY(0);}
.datestamp.final{opacity:.8;transform:none;color:var(--lilac);margin-top:3rem;}
.scroll-cue{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:lowercase;color:var(--lilac);opacity:.7;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- PASSAGES (progressive disclosure) ---------- */
.passage{
  position:relative;
  min-height:70vh;
  padding:8vh clamp(2rem,7vw,7rem) 8vh;
  display:flex;flex-direction:column;justify-content:center;
}
.fragment{
  font-family:"Caveat",cursive;
  font-weight:500;
  font-size:clamp(2rem,4.6vw,3.8rem);
  line-height:1.12;
  color:var(--ink);
  background:none;border:none;
  text-align:left;
  cursor:none;
  max-width:22ch;
  padding:0;
  position:relative;
  transition:color .4s ease,transform .4s ease;
}
.fragment em{font-style:normal;color:var(--magenta);}
.fragment::after{
  content:" ↴";font-family:"Space Mono",monospace;font-size:.4em;
  color:var(--mint);vertical-align:super;opacity:.7;
}
.fragment:hover{color:var(--magenta);transform:translateX(3px);}
.passage.open .fragment{color:var(--ink);opacity:.55;font-size:clamp(1.7rem,3.4vw,2.6rem);}
.passage.open .fragment::after{opacity:0;}
.passage.open .fragment:hover{opacity:.85;color:var(--magenta);}

.reveal{
  margin-top:0;
  max-height:0;overflow:hidden;
  transition:max-height .9s cubic-bezier(.16,1,.3,1),margin-top .6s ease;
}
.passage.open .reveal{
  max-height:none;
  margin-top:2.6rem;
}
/* fallback when JS uses explicit px height it's set inline; otherwise none */

.reveal .body,.reveal .note,.reveal .divider,.reveal .closer,.reveal .datestamp{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.passage.open .reveal .body,
.passage.open .reveal .note,
.passage.open .reveal .divider,
.passage.open .reveal .closer,
.passage.open .reveal .datestamp{opacity:1;transform:translateY(0);}
/* stagger via inline transition-delay set in JS; default fallback delays */
.reveal>*:nth-child(1){transition-delay:.04s;}
.reveal>*:nth-child(2){transition-delay:.12s;}
.reveal>*:nth-child(3){transition-delay:.20s;}
.reveal>*:nth-child(4){transition-delay:.28s;}
.reveal>*:nth-child(5){transition-delay:.36s;}
.reveal>*:nth-child(6){transition-delay:.44s;}
.reveal>*:nth-child(7){transition-delay:.52s;}

.body{
  font-size:1.125rem;line-height:1.7;max-width:var(--measure);
  margin:1.1rem 0;color:var(--ink);
}
.body+.body{margin-top:1.4rem;}
.emphasize{
  font-weight:500;font-style:italic;color:var(--ink);
  background:linear-gradient(transparent 65%,rgba(255,45,138,.16) 65%);
}
.body .emphasize{position:relative;}

.note{
  font-family:"Caveat",cursive;
  font-style:italic;
  font-size:1.05rem;
  color:var(--lilac);
  line-height:1.3;
  max-width:32ch;
  position:relative;
}
.note-l{margin-left:clamp(-2.5rem,-3vw,-1rem);margin-top:1.6rem;margin-bottom:1.6rem;}
.note-r{margin-left:auto;margin-right:clamp(-2rem,-2vw,0rem);text-align:right;margin-top:1.6rem;margin-bottom:1.6rem;max-width:30ch;}
.note::after{
  content:"";display:block;height:1px;background:var(--lilac);opacity:.5;
  margin-top:.2rem;width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.16,1,.3,1) .3s;
}
.note-r::after{transform-origin:right;}
.passage.open .note::after{transform:scaleX(1);}

.divider{margin:3rem 0 1rem;mix-blend-mode:multiply;}
.divider svg{width:100%;height:60px;display:block;overflow:visible;}

.closer{
  font-family:"Caveat",cursive;
  font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  line-height:1.15;
  color:var(--ink);
  max-width:24ch;
  margin:2.4rem 0 0;
}

/* ---------- pigment blobs ---------- */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
.blob-a{
  width:42vw;height:42vw;max-width:560px;max-height:560px;
  top:-8vh;right:-12vw;
  background:radial-gradient(circle,rgba(255,45,138,.18) 0%,transparent 65%);
  animation:drift1 41s ease-in-out infinite;
}
.blob-b{
  width:38vw;height:38vw;max-width:520px;max-height:520px;
  bottom:-10vh;left:-10vw;
  background:radial-gradient(circle,rgba(216,168,196,.30) 0%,transparent 65%);
  animation:drift2 53s ease-in-out infinite;
}
.blob-c{
  width:46vw;height:46vw;max-width:600px;max-height:600px;
  top:20vh;right:-16vw;
  background:radial-gradient(circle,rgba(0,240,212,.14) 0%,transparent 65%);
  animation:drift3 67s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-4vw,5vh) scale(1.08);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5vw,-4vh) scale(1.12);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-3vw,-6vh) scale(1.06);}}

/* ---------- glitch rupture ---------- */
.glitch-active{
  animation:chroma .6s steps(8) forwards;
  position:relative;
}
@keyframes chroma{
  0%   { text-shadow:0 0 transparent; clip-path:inset(0); }
  10%  { text-shadow:3px 0 #ff2d8a,-3px 0 #00f0d4; clip-path:inset(20% 0 30% 0); }
  20%  { text-shadow:-2px 0 #ff2d8a,2px 0 #00f0d4; clip-path:inset(60% 0 10% 0); }
  35%  { text-shadow:4px 0 #ff2d8a,-4px 0 #00f0d4; clip-path:inset(0 0 70% 0); }
  50%  { text-shadow:-3px 0 #fbd95e,3px 0 #00f0d4; clip-path:inset(35% 0 40% 0); }
  70%  { text-shadow:2px 0 #ff2d8a,-2px 0 #00f0d4; clip-path:inset(10% 0 5% 0); }
  100% { text-shadow:0 0 transparent; clip-path:inset(0); }
}

/* ---------- footer ---------- */
.canvas-foot{
  padding:14vh clamp(2rem,7vw,7rem) 16vh;
  border-top:1px solid rgba(216,168,196,.4);
  margin-top:6vh;
}
.canvas-foot .stamp{font-size:.74rem;margin:.3rem 0;}

/* ---------- ink-blot cursor ---------- */
.ink-cursor{
  position:fixed;top:0;left:0;width:12px;height:12px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 12px 4px rgba(255,45,138,.45);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  opacity:0;
  transition:opacity .25s ease,width .2s ease,height .2s ease;
  mix-blend-mode:multiply;
}
.ink-cursor.visible{opacity:1;}
.ink-cursor.hot{width:20px;height:20px;box-shadow:0 0 18px 6px rgba(255,45,138,.6);}

/* ========================= RESPONSIVE ========================= */
@media (max-width:880px){
  :root{--spine-w:100%;}
  body{font-size:1.06rem;}
  .spine{
    position:relative;height:auto;width:100%;
    border-right:none;border-bottom:1px solid rgba(216,168,196,.5);
  }
  .spine-inner{padding:1.8rem 1.4rem;}
  .toc{flex-direction:row;flex-wrap:wrap;gap:.4rem 1rem;}
  .toc-item{font-size:1.2rem;border-left:none;border-bottom:3px solid transparent;padding:.2rem .3rem;}
  .toc-item.active{border-left:none;border-bottom-color:var(--magenta);}
  .toc-item::after{display:none;}
  .toc-wave{display:none;}
  .spine-foot{margin-top:1.6rem;}
  .canvas{margin-left:0;cursor:auto;}
  .progress-vein{left:0;}
  .hero{min-height:120vh;}
  .ink-cursor{display:none;}
  .note-l,.note-r{margin-left:0;margin-right:0;text-align:left;}
}

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::after,*::before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal{max-height:none!important;overflow:visible!important;margin-top:2.6rem!important;}
  .reveal .body,.reveal .note,.reveal .divider,.reveal .closer,.reveal .datestamp{opacity:1!important;transform:none!important;}
  .passage .fragment{opacity:.55;}
  .note::after{transform:scaleX(1)!important;}
  .datestamp{opacity:.8!important;transform:none!important;}
  .blob{display:none;}
  .scroll-cue{display:none;}
  .ink-cursor{display:none;}
  .canvas{cursor:auto;}
  .fragment{cursor:pointer;}
}