/* ===== Immersive layer: intro, receding name, sound ===== */

/* "lonfy" name — starts exactly like the original logo, then recedes into the
   background (grows + blurs + fades) and parks there as you scroll. JS aligns it. */
#bigName{position:fixed;left:50%;top:44%;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--font);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-size:clamp(3.5rem,10vw,8rem);
  background:linear-gradient(180deg,#fff 30%,#888 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:0;transform:translate(-50%,-50%);will-change:transform,filter,opacity}
#bigName .nav__dot{-webkit-text-fill-color:var(--g5)}
[data-theme="light"] #bigName{background:linear-gradient(180deg,#111 30%,#888 100%);-webkit-background-clip:text;background-clip:text}

/* real H1 stays as-is and scrolls normally; #bigName is the background echo that
   only appears once you scroll down */

/* lock scroll until user enters */
body.preload{overflow:hidden;height:100vh}

/* ===== Intro overlay ===== */
#intro{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,#0a0a0a 0%,#000 70%);transition:opacity 1s var(--ease),visibility 1s}
[data-theme="light"] #intro{background:radial-gradient(ellipse 80% 80% at 50% 50%,#fafafa 0%,#fff 70%)}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}

.intro__logo{font-size:clamp(3rem,9vw,6.5rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(180deg,#fff 25%,#777 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(20px);animation:introUp 1.1s var(--ease) .2s forwards}
[data-theme="light"] .intro__logo{background:linear-gradient(180deg,#111 25%,#999 100%);-webkit-background-clip:text;background-clip:text}
.intro__logo .nav__dot,.intro__logo span{-webkit-text-fill-color:var(--g5)}
.intro__tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--g4);margin-top:18px;
  opacity:0;animation:introUp 1.1s var(--ease) .45s forwards}

.intro__bar{width:min(280px,60vw);height:1px;background:var(--g3);margin-top:42px;position:relative;overflow:hidden;
  opacity:0;animation:introUp 1.1s var(--ease) .6s forwards}
.intro__bar i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,transparent,#fff);transition:right .4s linear}
[data-theme="light"] .intro__bar i{background:linear-gradient(90deg,transparent,#111)}
.intro__pct{font-family:var(--mono);font-size:.7rem;color:var(--g5);margin-top:14px;opacity:0;animation:introUp 1.1s var(--ease) .6s forwards}

.intro__enter{margin-top:38px;padding:0;width:auto;opacity:0;pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transform:translateY(10px)}
.intro__enter.ready{opacity:1;pointer-events:auto;transform:translateY(0)}
.intro__enter button{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--white);
  background:transparent;border:1px solid var(--glass-border);border-radius:100px;padding:16px 40px;cursor:pointer;
  transition:all .4s var(--ease);position:relative;overflow:hidden}
.intro__enter button:hover{border-color:var(--white);letter-spacing:.3em}
.intro__enter button::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.12),transparent 70%);opacity:0;transition:opacity .4s}
.intro__enter button:hover::after{opacity:1}
.intro__hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--g5);margin-top:16px;opacity:0;transition:opacity .6s .3s}
.intro__enter.ready ~ .intro__hint{opacity:.7}

@keyframes introUp{to{opacity:1;transform:translateY(0)}}

/* ===== Sound toggle (in nav) ===== */
.sound-toggle{display:flex;align-items:center;justify-content:center;gap:3px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--glass-border);background:transparent;cursor:pointer;transition:all .3s var(--ease);margin-left:4px}
.sound-toggle:hover{border-color:var(--white)}
[data-theme="light"] .sound-toggle{border-color:rgba(0,0,0,.1)}
[data-theme="light"] .sound-toggle:hover{border-color:#111}
.sound-toggle i{display:block;width:2px;height:7px;background:var(--g4);border-radius:2px;transition:background .3s}
.sound-toggle:hover i{background:var(--white)}
[data-theme="light"] .sound-toggle:hover i{background:#111}
.sound-toggle.playing i{background:var(--white);animation:eq 1s ease infinite}
[data-theme="light"] .sound-toggle.playing i{background:#111}
.sound-toggle.playing i:nth-child(1){animation-delay:0s}
.sound-toggle.playing i:nth-child(2){animation-delay:.25s}
.sound-toggle.playing i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:5px}50%{height:14px}}

/* a tiny floating sound control on mobile (nav hides links) */
@media(max-width:768px){.sound-toggle{position:fixed;bottom:22px;right:22px;z-index:120;width:46px;height:46px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(20px)}
  [data-theme="light"] .sound-toggle{background:rgba(255,255,255,.7)}}

/* soft vignette behind hero text for legibility over the crystal */
body.entered .hero__content::before{content:'';position:absolute;inset:-22% -26%;z-index:-1;
  background:radial-gradient(ellipse 62% 62% at 50% 50%,rgba(0,0,0,.74),rgba(0,0,0,.4) 55%,transparent 80%)}
[data-theme="light"] body.entered .hero__content::before{background:radial-gradient(ellipse 62% 62% at 50% 50%,rgba(255,255,255,.78),rgba(255,255,255,.45) 55%,transparent 80%)}

html,body{overflow-x:hidden}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){#webgl{display:none}}