/* =========================================================
   index.css (single merged stylesheet for index page)
   ========================================================= */

:root{
  --bg: #e8e9ea;
  --text: #555;
  --muted: #777;

  /* big letters (light stage) */
  --big: rgba(0,0,0,0.055);

  /* nav */
  --nav-name: #444;
  --nav-desc: #666;
  --arrow: #777;

  /* gold glow */
  --gold-1: #ffe9a6;
  --gold-2: #ffd36b;
  --gold-3: #ffb84a;
  --gold-4: #fff3c6;
  --gold-glow: rgba(255, 198, 70, 0.55);
  --gold-glow-2: rgba(255, 225, 160, 0.35);

  /* folder background (light stage) */
  --folder-bg: rgba(255,255,255,0.00);
  --folder-bg-hover: rgba(255,255,255,0.18);
  --folder-bg-active: rgba(255,255,255,0.26);
}

/* Dark stage (JS toggles this class during the glow sequence) */
body.index_page.is-dark-stage{
  --bg: #0b0b0c;
  --text: #b9b9b9;
  --muted: rgba(255,255,255,0.55);

  --big: rgba(255,255,255,0.085);

  --nav-name: #e2e2e2;
  --nav-desc: #b5b5b5;
  --arrow: #9a9a9a;

  --folder-bg: rgba(255,255,255,0.06);
  --folder-bg-hover: rgba(255,255,255,0.10);
  --folder-bg-active: rgba(255,255,255,0.14);
}

html, body { height: 100%; }
body.index_page{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", Arial, sans-serif;
  transition: background-color 2500ms ease, color 2500ms ease;
  -webkit-tap-highlight-color: transparent;
}

body.index_page a{
  color: inherit;
  text-decoration: none;
}

.index_page .wrapper{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 40px;
  box-sizing: border-box;
}

/* =========================================================
   Visual layers (never catch clicks)
   ========================================================= */
.index_page #aura-canvas{
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.index_page .aura-vignette{
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background: radial-gradient(circle at 40% 40%,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.00) 45%,
    rgba(0,0,0,0.10) 75%,
    rgba(0,0,0,0.12) 100%);
}

.index_page .aura-grain{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* =========================================================
   Big letters
   ========================================================= */
.index_page .bg-text{
  position: absolute;
  font-size: 22vw;
  font-weight: 800;
  line-height: 0.8;
  color: var(--big);
  user-select: none;
  pointer-events: none; /* CRITICAL: never steal taps */
  text-shadow: 0 0 20px rgba(0,0,0,0.03);
  z-index: 1;
}

.index_page .bg-aura{ top: 0; left: 0; }

.index_page .bg-tot{
  bottom: 5%;
  right: 0;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;

  /* CRITICAL: do not steal taps even if it overlaps */
  pointer-events: none;
}

/* Only avatar itself can be clicked */
.index_page .avatar-in-tot,
.index_page .avatar-in-tot *{
  pointer-events: auto;
}

.index_page .bg-tot .tot-part{
  font: inherit;
  color: inherit;
  line-height: inherit;
  pointer-events: none;
}

/* Avatar */
.index_page .avatar-in-tot{
  width: 22vw;
  height: 22vw;
  min-width: 100px;
  min-height: 100px;
  max-width: 300px;
  max-height: 300px;
  margin: 0 -4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  touch-action: manipulation;
}

.index_page .avatar-in-tot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.10);
  transition: transform 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.12));
  will-change: transform;
  cursor: pointer;
}

.index_page .avatar-in-tot img:hover{
  transform: scale(1.06);
  border-color: rgba(255,255,255,0.22);
}

.index_page .avatar-fallback{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  color: #333;
  font-weight: 800;
}

/* =========================================================
   Title (top-right on desktop)
   ========================================================= */
.index_page .title-top{
  position: absolute;
  top: 90px;
  right: 160px;
  z-index: 10;

  font-size: 48px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.0;
  text-align: right;
}
.index_page .title-top .sub{
  font-size: 42px;
  margin-top: -8px;
}

/* =========================================================
   Navigation (desktop)
   ========================================================= */
.index_page .nav{
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 17px;
  z-index: 20; /* above big letters */
}

.index_page .item-link{
  display: block;
  touch-action: manipulation;
}

.index_page .item{
  width: 250px;
  text-align: center;
  border-radius: 14px;
  padding: 10px 10px;
  background: var(--folder-bg);
  transition: background-color 2500ms ease, transform 120ms ease;
}

.index_page .item-link:hover .item{ background: var(--folder-bg-hover); }
.index_page .item-link:active .item{
  background: var(--folder-bg-active);
  transform: scale(0.99);
}

.index_page .item .name{
  font-size: 22px;
  font-weight: 700;
  color: var(--nav-name);
  letter-spacing: 2px;
}

.index_page .item .desc{
  font-size: 14px;
  margin-top: 4px;
  color: var(--nav-desc);
}

.index_page .arrow{
  font-size: 28px;
  color: var(--arrow);
  margin: 0 10px;
  pointer-events: none; /* never block taps */
}

/* Footer */
.index_page .footer{
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-size: 14px;
  color: rgba(0,0,0,0.35);
  z-index: 20;
}
body.index_page.is-dark-stage .footer{
  color: rgba(255,255,255,0.35);
}

/* =========================================================
   GOLD LETTER GLOW (one-by-one)
   ========================================================= */
.index_page .glow-letter{
  display: inline-block;
  position: relative;
  line-height: inherit;
  font: inherit;
  color: inherit;
  transform: translateZ(0);
  will-change: filter, text-shadow, background-position;
}

.index_page .glow-letter.is-active{
  color: transparent;
  background-image: linear-gradient(120deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--gold-4));
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 0 8px var(--gold-glow),
    0 0 18px var(--gold-glow-2);
  filter: drop-shadow(0 0 12px var(--gold-glow));
}

.index_page .glow-letter.is-active::after{
  content: "";
  position: absolute;
  inset: -12% -22%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.00) 35%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0.00) 65%
  );
  transform: translateX(-55%);
  opacity: 0.9;
  mix-blend-mode: overlay;
  animation: shine-sweep 900ms ease-out 1;
}

@keyframes shine-sweep{
  0%   { transform: translateX(-65%); opacity: 0.0; }
  20%  { opacity: 0.85; }
  100% { transform: translateX(65%);  opacity: 0.0; }
}

@media (prefers-reduced-motion: reduce){
  .index_page .glow-letter.is-active::after{ display:none; }
  .index_page .glow-letter.is-active{ filter:none; }
}

/* =========================================================
   MOBILE LAYOUT (3 rows + folders column)
   ========================================================= */
@media (max-width: 768px){

  /* stronger big letters on mobile (you asked: less faint) */
  body.index_page{ --big: rgba(0,0,0,0.085); }
  body.index_page.is-dark-stage{ --big: rgba(255,255,255,0.11); }

  .index_page .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 16px 12px 14px;
  }

  /* Switch from absolute to stacked flow */
  .index_page .bg-aura,
  .index_page .bg-tot,
  .index_page .title-top,
  .index_page .nav,
  .index_page .footer{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Row 1: АУРА */
  .index_page .bg-aura{
    width: 100%;
    text-align: center;
    margin: 8px 0 4px;
    font-size: clamp(64px, 22vw, 128px);
    line-height: 0.92;
  }

  /* Row 2: Т (avatar) Т */
  .index_page .bg-tot{
    width: 100%;
    margin: 6px 0 4px;
    font-size: clamp(68px, 24vw, 140px);
    line-height: 1;
  }

  .index_page .avatar-in-tot{
    width: clamp(96px, 34vw, 160px);
    height: clamp(96px, 34vw, 160px);
    margin: 0 -12px;
  }

  /* Row 3: фрэш / органс */
  .index_page .title-top{
    width: 100%;
    text-align: center;
    margin: 10px 0 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    font-size: 44px;
  }
  .index_page .title-top .sub{
    font-size: 38px;
    margin-top: -6px;
  }

  /* Folders: single column */
  .index_page .nav{
    width: 100%;
    max-width: 420px;
    margin: 10px auto 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    z-index: 30;
  }

  .index_page .item-link{
    width: min(420px, 92vw);
    display: block;
  }

  .index_page .item{
    width: 100%;
    padding: 14px 10px;
  }

  .index_page .arrow{
    width: 100%;
    text-align: center;
    transform: rotate(90deg);
    margin: 0;
    opacity: 0.45;
  }

  /* Footer bottom */
  .index_page .footer{
    margin-top: auto;
    width: 100%;
    padding-top: 12px;
    opacity: 0.70;
    text-align: left;
  }
}


/* =========================================
   DARK STAGE (when letters glow)
   JS toggles: body.index_page.dark-stage
   ========================================= */
body.index_page.dark-stage{
  background: #070708 !important;
  color: rgba(255,255,255,0.78) !important;
}

/* make key UI readable on dark stage */
body.index_page.dark-stage a{ color: rgba(255,255,255,0.82) !important; }
body.index_page.dark-stage a:hover{ color: rgba(255,255,255,0.92) !important; }

body.index_page.dark-stage .title-top{ color: rgba(255,255,255,0.55) !important; }
body.index_page.dark-stage .item .name a{ color: rgba(255,255,255,0.90) !important; }
body.index_page.dark-stage .item .desc{ color: rgba(255,255,255,0.65) !important; }
body.index_page.dark-stage .arrow{ color: rgba(255,255,255,0.45) !important; }
body.index_page.dark-stage .footer{ color: rgba(255,255,255,0.35) !important; }

/* big letters become brighter on dark stage */
body.index_page.dark-stage .bg-text{
  color: rgba(255,255,255,0.085) !important;
}

/* smoother transition (you already have bg transition; add color too) */
body.index_page{
  transition: background-color 2500ms ease, color 2500ms ease;
}

/* Force dark stage to be visible even if wrapper has its own background */
body.index_page.is-dark-stage{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* If any container is painting a light background, override it during stage */
body.index_page.is-dark-stage .wrapper{
  background-color: var(--bg) !important;
}

/* =========================================================
   Desktop overlap fix:
   When viewport is not ultra-wide, move ТОТ up + slightly toward center
   ========================================================= */

/* Default (ultra-wide) can stay as-is */
@media (min-width: 1701px) {
  /* keep your current bottom/right if you like */
}

/* Problem range: typical desktops/laptops */
@media (min-width: 769px) and (max-width: 1700px) {

  /* Ensure nav stays readable and above */
  .index_page .nav { z-index: 50; }

  /* Move ТОТ away from the last folder */
  .index_page .bg-tot{
    bottom: 240px !important;      /* lift it */
    right: 10vw !important;        /* pull toward center */
    z-index: 5;
  }

  /* Slightly reduce avatar so bounding box is smaller */
  .index_page .avatar-in-tot{
    max-width: 240px;
    max-height: 240px;
    min-width: 120px;
    min-height: 120px;
  }
}

/* Extra safety for short heights */
@media (min-width: 769px) and (max-width: 1700px) and (max-height: 850px) {
  .index_page .bg-tot{
    bottom: 280px !important;
  }
}


/* Bulbs */

/* =========================================================
   BULBS FILL MODE (works with your existing JS)
   - Enabled only when: body.index_page.is-dark-stage
   - Uses your existing: .glow-letter and .is-active
   ========================================================= */

/* Optional: disable your old shine sweep while bulbs are used */
body.index_page.is-dark-stage .glow-letter.is-active::after{
  display: none !important;
}

/* --- Dim bulbs for non-active letters (the "off" state) --- */
body.index_page.is-dark-stage .glow-letter{
  /* bulb density: smaller = more bulbs */
  --bulb-step: 16px; /* try 14px for denser, 18px for larger bulbs */

  /* OFF bulb colors */
  --bulb-core: rgba(255, 235, 190, 0.16);
  --bulb-halo: rgba(255, 185, 60, 0.08);

  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;

  background-image:
    radial-gradient(circle,
      var(--bulb-core) 0 20%,
      var(--bulb-halo) 21% 48%,
      rgba(0,0,0,0) 49%);

  background-size: var(--bulb-step) var(--bulb-step);
  background-position: 0 0;

  opacity: 0.55;      /* OFF visibility: set 0 for invisible */
  filter: none;
  text-shadow: none;
}

/* --- Active letter: bulbs ON (gold + glow + flicker) --- */
body.index_page.is-dark-stage .glow-letter.is-active{
  /* ON bulb colors */
  --bulb-core: rgba(255, 250, 220, 0.98);
  --bulb-halo: rgba(255, 185, 60, 0.70);

  opacity: 1;

  filter:
    drop-shadow(0 0 8px rgba(255, 190, 70, 0.60))
    drop-shadow(0 0 18px rgba(255, 190, 70, 0.28));

  animation:
    bulb-flicker 900ms ease-in-out infinite,
    bulb-drift 2600ms linear infinite;
}

/* Flicker: subtle brightness variation */
@keyframes bulb-flicker{
  0%   { filter: drop-shadow(0 0 6px rgba(255,190,70,0.48)) drop-shadow(0 0 16px rgba(255,190,70,0.20)); }
  35%  { filter: drop-shadow(0 0 10px rgba(255,190,70,0.72)) drop-shadow(0 0 22px rgba(255,190,70,0.34)); }
  70%  { filter: drop-shadow(0 0 7px rgba(255,190,70,0.58)) drop-shadow(0 0 18px rgba(255,190,70,0.26)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,190,70,0.48)) drop-shadow(0 0 16px rgba(255,190,70,0.20)); }
}

/* Drift: makes the bulb grid shimmer slightly */
@keyframes bulb-drift{
  0%   { background-position: 0 0; }
  100% { background-position: 16px 16px; }
}

/* Mobile: slightly smaller bulb spacing */
@media (max-width: 768px){
  body.index_page.is-dark-stage .glow-letter{ --bulb-step: 13px; }
}