/* ————————————————————————————————————————————————
   Super Junior: The Last Man Standing
   Pearl paper, sapphire ink, hairlines, no boxes.
   ———————————————————————————————————————————————— */

@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/bodoni-moda-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif KR";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-serif-kr-600-subset.woff2") format("woff2");
  unicode-range: U+addc, U+b2c8, U+b3d9, U+b824, U+c131, U+c288, U+c2dc, U+c2e0, U+c5b4, U+c608, U+c6b1, U+c6d0, U+c740, U+c774, U+c8fc, U+cca0, U+d2b9, U+d37c, U+d574, U+d601, U+d604, U+d76c;
}

:root {
  --paper: #F3F2EE;
  --ink: #16181D;
  --muted: rgba(22, 24, 29, 0.56);
  --faint: rgba(22, 24, 29, 0.34);
  --hair: rgba(22, 24, 29, 0.14);
  --sapphire: #123A9E;

  --deep: #0A0D16;              /* footer sea */
  --pearl-on-deep: #E9E9E3;
  --muted-on-deep: rgba(233, 233, 227, 0.52);
  --hair-on-deep: rgba(233, 233, 227, 0.16);

  --serif: "Bodoni Moda", "Noto Serif KR", serif;
  --sans: "Archivo", sans-serif;
  --kr: "Noto Serif KR", serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo.out — reveals   */
  --ease-swift: cubic-bezier(0.625, 0.05, 0, 1);   /* hovers, small moves  */

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(6rem, 14vw, 13rem);

  --label: 0.6875rem;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 380;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sapphire); color: var(--paper); }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ——— finishing layers ——— */

.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress { display: none; }

@supports (animation-timeline: scroll()) {
  .progress {
    display: block;
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 100%; height: 1px;
    background: var(--sapphire);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ——— labels, markers ——— */

.head-mark, .head-time,
.hero-label, .marker, .ocean-label,
.member-num, .member-role, .member-year,
.event-date, .event-place, .event-type, .calendar-note,
.hero-meta, .index-note, .ocean-credits h2, .ocean-line {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 500;
  font-stretch: 125%;   /* Archivo wdth axis — engraved-plaque labels */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

.marker { color: var(--muted); }

/* ——— header ——— */

.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding: 1.1rem var(--gutter) 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}

.head-time { color: var(--muted); }
.head-time time { color: var(--ink); }

/* ——— hero ——— */

.hero {
  position: relative;
  min-height: calc(100svh - 3.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) 0;
}

.hero-label { color: var(--muted); }

.hero-title {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(3rem, 10.5vw, 10.25rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: auto;
  padding-block: clamp(2rem, 5vh, 4rem);
}

/* the title recedes as you scroll; the hangul counter-moves — two-layer depth */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-title {
      animation: hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
      will-change: transform;
    }
    @keyframes hero-recede {
      to { transform: translateY(15vh); opacity: 0; }
    }
    .hero-hangul {
      animation: hangul-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
      will-change: transform;
    }
    @keyframes hangul-rise {
      to { transform: translateY(calc(-50% - 5vh)); }
    }
  }
}

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: clamp(0.8rem, 1.4vw, 1.05rem);
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

.line { display: block; overflow: hidden; }
.line-inner { display: block; }

.hero-hangul {
  position: absolute;
  top: 50%; right: calc(var(--gutter) * 0.4);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--kr);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  letter-spacing: 0.6em;
  color: var(--faint);
}

@media (max-width: 900px) { .hero-hangul { display: none; } }

.hero-meta {
  position: relative;
  display: flex; flex-wrap: wrap;
  gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 1.2rem;
  color: var(--muted);
}

.hero-meta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}

/* ——— sections ——— */

.members {
  padding: var(--section) var(--gutter);
}

.marker { display: block; margin-bottom: clamp(2rem, 4vw, 3.5rem); }





/* ——— member index ——— */

.index { list-style: none; position: relative; }

.index::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}

.member {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 4rem 13.5rem 4.5rem;
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1rem, 2.2vw, 1.6rem);
  cursor: default;
}

.member::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}

.member-num { color: var(--faint); }

.member-name {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  transition: transform 0.45s var(--ease-swift), color 0.45s var(--ease-swift);
}

.member-kr {
  font-family: var(--kr);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  color: var(--muted);
}

.member-role, .member-year { color: var(--muted); }
.member-year { text-align: right; }

@media (hover: hover) and (pointer: fine) {
  .index:has(.member:hover) .member:not(:hover) { opacity: 0.32; }
  .member { transition: opacity 0.45s var(--ease-swift); }
  .member:hover .member-name {
    transform: translateX(0.35em);
    color: var(--sapphire);
  }
}

@media (max-width: 760px) {
  .member {
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
      "num name year"
      "num meta meta";
    row-gap: 0.3rem;
  }
  .member-num  { grid-area: num; }
  .member-name { grid-area: name; }
  .member-year { grid-area: year; }
  .member-kr   { display: none; }
  .member-role { grid-area: meta; }
}

.index-note {
  margin-top: 1.2rem;
  color: var(--faint);
}

/* the hovered member's hangul, ghosted in the margin */
.kr-ghost {
  position: fixed;
  right: clamp(1rem, 4vw, 5rem);
  bottom: clamp(1rem, 6vh, 4rem);
  z-index: 40;
  pointer-events: none;
  font-family: var(--kr);
  font-weight: 600;
  font-size: clamp(6rem, 16vw, 15rem);
  line-height: 1;
  color: var(--sapphire);
  opacity: 0;
  transform: translateY(0.08em);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.kr-ghost.on { opacity: 0.10; transform: none; }


/* ——— the year: calendar ——— */

.calendar { padding: 0 var(--gutter) var(--section); }

.agenda { list-style: none; position: relative; }

.agenda::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}

.event {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 14rem 6.5rem;
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(0.8rem, 1.6vw, 1.1rem);
}

.event::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}

.event-date { color: var(--muted); white-space: nowrap; }

.event-title {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.event-place { color: var(--muted); }
.event-type { color: var(--faint); text-align: right; }

/* the year so far, already sung */
.event.past :is(.event-title, .event-date, .event-place, .event-type) { opacity: 0.38; }

/* where the year stands — inserted by JS between past and upcoming */
.today-rule {
  position: relative;
  display: flex; align-items: center; gap: 0.9rem;
  padding-block: 0.55rem;
}
.today-rule::before,
.today-rule::after { content: none; }
.today-rule .today-line {
  flex: 1; height: 1px;
  background: var(--sapphire);
  opacity: 0.55;
}
.today-rule .today-label {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sapphire);
}

.calendar-note {
  margin-top: 1.2rem;
  color: var(--faint);
}

@media (max-width: 760px) {
  .event {
    grid-template-columns: 6.5rem 1fr;
    grid-template-areas:
      "date title"
      "date meta";
    row-gap: 0.25rem;
  }
  .event-date  { grid-area: date; }
  .event-title { grid-area: title; }
  .event-place { grid-area: meta; }
  .event-type  { display: none; }
}

/* ——— footer: the blue ocean ——— */

.ocean {
  position: relative;
  background: var(--deep);
  color: var(--pearl-on-deep);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter) 2rem;
  overflow: hidden;
}

/* fallback sea for no-JS / no-canvas — replaced by the dithered field when it boots */
.ocean::before {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 70%;
  background: radial-gradient(75% 90% at 50% 115%, rgba(28, 74, 190, 0.38), transparent 70%);
  pointer-events: none;
  animation: tide 9s ease-in-out infinite alternate;
}

@keyframes tide {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

.ocean.has-field::before { content: none; }

/* the Blue Ocean field — Bayer-dithered sapphire lightsticks, drawn 1px per cell
   and upscaled; the radial mask turns each cell into a round dot */
.ocean-field {
  position: absolute; top: 0; left: 0; z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  -webkit-mask-image: radial-gradient(circle, #000 33%, transparent 37%);
  -webkit-mask-size: var(--cell, 9px) var(--cell, 9px);
  mask-image: radial-gradient(circle, #000 33%, transparent 37%);
  mask-size: var(--cell, 9px) var(--cell, 9px);
}

.ocean > :not(.ocean-field) { position: relative; z-index: 1; }

.ocean-label { color: var(--muted-on-deep); }

.ocean-title {
  font-family: var(--serif);
  font-weight: 440;
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem);
  text-wrap: balance;
}

.ocean-title em { font-style: italic; font-weight: 400; }

.ocean-credits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  padding-top: 1.4rem;
}

.ocean-credits::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair-on-deep);
  transform-origin: left;
}

@media (max-width: 760px) { .ocean-credits { grid-template-columns: 1fr; } }

.ocean-credits h2 { color: var(--muted-on-deep); margin-bottom: 0.6rem; }
.ocean-credits p { font-size: 0.9rem; line-height: 1.6; max-width: 34ch; }

.ocean-line {
  margin-top: clamp(3rem, 6vw, 5rem);
  color: var(--muted-on-deep);
}

/* ————————————————————————————————————————————————
   Motion. Hidden states exist only when JS is on.
   ———————————————————————————————————————————————— */

.js .line-inner {
  transform: translateY(112%);
  transition: transform 1.1s var(--ease-out);
}
.js .line:nth-child(3) .line-inner { transition-delay: 110ms; }
.js body.loaded .line-inner { transform: none; }

.js .kicker, .js .hero-label, .js .hero-meta, .js .site-head, .js .hero-hangul {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.js .kicker { transition-delay: 250ms; }
.js .hero-label, .js .site-head { transition-delay: 450ms; }
.js .hero-meta, .js .hero-hangul { transition-delay: 600ms; }
.js body.loaded :is(.kicker, .hero-label, .hero-meta, .site-head, .hero-hangul) { opacity: 1; }

.js .hero-meta::before {
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-out) 800ms;
}
.js body.loaded .hero-meta::before { transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.95s var(--ease-out) var(--d, 0ms),
    transform 0.95s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* hairlines draw themselves as their sections arrive */
.js .index::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.js .index:has(.member.is-in)::before { transform: none; }

.js .member[data-reveal]::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) var(--d, 0ms);
}
.js .member.is-in::after { transform: none; }

.js .agenda::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.js .agenda:has(.event.is-in)::before { transform: none; }

.js .event[data-reveal]::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) var(--d, 0ms);
}
.js .event.is-in::after { transform: none; }


.js .ocean-credits[data-reveal]::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 120ms;
}
.js .ocean-credits.is-in::before { transform: none; }

/* ——— reduced motion: content first, always ——— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .line-inner,
  .js [data-reveal],
  .js .kicker, .js .hero-label, .js .hero-meta, .js .site-head, .js .hero-hangul {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero-meta::before,
  .js .index::before,
  .js .agenda::before,
  .js .member[data-reveal]::after,
  .js .event[data-reveal]::after,
  .js .ocean-credits[data-reveal]::before {
    transform: none !important;
    transition: none !important;
  }
  .ocean::before { animation: none; }
  .kr-ghost { transition: none; }
  .member, .member-name { transition: none; }
}