* { box-sizing: border-box; margin: 0; padding: 0 }
:root {
  --bg:#000; --fg:#fff; --muted:#aaaaaa; --accent:#f2e8cf;
  --c-overview:#6a994e; --c-method:#a7c957; --c-about:#bc4749;
}
html, body { height:100%; background:var(--bg); color:var(--fg); font-family:'Montserrat',sans-serif }

/* ---------- COVER ---------- */
/* Full-page sections */
main { height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory }
section {
  height:100vh; display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start; position:relative; padding:6vw; text-align:center
}

/* Cover */
.cover h1,.cover h2,.cover p { font-family:'Space Grotesk',sans-serif }
h1,h2 { font-weight:800; line-height:1.2 }
h1 { font-size:clamp(28px,5vw,56px) }
h2 { font-size:clamp(22px,4vw,36px) }
p { max-width:80ch; line-height:1.8 }

.cover { overflow:hidden }
.cover video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25 }
.cover .content { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; align-items:center }

.nav { position:fixed; top:18px; right:18px; display:flex; gap:8px; z-index:10 }
.nav a {
  background:rgba(255,255,255,.06); color:var(--fg); padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); text-decoration:none; font-weight:600; font-size:14px
}
.nav a.active { outline:2px solid var(--accent) }

.hint { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted) }

/* ------------------------------------------------------
/* ---------- Section 2: Research Framework ---------- */
.sec-title { position:absolute; top:20px; left:40px; text-align:left }

.framework{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "heading heading heading"
    "row     row     row";
  column-gap:20px;
  row-gap: clamp(28px, 6vh, 120px);
  align-items:start;
  width:90vw;
  max-width:1600px;
  margin-inline:auto;
}

.rf-heading{
  grid-area:heading;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:6px;
}

.rf-text{
  max-width: min(160ch, 100%);
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
  text-align: left;     /* left align */
  white-space: pre-line;
}
.rf-text .highlight{
  color: var(--accent);      
  font-weight: 700;      
}

.rf-row{
  grid-area:row;
  display:grid;
  grid-template-columns: 1.8fr 1.2fr 40px 1fr;
  gap:20px; align-items:stretch;

  min-height: clamp(320px, 46vh, 500px);
}


.rf-progress{
  grid-column:3;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.rf-progress .bar{
  position:relative;
  width:12px;
  height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}
.rf-progress .bar[data-idle="true"] .fill::after{
  animation-play-state: paused;
  opacity: .2;
}
.rf-progress .fill{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:0%;                  
  background:linear-gradient(180deg, var(--accent), #8fd5ff);
  transition:height 220ms ease;
}
.rf-progress .fill::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.18) 0 10px,
      rgba(255,255,255,0)   10px 20px);
  animation:rfStripe 1.1s linear infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.rf-progress .bar[data-full="true"] .fill::after{
  animation-duration: 2.2s;
  opacity:.4;
}

@keyframes rfStripe {
  from { background-position: 0 0; }
  to   { background-position: 40px 0; }
}


.rf-img   { grid-column:1 }


.rf-video{
  width:100%; height:100%; display:block;
  object-fit:cover;
  border-radius:12px;
  background:#000;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 14px rgba(0,0,0,.55);
}

.rf-table { grid-column:2 }


.rf-slot  { grid-column:4; display:flex; align-items:center; justify-content:center; min-width:240px }


.img-box, .diagram-box, .score-box { height:100%; border-radius:12px }
.img-box{
  background:#fff; color:#111; border:2px dashed #999;
  display:flex; align-items:center; justify-content:center
}


.diagram-box{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);
  padding:14px; width:100%;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  overflow:auto;
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:14px }
.row .label{ font-weight:600; text-align:left }
.row .typing{ text-align:left; min-height:20px; opacity:.9 }


/* ---- SLOT MACHINE / ODOMETER ---- */
.score-box{
  display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center
}
.score-heading{color: #f2e8cf; font-size:24px; font-weight:700; margin:0 0 10px; text-align:center }

.odometer{
  display:flex; gap:10px; position:relative; filter:drop-shadow(0 6px 20px rgba(0,0,0,.35));
}

.wheel{
  position:relative; width:54px; height:72px; min-width:54px; min-height:72px;
  border-radius:12px; overflow:hidden;
  background:radial-gradient(120% 140% at 30% 20%,#1a1a1a,#0b0b0b 70%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 25px rgba(0,0,0,.6),
             0 6px 14px rgba(0,0,0,.55);
}
.wheel:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%,transparent 65%,rgba(255,255,255,.06));
  pointer-events:none
}

/* Animated digit stack */
.digit{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(0);
}
.digit span{
  display:block; height:72px; line-height:72px; width:100%; text-align:center;
  font-weight:800; font-size:48px; color:#eaeaea;
  text-shadow:0 1px 0 #000,0 0 14px rgba(255,255,255,.08)
}

@keyframes spin { from{transform:translateY(0)} to{transform:translateY(-720px)} }
.digit.spin { animation:spin 2400ms linear infinite }

/* Mobile */
@media(max-width:900px){
  .framework{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "heading"
      "row";
  }
  .rf-row{
    display:flex; flex-direction:column; gap:20px; min-height:auto;
  }
  .img-box,.diagram-box,.score-box{ height:auto; max-height:46vh }
}

/* Nav active outline per section-group */
.nav a.active { outline:2px solid var(--accent) }
[data-section-group="overview"] .nav a.active { outline-color:var(--c-overview); color:var(--c-overview) }
[data-section-group="method"]   .nav a.active { outline-color:var(--c-method);   color:var(--c-method) }
[data-section-group="about"]    .nav a.active { outline-color:var(--c-about);    color:var(--c-about) }