/* ── CUSTOM FONTS ── */
@font-face { font-family: '2008';                 src: url('Suva Fontid/2008.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Apollo-Regular';       src: url('Suva Fontid/Apollo-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Dahlia-bold';          src: url('Suva Fontid/Dahlia-bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Dahlia-thin';          src: url('Suva Fontid/Dahlia-thin.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'J-Sansv1.6-Regular';  src: url('Suva Fontid/J-Sansv1.6-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Kollektiiv-Collective';src: url('Suva Fontid/Kollektiiv-Collective.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Lambiseim-Regular';    src: url('Suva Fontid/Lambiseim-Regular.woff2') format('woff2'), url('Suva Fontid/Lambiseim-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Leimzy-Regular';       src: url('Suva Fontid/Leimzy-Regular.woff2') format('woff2'), url('Suva Fontid/Leimzy-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Napulo-Regular';       src: url('Suva Fontid/Napulo-Regular.woff2') format('woff2'), url('Suva Fontid/Napulo-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Nocturnal';            src: url('Suva Fontid/Nocturnal.woff2') format('woff2'), url('Suva Fontid/Nocturnal.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'ReinGrotesk-Light';    src: url('Suva Fontid/ReinGrotesk-Light.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'ReinGrotesk-Regular';  src: url('Suva Fontid/ReinGrotesk-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'StereoSans';           src: url('Suva Fontid/StereoSans.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Varenyky-Regular';     src: url('Suva Fontid/Varenyky-Regular.woff2') format('woff2'), url('Suva Fontid/Varenyky-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Yoga-Regular';         src: url('Suva Fontid/Yoga-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'dap';                  src: url('Suva Fontid/dap.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'fairytype';            src: url('Suva Fontid/fairytype.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'fallengum';            src: url('Suva Fontid/fallengum.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'fontenstein-regular';  src: url('Suva Fontid/fontenstein-regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'gog-regular';          src: url('Suva Fontid/gog-regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'helipleumon';          src: url('Suva Fontid/helipleumon.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'idreamofletters';      src: url('Suva Fontid/idreamofletters.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'imogen';               src: url('Suva Fontid/imogen.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'kandi';                src: url('Suva Fontid/kandi_3.0_bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'kykeon';               src: url('Suva Fontid/kykeon.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'lopsakas-regular';     src: url('Suva Fontid/lopsakas-regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'molot';                src: url('Suva Fontid/molot.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'naps';                 src: url('Suva Fontid/naps.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'ofortuna';             src: url('Suva Fontid/ofortuna.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'owlcave';              src: url('Suva Fontid/owlcave.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'sens';                 src: url('Suva Fontid/sens.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'shattered';            src: url('Suva Fontid/shattered.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'sigella';              src: url('Suva Fontid/sigella.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'sirkel-regular';       src: url('Suva Fontid/sirkel-regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'toiletpapertype';      src: url('Suva Fontid/toiletpapertype.woff') format('woff'); font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #080808;
  --border: rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.2);
  --muted: rgba(255,255,255,0.28);
  --box-bg: #111111;
}
html, body {
  background: var(--bg); color: #fff;
  font-family: 'Arial Narrow', 'ArialNarrow', Arial, sans-serif;
  font-weight: bold;
  height: 100%; overflow: hidden; user-select: none; cursor: none;
}

/* Custom cursor */
#cur {
  position: fixed; width: 7px; height: 7px; background: #fff;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
}

/* ── SCROLLER ── */
#scroller {
  position: fixed; inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
#scroller::-webkit-scrollbar { display: none; }

/* ── INTRO SECTION ── */
#intro-section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
#grid-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.grid-col { position: absolute; top: 0; bottom: 0; width: .5px; background: rgba(255,255,255,0.04); }
.grid-row { position: absolute; left: 0; right: 0; height: .5px; background: rgba(255,255,255,0.04); }
#scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.18); top: 0; opacity: 0; pointer-events: none;
}

.intro-title {
  display: flex; flex-wrap: wrap; justify-content: center;
  line-height: 1; padding: 0 40px;
}
.intro-ch {
  font-size: clamp(36px, 6.5vw, 90px); color: #fff;
  display: inline-block; opacity: 0; line-height: 1;
}
.intro-deco-t { position: absolute; top: 0;    left: 50%; transform: translate(-50%, -50%); }
.intro-deco-b { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,  50%); }
.intro-deco-l { position: absolute; left: 0;   top: 50%;  transform: translate(-50%, -50%); }
.intro-deco-r { position: absolute; right: 0;  top: 50%;  transform: translate( 50%, -50%); }
.intro-space { display: inline-block; width: clamp(16px, 2.5vw, 40px); }
.intro-sub { font-size: 10px; letter-spacing: .28em; color: rgba(255,255,255,0.3); margin-top: 28px; opacity: 0; }
.scroll-cue {
  position: absolute; bottom: 36px; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: none;
}
.scroll-arrow {
  width: 32px; height: 32px;
  animation: arrowBounce 1.6s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ── DECORATIVE CIRCLES ── */
.deco-circle {
  position: absolute; width: 58px; height: 58px;
  background: #1400ff; border-radius: 50%; z-index: 20;
  pointer-events: none;
}
.deco-top    { top: 88px; left: 50%; transform: translate(-50%, 0); pointer-events: auto; cursor: none; transition: opacity .18s; }
.deco-top:hover { opacity: .7; }
.deco-left   { left: 0;   top: 65%; transform: translate(-50%, -50%); pointer-events: auto; cursor: none; transition: opacity .18s; }
.deco-right  { right: 0;  top: 65%; transform: translate(50%,  -50%); pointer-events: auto; cursor: none; transition: opacity .18s; }
.deco-bottom { pointer-events: none; transition: opacity .2s ease; }

.deco-bottom-wrap {
  /* same position the original circle had */
  position: absolute; bottom: 0; left: 50%;
  transform: translate(-50%, 50%);
  width: 130px; height: 58px;
  pointer-events: auto; cursor: none; z-index: 20;
  overflow: visible;
}
/* circle sits at top of wrapper, centred */
.deco-bottom-wrap .deco-bottom {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
/* SVG overlays the same spot — arc centred on circle centre (65, 29 in wrapper coords) */
.deco-dl-svg {
  position: absolute;
  top: -42px;          /* arc top = 42px above circle centre = well above visible circle */
  left: 50%; transform: translateX(-50%);
  width: 130px; height: 100px;
  overflow: visible;
  opacity: 0; transition: opacity .2s ease;
}
.deco-bottom-wrap:hover .deco-bottom { opacity: 0; }
.deco-bottom-wrap:hover .deco-dl-svg { opacity: 1; }
.deco-left:hover, .deco-right:hover { opacity: .7; }

/* ── FONT INFO PANEL ── */
.font-info {
  position: absolute; top: 88px; left: 0; right: 0; z-index: 14;
  background: rgba(8,8,8,0.97); border-bottom: .5px solid rgba(255,255,255,0.1);
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .38s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.font-info.open { max-height: 160px; opacity: 1; pointer-events: auto; }
.fi-inner {
  padding: 28px 40px 32px; display: flex; align-items: center; gap: 52px;
}
.fi-name {
  font-size: clamp(28px, 4vw, 52px); line-height: 1; color: #fff; white-space: nowrap;
  flex-shrink: 0;
}
.fi-hint { font-size: 9px; letter-spacing: .22em; color: rgba(255,255,255,0.25); }
.fi-meta { display: flex; flex-direction: column; gap: 7px; }
.fi-row {
  font-size: 8px; letter-spacing: .18em; color: rgba(255,255,255,0.28);
  display: flex; gap: 10px;
}
.fi-row span { color: rgba(255,255,255,0.72); }

/* ── MAIN SECTION ── */
#main-section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  overflow: hidden; opacity: 0; flex-shrink: 0;
  position: relative;
}

header {
  height: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; border-bottom: .5px solid var(--border);
  letter-spacing: .04em; font-size: clamp(44px, 6.5vw, 82px);
  font-family: 'Arial Narrow', 'ArialNarrow', Arial, sans-serif;
  font-weight: bold; text-transform: uppercase;
}
.h-item { display: inline-block; opacity: 0; transform: translateY(-8px); }
header .brand { font-weight: bold; }

.main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }


/* Font strip */
.strip-section { flex-shrink: 0; position: relative; padding: 14px 40px 0; opacity: 0; }
.strip-outer { overflow: hidden; border: 1.5px solid var(--border2); border-radius: 12px; position: relative; }
.strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.strip::-webkit-scrollbar { display: none; }

.fc {
  min-width: 180px; height: 90px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px 16px 10px; scroll-snap-align: start; cursor: none;
  border-right: .5px solid var(--border); position: relative; overflow: hidden;
  flex-shrink: 0; transition: background .2s;
}
.fc:last-child { border-right: none; }
.fc:hover { background: rgba(255,255,255,0.03); }
.fc.active { background: rgba(255,255,255,0.06); }
.fc.active::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: #fff; opacity: .7;
}
.fc-deco {
  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  font-size: 72px; line-height: 1; opacity: .22; color: #fff;
  pointer-events: none; transition: opacity .3s, font-size .3s; white-space: nowrap;
}
.fc.active .fc-deco { opacity: .32; font-size: 78px; }
.fc-idx { font-size: 8px; letter-spacing: .18em; color: rgba(255,255,255,0.2); font-variant-numeric: tabular-nums; }
.fc-name { font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,0.30); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-style { font-size: 8px; letter-spacing: .1em; color: rgba(255,255,255,0.25); text-transform: uppercase; }
.fc-glyphs { display: flex; gap: 3px; align-items: baseline; }
.fc-glyph { font-size: 11px; color: rgba(255,255,255,0.35); transition: color .2s; }
.fc.active .fc-glyph { color: rgba(255,255,255,0.65); }
.strip-fade { position: absolute; top: 0; bottom: 0; width: 50px; pointer-events: none; z-index: 2; }
.strip-fade-l { left: 0; background: linear-gradient(to right, rgba(8,8,8,.9), transparent); }
.strip-fade-r { right: 0; background: linear-gradient(to left, rgba(8,8,8,.9), transparent); }
.strip-dots { display: flex; gap: 4px; justify-content: center; padding-top: 10px; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background .25s, width .25s; cursor: none; }
.dot.active { background: rgba(255,255,255,0.7); width: 16px; border-radius: 2px; }

/* Display row with nav arrows */
.display-row {
  flex-shrink: 0; display: flex; align-items: stretch; gap: 0;
  padding: 10px 0;
}
.nav-arrow {
  background: none; border: none; color: #1400ff; font-size: 28px;
  cursor: none; padding: 0 22px; opacity: 0.8;
  transition: opacity .18s; flex-shrink: 0; line-height: 1;
}
.nav-arrow:hover { opacity: 1; }

/* Specimen */
.specimen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: scroll; scrollbar-width: none;
  gap: 10px; padding: 0 40px 24px;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.specimen::-webkit-scrollbar { display: none; }
.specimen.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.display-box {
  flex: 1; border: 1.5px solid rgba(255,255,255,0.18); border-radius: 12px;
  padding: 24px 36px; display: flex; align-items: center; justify-content: center;
  background: var(--box-bg); position: relative; overflow: hidden;
  align-self: stretch;
}
.display-box::after {
  content: attr(data-font); position: absolute; right: 14px; bottom: 8px;
  font-size: 8px; letter-spacing: .12em; color: rgba(255,255,255,0.15); pointer-events: none;
}
.dt {
  font-size: 48px; color: #fff; letter-spacing: .02em;
  line-height: 1.15; outline: none; transition: font-family .32s cubic-bezier(.16,1,.3,1);
  white-space: normal; text-align: center; word-break: break-word; width: 100%;
}
.dt:empty::before { content: attr(data-ph); opacity: .18; }

.glyph-box {
  flex-shrink: 0; height: 110px; background: var(--box-bg); border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 12px; overflow: hidden; display: none; flex-direction: column;
}
.glyph-inner { padding: 14px 18px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sec-lbl { font-size: 8px; letter-spacing: .2em; color: rgba(255,255,255,0.25); margin-bottom: 8px; flex-shrink: 0; }
.gg { display: flex; flex-wrap: wrap; flex: 1; align-content: center; overflow: hidden; scrollbar-width: none; transition: opacity .22s ease; }
.gg::-webkit-scrollbar { display: none; }
.g {
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .92; cursor: none; line-height: 1;
  transition: font-family .32s cubic-bezier(.16,1,.3,1);
}
.g:hover { transform: scale(1.18); opacity: 1; z-index: 2; position: relative; }

.num-box {
  flex-shrink: 0; height: 80px; background: var(--box-bg); border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 12px; padding: 0 20px; display: none; align-items: center;
}
.ng { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.n {
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .92; cursor: none; line-height: 1; flex: 1;
  transition: font-family .32s cubic-bezier(.16,1,.3,1);
}
.n:hover { transform: scale(1.14); opacity: 1; }

/* Glyph zoom popup */
.glyph-popup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,8,0.88); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; cursor: none;
}
.glyph-popup-ch {
  font-size: clamp(180px, 28vw, 380px);
  color: #fff; line-height: 1; user-select: none;
}

/* ── GLYPH SECTION (section 3) ── */
#glyph-section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  position: relative; flex-shrink: 0;
  overflow: hidden;
}
.gs-stage {
  flex: 1; position: relative;
}
.gs-ring {
  position: absolute;
  border: 12px solid #1400ff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gs-alpha-ring {
  width: 44vw; height: 44vw;
  left: 4vw; top: 3vh;
}
.gs-num-ring {
  width: 34vw; height: 34vw;
  right: 4vw; bottom: 3vh;
}
.gs-char {
  color: #fff; line-height: 1; user-select: none;
  transition: font-family .32s cubic-bezier(.16,1,.3,1);
}
.gs-alpha-ring .gs-char { font-size: 34vw; }
.gs-num-ring   .gs-char { font-size: 26vw; }

/* Glyph section slide-in displays */
.gs-display {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  z-index: 10;
}
.gs-display-inner {
  width: 88vw;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 32px 40px;
  background: var(--box-bg);
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.gs-display-inner--nums { flex-wrap: nowrap; }
.gs-pc {
  color: #fff; line-height: 1; user-select: none;
  font-size: 7vw;
  display: flex; align-items: center; justify-content: center;
  width: calc(88vw / 9);
  height: calc(88vw / 9 * 1.05);
}
.gs-display-inner--nums .gs-pc {
  font-size: 8vw;
  width: calc(88vw / 10);
  height: 10vw;
}

/* Animations */
.specimen.revealing .g { animation: glyphIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes glyphIn {
  0%  { opacity: 0; transform: translateY(8px) scale(.93); }
  100%{ opacity: .92; transform: none; }
}