/* =====================================================================
   Intro v2: northern lights, greetings in Native languages, four
   directions light beams, heartbeat drum rings, rising embers,
   typewriter tagline, and an optional ambient sound toggle.
   ===================================================================== */
#aurora2{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease}
body.s1 #aurora2{opacity:.85}
#embers{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

.beams{position:fixed;left:50%;top:var(--wheelY);width:0;height:0;z-index:3;pointer-events:none}
.beams i{position:absolute;left:0;top:0;width:min(120vmax,1800px);height:3px;transform-origin:0 50%;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);filter:blur(1.5px)}
.beams i:nth-child(1){--c:#f5f7fa;transform:rotate(-90deg)}
.beams i:nth-child(2){--c:#ffc400;transform:rotate(0deg);background:linear-gradient(90deg,#ffc400,rgba(255,196,0,0) 70%)}
.beams i:nth-child(3){--c:#e8202a;transform:rotate(90deg);background:linear-gradient(90deg,#e8202a,rgba(232,32,42,0) 70%)}
.beams i:nth-child(4){transform:rotate(180deg);background:linear-gradient(90deg,#9fd0ff,rgba(30,139,255,0) 70%)}
body.s1 .beams i{animation:beam 2.4s cubic-bezier(.16,1,.3,1) forwards}
body.s1 .beams i:nth-child(2){animation-delay:.25s}body.s1 .beams i:nth-child(3){animation-delay:.5s}body.s1 .beams i:nth-child(4){animation-delay:.75s}
@keyframes beam{0%{opacity:0;width:0}35%{opacity:.95}100%{opacity:0;width:min(120vmax,1800px)}}
body.s4 .beams{animation:beamSpin 8s linear infinite}
body.s4 .beams i{animation:beamGlow 4s ease-in-out infinite;opacity:.18;width:min(70vmax,1100px)}
@keyframes beamSpin{to{transform:rotate(360deg)}}
@keyframes beamGlow{50%{opacity:.32}}

.heartbeat{position:fixed;left:50%;top:var(--wheelY);z-index:4;pointer-events:none}
.heartbeat i{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(255,196,0,.55);opacity:0}
body.ready .heartbeat i{animation:heart 2.2s cubic-bezier(.2,.7,.3,1) infinite}
body.ready .heartbeat i:nth-child(2){animation-delay:.32s;border-color:rgba(30,139,255,.55)}
body.ready .heartbeat i:nth-child(3){animation-delay:1.1s;border-color:rgba(245,247,250,.4)}
@keyframes heart{0%{transform:scale(1.2);opacity:.9}100%{transform:scale(4.2);opacity:0}}

.greet{position:fixed;left:0;right:0;top:calc(var(--wheelY) + var(--L) * .2007 * 1.3);z-index:7;text-align:center;pointer-events:none}
.greet-word{margin:0;font:700 clamp(2rem,5.4vw,4.2rem)/1 "Saira",sans-serif;letter-spacing:.02em;color:#f5f7fa;
  text-shadow:0 0 30px rgba(30,139,255,.8),0 0 60px rgba(30,139,255,.4);opacity:0;transform:translateY(14px);filter:blur(8px);transition:opacity .45s,transform .45s,filter .45s}
.greet-lang{margin:.6rem 0 0;font:600 clamp(.85rem,1.6vw,1.05rem)/1 "Saira",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#ffc400;opacity:0;transition:opacity .45s}
.greet.on .greet-word{opacity:1;transform:none;filter:none}
.greet.on .greet-lang{opacity:.95}
.greet.final .greet-word{background:linear-gradient(100deg,#fff,#5fb0ff 35%,#ffc400 55%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 24px rgba(30,139,255,.6))}
body.s4 .greet{opacity:0;transition:opacity .8s}

.tagline{position:fixed;left:0;right:0;bottom:calc(9vh + 150px);z-index:8;margin:0;text-align:center;font:600 clamp(.95rem,2vw,1.35rem)/1.3 "Saira",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#cfe8ff;min-height:1.4em}
.tagline .cur{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#ffc400;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tagline b{color:#ffc400;font-weight:700}

.sound{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(160,200,255,.35);background:rgba(3,9,21,.55);color:#cfe8ff;font:600 .85rem "Saira",sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.sound:hover{border-color:#5fb0ff}
.sound-ico{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound-ico i{width:3px;height:4px;border-radius:2px;background:currentColor}
.sound[aria-pressed="true"] .sound-ico i{animation:eq .9s ease-in-out infinite}
.sound[aria-pressed="true"] .sound-ico i:nth-child(2){animation-delay:.15s}.sound[aria-pressed="true"] .sound-ico i:nth-child(3){animation-delay:.3s}.sound[aria-pressed="true"] .sound-ico i:nth-child(4){animation-delay:.45s}
@keyframes eq{50%{height:14px}}
.shooting{position:fixed;z-index:2;width:160px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform-origin:100% 50%;animation:shoot 1.1s ease-out forwards}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(var(--a)) scaleX(.2)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--a)) scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  #aurora2,#embers,.beams,.heartbeat,.shooting{display:none}
  .greet-word,.greet-lang{transition:none}
}
@media (max-width:640px){.greet{}.tagline{bottom:calc(9vh + 130px);letter-spacing:.1em;padding:0 16px}}