/* ============================================================
   SIX MONTHS — cinematic looping scroll-scrub
   Design system by ui-ux-pro-max: Scroll-Triggered Storytelling
   + Motion-Driven style · Romance-rose palette (building intensity)
   + Noto Serif JP / Noto Sans JP typography
   ============================================================ */
:root{
  /* Cinematic dark base */
  --void:#0B0A0C;
  --ink:#FBEFF3;
  --ink-dim:rgba(251,239,243,0.58);
  --ink-faint:rgba(251,239,243,0.30);

  /* ui-ux-pro-max romance palette (per-chapter intensity) */
  --rose-soft:#EC4899;   /* Chapter I  — the meeting  */
  --rose-deep:#BE185D;   /* Chapter II — the journey  */
  --love-red:#DC2626;    /* Chapter III— closeness    */

  /* Live accent — swapped per chapter by JS */
  --accent:#EC4899;
  --accent-2:#BE185D;

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --font-display:"Noto Serif JP", Georgia, serif;
  --font-body:"Noto Sans JP", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Global accent transition sells the "building intensity" chapter shift */
.tint, .hud__dot, .loopring__fg, .loopring__idx, .rail__progress,
.chapter__index, .intro__title span, .climax__btn, .loader__fill{
  transition:color 0.6s var(--ease), background 0.6s var(--ease),
             stroke 0.6s var(--ease), border-color 0.6s var(--ease),
             box-shadow 0.6s var(--ease);
}

/* ---------- Scroll driver ---------- */
.scroll-driver{ height:1200vh; width:1px; pointer-events:none; }

/* ---------- Film canvas ---------- */
.film{
  position:fixed; inset:0; width:100vw; height:100vh; display:block;
  z-index:1; background:var(--void);
  image-rendering:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* ---------- Chapter color tint (progressive reveal) ---------- */
.tint{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 60%, transparent 40%, var(--accent) 160%);
  opacity:0.14; mix-blend-mode:soft-light;
}

/* ---------- Filmic overlays ---------- */
.vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(6,4,6,0.60) 100%),
    linear-gradient(to bottom, rgba(6,4,6,0.42) 0%, transparent 20%, transparent 76%, rgba(6,4,6,0.60) 100%);
}
.grain{
  position:fixed; inset:-50%; z-index:4; pointer-events:none; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.6s steps(2) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-3%,2%); }
  50%{ transform:translate(2%,-3%); } 75%{ transform:translate(-2%,-2%); }
  100%{ transform:translate(3%,3%); }
}
.letterbox{
  position:fixed; left:0; right:0; z-index:5; height:5.2vh; pointer-events:none;
  background:var(--void);
}
.letterbox--top{ top:0; box-shadow:0 1px 0 rgba(236,72,153,0.14); }
.letterbox--bottom{ bottom:0; box-shadow:0 -1px 0 rgba(236,72,153,0.14); }

/* ---------- Loop bloom (masks the seamless wrap) ---------- */
.bloom{
  position:fixed; inset:0; z-index:12; pointer-events:none; opacity:0;
  background:radial-gradient(70% 60% at 50% 50%, var(--love-red), var(--rose-deep) 55%, var(--void) 100%);
}

/* ---------- HUD brand ---------- */
.hud{ position:fixed; z-index:7; pointer-events:none; display:flex; align-items:center; gap:0.6rem; }
.hud--brand{
  top:calc(5.2vh + 1.1rem); left:2rem; opacity:0; transform:translateY(-6px);
  transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hud--brand.is-on{ opacity:1; transform:translateY(0); }
.hud__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px 1px var(--accent); animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.hud__title{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.32em; }
.hud__sub{ font-family:var(--font-display); font-style:italic; font-size:0.95rem; color:var(--ink-dim); margin-left:0.4rem; }

/* ---------- Signature: circular loop-ring ---------- */
.loopring{
  position:fixed; z-index:7; right:2rem; top:calc(5.2vh + 1.4rem);
  width:88px; height:88px; opacity:0; transition:opacity 0.8s var(--ease); pointer-events:none;
}
.loopring.is-on{ opacity:1; }
.loopring svg{ transform:rotate(-90deg); overflow:visible; }
.loopring__bg{ fill:none; stroke:rgba(251,239,243,0.14); stroke-width:3; }
.loopring__fg{
  fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  filter:drop-shadow(0 0 5px var(--accent));
  transition:stroke-dashoffset 0.15s linear, stroke 0.6s var(--ease);
}
.loopring__center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.loopring__idx{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; line-height:1; color:var(--accent); }
.loopring__lbl{ font-family:var(--font-mono); font-size:0.5rem; letter-spacing:0.2em; color:var(--ink-faint); }

/* ---------- Depth rail ---------- */
.rail{
  position:fixed; z-index:7; right:2.55rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.9rem;
  opacity:0; transition:opacity 0.8s var(--ease); pointer-events:none;
}
.rail.is-on{ opacity:1; }
.rail__track{ position:relative; width:2px; height:30vh; background:rgba(251,239,243,0.14); border-radius:2px; }
.rail__progress{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--accent), var(--accent-2)); border-radius:2px;
  box-shadow:0 0 10px var(--accent);
}
.rail__tick{ position:absolute; left:50%; width:8px; height:1px; background:var(--ink-faint); transform:translate(-50%,-50%); }
.rail__readout{ display:flex; flex-direction:column; align-items:center; gap:0.25rem; }
.rail__tc{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; }
.rail__frame{ font-family:var(--font-mono); font-size:0.5rem; letter-spacing:0.16em; color:var(--ink-faint); }

/* ---------- Chapter card ---------- */
.chapter{
  position:fixed; z-index:6; left:2.4rem; bottom:15vh;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.chapter.is-on{ opacity:1; transform:translateY(0); }
.chapter__index{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.3em; color:var(--accent);
  display:block; margin-bottom:0.5rem;
}
.chapter__label{
  font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,5.5vw,4.4rem);
  line-height:0.98; letter-spacing:0.01em; text-shadow:0 2px 30px rgba(0,0,0,0.6);
}
.chapter__month{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:1.1rem; color:var(--ink-dim); display:block; margin-top:0.5rem; }

/* ---------- Rolling caption ---------- */
.caption{ position:fixed; z-index:6; left:50%; bottom:9.5vh; transform:translateX(-50%); width:min(82vw,760px); text-align:center; pointer-events:none; }
.caption__line{
  font-family:var(--font-display); font-weight:300; font-size:clamp(1.15rem,2.6vw,1.85rem); line-height:1.4; color:var(--ink);
  text-shadow:0 2px 24px rgba(0,0,0,0.72);
  opacity:0; transform:translateY(10px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.caption__line.is-on{ opacity:1; transform:translateY(0); }

/* ---------- Intro card ---------- */
.intro{
  position:fixed; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:1.4rem; padding:8vh 6vw;
  background:radial-gradient(120% 90% at 50% 40%, rgba(11,10,12,0.12), rgba(11,10,12,0.74));
  transition:opacity 0.6s var(--ease); pointer-events:none;
}
.intro__eyebrow{ display:none; }
.intro__title{
  font-family:var(--font-display); font-weight:300; line-height:0.84;
  font-size:clamp(4.2rem,16vw,14rem); letter-spacing:0.01em; text-shadow:0 6px 60px rgba(0,0,0,0.6);
  opacity:0; transform:translateY(10px);
}
.intro__title span{ display:block; font-weight:500; font-style:italic; color:var(--accent); }
.intro__lede{ display:none; }
.intro__cue{ display:none; }
.intro__cueline{ width:1px; height:40px; background:linear-gradient(var(--accent),transparent); animation:cue 2.2s var(--ease) infinite; }
.intro__chevron{ color:var(--accent); animation:bob 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0; } 40%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; } }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:0.6; } 50%{ transform:translateY(4px); opacity:1; } }
@keyframes introReveal{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
.intro.is-ready .intro__title{ animation:introReveal 0.95s var(--ease) 0.1s forwards; }

/* ---------- Loop climax card ---------- */
.climax{
  position:fixed; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:1.3rem; padding:10vh 6vw;
  background:radial-gradient(120% 90% at 50% 45%, rgba(11,10,12,0.30), rgba(11,10,12,0.90));
  opacity:0; visibility:hidden; transition:opacity 0.8s var(--ease), visibility 0.8s var(--ease); pointer-events:none;
}
.climax.is-on{ opacity:1; visibility:visible; }
.climax.is-on .climax__btn{ pointer-events:auto; }
.climax__eyebrow{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.34em; color:var(--accent); }
.climax__title{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.2rem,6vw,5rem); line-height:1.04; letter-spacing:0.01em; }
.climax__note{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.05rem,2.3vw,1.5rem); color:var(--ink-dim); line-height:1.5; }
.climax__btn{
  margin-top:0.8rem; cursor:pointer; display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.24em; color:var(--ink);
  background:transparent; border:1px solid var(--accent); padding:0.85rem 1.6rem; border-radius:999px;
  transition:all 0.3s var(--ease);
}
.climax__btn:hover{ background:var(--accent); color:#fff; box-shadow:0 0 24px -4px var(--accent); }
.climax__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.climax__credit{ font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.2em; color:var(--ink-faint); margin-top:1.4rem; }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:20; background:var(--void); display:flex; align-items:center; justify-content:center; transition:opacity 0.9s var(--ease), visibility 0.9s var(--ease); }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(78vw,420px); display:flex; flex-direction:column; gap:1.1rem; }
.loader__mark{ font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.5em; color:var(--ink); text-align:center; }
.loader__bar{ height:2px; width:100%; background:rgba(251,239,243,0.12); overflow:hidden; }
.loader__fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--rose-soft),var(--love-red)); transition:width 0.25s linear; }
.loader__meta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.26em; color:var(--ink-dim); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{ display:none; }
  .hud__dot, .intro__cueline, .intro__chevron{ animation:none; }
  .intro__eyebrow, .intro__title, .intro__lede, .intro__cue{
    opacity:1; transform:none; animation:none !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .rail__track{ height:24vh; }
}
@media (max-width:768px){
  .hud--brand{ left:1.3rem; }
  .loopring{ right:1.2rem; width:72px; height:72px; }
  .loopring svg{ width:72px; height:72px; }
  .rail{ right:1.4rem; }
}
@media (max-width:640px){
  .hud__sub{ display:none; }
  .rail{ display:none; }
  .chapter{ left:1.3rem; bottom:17vh; }
  .caption{ bottom:12vh; }
  .letterbox{ height:3vh; }
  .loopring{ top:calc(3vh + 1rem); }
}