/* glamour.css — shared styles */

@font-face {
  font-family: 'HappyTimesNG';
  src: url('https://freight.cargo.site/m/V2939264761732086313089066407476/happy-times-NG_regular_master.woff2') format('woff2');
  font-weight: 400; font-style: normal;
}

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

html { font-size:14px; }
@media (min-width:769px) { html { font-size:clamp(12px, 1.0vw, 16px); } }

#chrome-sample {
  position:fixed; bottom:0; left:0; right:0;
  height:1%; background:#f4ff7f;
  z-index:2147483647; pointer-events:none;
}
@media (min-width:769px) { #chrome-sample { display:none; } }

body {
  background:#ffffff; overflow:hidden;
  width:100vw; height:100vh; cursor:default;
  font-family:'HappyTimesNG', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400;
  letter-spacing:-0.05em;
}

#page-fade {
  position:fixed; inset:0; background:#ffffff;
  opacity:0; pointer-events:none; z-index:999;
  transition:opacity 0.35s ease;
}
#page-fade.out { opacity:1; pointer-events:all; }

/* ── SPECTRAL ── */
.spec-wrap {
  position:fixed; top:0; left:0;
  pointer-events:none; opacity:0; overflow:hidden;
  width:0; height:0;
}
.spec-inner {
  position:absolute;
  background: repeating-linear-gradient(
    to bottom,
    #f4ff7f 0px,  #f4ff7f 3px,
    #d1d7aa 3px,  #d1d7aa 8px,
    #84cad3 8px,  #84cad3 14px,
    #7ba9af 14px, #7ba9af 18px,
    #84cad3 18px, #84cad3 24px,
    #d1d7aa 24px, #d1d7aa 29px,
    #f4ff7f 29px, #f4ff7f 33px,
    #7ba9af 33px, #7ba9af 37px,
    #84cad3 37px, #84cad3 43px,
    #d1d7aa 43px, #d1d7aa 48px,
    #f4ff7f 48px, #f4ff7f 52px,
    #7ba9af 52px, #7ba9af 57px,
    #84cad3 57px, #84cad3 63px,
    #f4ff7f 63px, #f4ff7f 67px,
    #d1d7aa 67px, #d1d7aa 72px,
    #7ba9af 72px, #7ba9af 76px,
    #84cad3 76px, #84cad3 82px,
    #f4ff7f 82px, #f4ff7f 86px,
    #d1d7aa 86px, #d1d7aa 91px,
    #7ba9af 91px, #7ba9af 95px,
    #84cad3 95px, #84cad3 100px
  );
  background-size:100vw 100px;
  filter:blur(3.5px);
  mix-blend-mode:normal;
}

/* ── DESKTOP NAV ── */
#nav-container {
  position:fixed; left:5%; top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:6vh 0 0; z-index:25;
}
#top-links {
  display:flex; flex-direction:column;
  opacity:1; pointer-events:none;
}
.nav-group {
  display:flex; flex-direction:column; align-items:flex-start;
  margin-bottom:1.4em;
}
.nav-text {
  font-size:1rem;
  line-height:1.55; color:#111; text-decoration:none;
  display:inline-block; align-self:flex-start;
  cursor:pointer; white-space:nowrap; font-weight:400;
  letter-spacing:-0.05em;
  transition:color 0.15s ease;
  position:relative;
}
.nav-text:hover { color:#ff2d8f; }
.nav-text.active { color:#111; }
.nav-text.active:hover { color:#ff2d8f; }

#active-highlight-desktop {
  position:fixed; z-index:23;
  background:#f4ff7f; pointer-events:none;
  opacity:0; transition:opacity 0.5s ease;
}
#spec-desktop { z-index:24; }

#bottom-name {
  position:fixed; left:5%; bottom:7%;
}

/* ── MOBILE ── */
#mobile-trigger {
  cursor:pointer;
  font-size:1rem;
  line-height:1.55; color:#111;
  font-weight:400; white-space:nowrap;
  background:transparent; border:none; padding:0; margin:0;
  -webkit-tap-highlight-color:transparent;
  transition:color 0.15s ease;
}
#mobile-trigger { pointer-events:auto; }
#mobile-trigger:hover { color:#ff2d8f; }

#spec-trigger { z-index:202 !important; }

#mobile-overlay {
  display:none; position:fixed; inset:0; height:100dvh;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.45) 100%);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}
#mobile-overlay.open { opacity:1; pointer-events:all; }

#active-highlight-mobile {
  position:fixed; z-index:201;
  background:#f4ff7f; pointer-events:none;
  opacity:0; transition:opacity 0.5s ease;
}
#spec-overlay { z-index:202; }

#mobile-menu-inner {
  display:none;
  position:fixed; left:calc(5vw + 8px); top:0; right:0; bottom:0;
  flex-direction:column; justify-content:flex-end;
  padding-bottom:3dvh;
  z-index:203;
  pointer-events:none;
}

.mobile-nav-group {
  display:flex; flex-direction:column; align-items:flex-start;
  margin-bottom:1.4em;
}
.mobile-nav-group:last-child { margin-bottom:0; }
.mobile-nav-link {
  font-size:1rem !important;
}

@media (max-width:768px) {
  #nav-container            { display:none; }
  #spec-desktop             { display:none; }
  #bottom-name              { display:none; }
  #active-highlight-desktop { display:none; }
  #mobile-menu-inner        { display:flex; }
  #mobile-overlay           { display:block; }
  #spec-trigger             { display:block; }
}

/* ── CAPTION ── */
.caption a { color:inherit; text-decoration:underline; }
.caption a:hover { color:#ff2d8f; }

/* ── NAV NEXT ── */
#btn-next, #mobile-btn-next { color:#888; }
#viewer-btn-exit, #viewer-btn-next { color:#888; }