/* ============================================================
   CHROME — loader, top frame, menu canvas, transition veil
   ============================================================ */

/* ---- LOADER ---------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: var(--z-trans);
  background: var(--obsidian);
  display: grid; place-items: center;
}
.loader[hidden] { display: none; }
.loader__inner { text-align: center; }

.loader__roles {
  height: 1.2em;
  overflow: hidden;
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.loader__role {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transform: translateY(100%);
}
.loader__name {
  margin-top: 0.5em;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream);
  overflow: hidden;
  line-height: 1.1;
}
.loader__name span { display: inline-block; transform: translateY(105%); }

.loader__bar {
  margin: 1.7em auto 0;
  width: min(220px, 42vw); height: 1px;
  background: color-mix(in srgb, var(--cream) 18%, transparent);
  position: relative; overflow: hidden;
}
.loader__bar i {
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
}

/* ---- TOP FRAME ------------------------------------------- */
.frame {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 2.4vh, 1.9rem) var(--bleed);
  mix-blend-mode: difference;        /* legible over every world */
  color: #fff;
  pointer-events: none;
}
.frame > * { pointer-events: auto; }

.frame__mark {
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--f-mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.frame__monogram {
  font-family: var(--f-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  line-height: 1;
}
.frame__right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }

.frame__status {
  font-family: var(--f-mono); font-size: var(--step--2);
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.55;
}
@media (max-width: 760px) { .frame__status { display: none; } }

/* Menu toggle — label swaps, two rules reconfigure */
.menu-btn {
  display: flex; align-items: center; gap: 0.75em;
  font-family: var(--f-mono); font-size: var(--step--2);
  letter-spacing: 0.24em; text-transform: uppercase;
}
.menu-btn__word { position: relative; display: block; height: 1.2em; overflow: hidden; width: 4.4em; text-align: right; }
.menu-btn__word span {
  position: absolute; right: 0; top: 0;
  transition: transform var(--t-ui) var(--e-out), opacity var(--t-ui) var(--e-out);
}
.menu-btn__word span:last-child { transform: translateY(100%); opacity: 0; }
.is-menu-open .menu-btn__word span:first-child { transform: translateY(-100%); opacity: 0; }
.is-menu-open .menu-btn__word span:last-child  { transform: translateY(0); opacity: 1; }

.menu-btn__glyph { position: relative; width: 22px; height: 9px; flex: none; }
.menu-btn__glyph i {
  position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform var(--t-ui) var(--e-inout);
}
.menu-btn__glyph i:first-child { top: 0; }
.menu-btn__glyph i:last-child  { bottom: 0; }
.is-menu-open .menu-btn__glyph i:first-child { transform: translateY(4px) rotate(9deg); }
.is-menu-open .menu-btn__glyph i:last-child  { transform: translateY(-4px) rotate(-9deg); }

/* ---- MENU CANVAS ----------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--obsidian);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-cine) var(--e-mask),
              visibility 0s linear var(--t-cine),
              background-color var(--t-cine) var(--e-glide);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(6rem, 16vh, 10rem) var(--bleed) var(--bleed);
  overflow: hidden;
}
.is-menu-open .menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--t-cine) var(--e-mask),
              visibility 0s,
              background-color var(--t-cine) var(--e-glide);
}

.menu__list { align-self: center; position: relative; z-index: 2; }

.menu__link {
  display: flex; align-items: baseline; gap: 0.8em;
  padding-block: clamp(0.1rem, 0.6vh, 0.45rem);
  position: relative;
}
.menu__idx {
  font-family: var(--f-mono); font-size: var(--step--2);
  letter-spacing: 0.2em; color: var(--gold);
  opacity: 0.45; transition: opacity var(--t-ui) var(--e-out);
  min-width: 2.8em; flex: none;
}
.menu__word {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8.6vw, 7rem);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.02em;
  color: var(--cream);
  display: block; position: relative;
  transition: transform 520ms var(--e-out), opacity var(--t-ui) var(--e-out);
}
/* Outline ghost trailing the solid word */
.menu__word::after {
  content: attr(data-word);
  position: absolute; left: 0; top: 0;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 72%, transparent);
  color: transparent;
  opacity: 0; transform: translate3d(0, 0, 0);
  transition: opacity var(--t-ui) var(--e-out), transform 560ms var(--e-out);
  pointer-events: none;
}
.menu__note {
  font-family: var(--f-mono); font-size: var(--step--2);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 52%, transparent);
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out);
  align-self: center;
}
@media (max-width: 620px) { .menu__note { display: none; } }

.menu.has-hover .menu__word { opacity: 0.26; }
.menu__item.is-hot .menu__word { opacity: 1; transform: translateX(clamp(8px, 1.6vw, 26px)); }
.menu__item.is-hot .menu__word::after { opacity: 1; transform: translate3d(-11px, 7px, 0); }
.menu__item.is-hot .menu__idx { opacity: 1; }
.menu__item.is-hot .menu__note { opacity: 1; transform: translateX(0); }

/* Preview that answers the hovered word */
.menu__preview {
  position: absolute; z-index: 1;
  top: 50%; right: clamp(2rem, 8vw, 9rem);
  width: clamp(180px, 21vw, 330px); aspect-ratio: 3 / 4;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
}
.menu__preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.14);
  transition: opacity 640ms var(--e-out), transform 980ms var(--e-out);
}
.menu__preview img.is-on { opacity: 0.88; transform: scale(1); }
@media (max-width: 940px) { .menu__preview { display: none; } }

.menu__foot {
  display: flex; flex-wrap: wrap; gap: 1.2em; justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  padding-top: 1.2em;
  position: relative; z-index: 2;
}
.menu__foot .meta { color: color-mix(in srgb, var(--cream) 50%, transparent); }
.menu__socials { display: flex; gap: 1.4em; }

/* ---- TRANSITION VEIL ------------------------------------- */
.veil {
  position: fixed; inset: 0; z-index: var(--z-trans);
  pointer-events: none;
  display: grid; place-items: center;
  visibility: hidden;
}
.veil__flood {
  position: absolute; inset: 0;
  background: var(--forest-deep);
  transform: scaleY(0); transform-origin: bottom center;
}
.veil__rule {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
}
.veil__word {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 11vw, 9rem);
  color: var(--cream);
  letter-spacing: -0.02em;
  opacity: 0;
  line-height: 1;
}