/* =========================================================
   FX.CSS — camada de efeitos visuais da home
   ---------------------------------------------------------
   Carregado de forma assíncrona, sem bloquear o render. Fica depois do base.css:
   a posição no documento é o que define a cascata. O estado inicial (escondido)
   dos contêineres vive no base.css, na seção de reserva de layout.
   ========================================================= */

html.konami {
  --blue:      #f2c43a;        /* acento principal (era #3fa9ff) */
  --blue-rgb:  242, 196, 58;   /* recolore todos os rgba() de borda/sombra/glow */
  --blue-glow: #ffdf7a;
  --cyan:      #ffeaa8;
  --gold:      #ffd700;
  --cream:     #fff3cf;
  --ivory:     #fff7e6;        /* texto base, em tom quente */
  --muted:     #cbb27e;        /* texto secundário, em tom quente */

  /* fundos: navy frio -> tons quentes escuros (clima de templo dourado) */
  --navy-900:  #140d02;
  --navy-800:  #1d1304;
  --navy-700:  #271b05;
  --navy-600:  #33240a;
}

/* Gradientes de botão que tinham azul "chumbado" (#2b7fd6) */
html.konami .btn-primary,
html.konami .nav-cta {
  background: linear-gradient(135deg, var(--blue), #b8860b);
  color: #2a1c00;
}

/* Transição suave ao entrar no modo (a troca anima junto com a classe) */
html.konami,
html.konami body,
html.konami .navbar,
html.konami .card,
html.konami .shop-card,
html.konami .rune-tile,
html.konami .btn,
html.konami .eyebrow,
html.konami .section-title,
html.konami .runes {
  transition:
    background-color 0.6s ease,
    background 0.6s ease,
    color 0.6s ease,
    border-color 0.6s ease,
    box-shadow 0.6s ease,
    text-shadow 0.6s ease;
}

/* Brilho dourado extra no logo do hero, pra dar o "toque mágico" */
html.konami .hero-logo {
  filter: drop-shadow(0 0 22px rgba(var(--blue-rgb), 0.55));
}

.hero-triforce {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-triforce iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;

  filter: drop-shadow(0 0 26px rgba(255, 200, 90, 0.45));
}
/* Transição suave do logo do hero (fade-out) */
.hero-logo-wrap { transition: opacity 2.5s ease, transform 1.4s ease; }

html.konami .hero-triforce { display: block; }
html.tri-logo-out .hero-logo-wrap { opacity: 0; pointer-events: none; }
html.tri-in .hero-triforce { opacity: 1; }

.song-fx {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s ease;
  overflow: hidden;
  --fx-rgb: 120, 205, 255;
}
html.song-playing .song-fx { opacity: 1; }

html.lullaby-playing .song-fx { opacity: 1; --fx-rgb: 255, 135, 205; }
html.lullaby-playing .song-ray { animation-direction: reverse; }         /* ...girando anti-horário */
html.saria-swirl .song-fx { opacity: 1; --fx-rgb: 120, 235, 130; }

/* glow pulsante no fundo (cor via --fx-rgb) */
.song-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--fx-rgb), 0.28) 0%,
    rgba(var(--fx-rgb), 0.12) 35%,
    transparent 70%);
  animation: song-glow 2.4s ease-in-out infinite;
}

/* camadas de raios, recortadas num anel pela máscara radial.
   Todas giram no MESMO sentido, com espessuras e velocidades diferentes,
   e brilho (opacidade) pulsante = "glow" nas barras. */
.song-ray {
  position: absolute;
  left: 50%; top: 50%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 6%, #000 26%, #000 60%, transparent 94%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 6%, #000 26%, #000 60%, transparent 94%);
  will-change: transform;
  backface-visibility: hidden;
}
/* SEM filter: drop-shadow — era ele que travava em GPUs fracas (borrão recalculado
   a cada quadro numa área enorme). Só a rotação anima (a GPU faz quase de graça);
   o brilho vem da opacidade pulsante + do glow de fundo. */
/* grossas + lentas */
.song-ray--a {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg 12deg, rgba(var(--fx-rgb), 0.34) 12deg 22deg, transparent 22deg 34deg);
  animation: song-spin 26s linear infinite, song-glow 3.4s ease-in-out infinite;
}
/* médias */
.song-ray--b {
  background: repeating-conic-gradient(from 5deg at 50% 50%,
    transparent 0deg 8deg, rgba(var(--fx-rgb), 0.28) 8deg 14deg, transparent 14deg 22deg);
  animation: song-spin 16s linear infinite, song-glow 2.7s ease-in-out infinite 0.5s;
}
/* finas + rápidas */
.song-ray--c {
  background: repeating-conic-gradient(from 2deg at 50% 50%,
    transparent 0deg 4deg, rgba(var(--fx-rgb), 0.24) 4deg 6deg, transparent 6deg 11deg);
  animation: song-spin 9s linear infinite, song-glow 2s ease-in-out infinite 0.9s;
}
@keyframes song-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes song-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .song-glow, .song-ray { animation: none; }
}

html.blood-moon {
  --blue:      #ff4040;
  --blue-rgb:  224, 48, 48;       /* recolore todos os rgba() de borda/sombra/glow */
  --blue-glow: #ff6b6b;
  --cyan:      #ff9a9a;
  --gold:      #ff5a5a;
  --cream:     #ffe0e0;
  --ivory:     #ffecec;
  --muted:     #c98f8f;
  /* fundos: navy frio -> tons escuros avermelhados */
  --navy-900:  #120303;
  --navy-800:  #1a0505;
  --navy-700:  #230808;
  --navy-600:  #2f0c0c;
}
html.blood-moon .btn-primary,
html.blood-moon .nav-cta {
  background: linear-gradient(135deg, var(--blue), #7e0c0c);
}

/* Transição suave das cores (entra E sai — fica no base pra animar nos dois sentidos,
   em elementos sem troca de cor no hover, pra não mexer na navegação normal) */
body,
.hero, .section, .videos, .shop, .navbar.scrolled,
.eyebrow, .section-title, .runes {
  transition: background-color 1s ease, background 1s ease,
              color 1s ease, text-shadow 1s ease;
}

.bm-stage {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  display: none;
  overflow: hidden;
}

html.blood-moon .bm-stage { display: block; }
.bm-event { position: absolute; inset: 0; opacity: 0; }
html.bm-active .bm-event { animation: bm-appear 1.2s ease forwards; }
html.bm-active.bm-leaving .bm-event { animation: bm-disappear 1.4s ease forwards; }
@keyframes bm-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-disappear { from { opacity: 1; } to { opacity: 0; } }

/* Overlay: vinheta vermelha pulsante por cima de tudo */
.bm-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 34%,
    rgba(120, 0, 0, 0.12),
    rgba(30, 0, 0, 0.5) 68%,
    rgba(8, 0, 0, 0.85) 100%);
  animation: bm-pulse 4s ease-in-out infinite;
}
@keyframes bm-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

.bm-moon {
  position: absolute;
  left: 50%;
  top: 11vh;
  width: min(420px, 68vw);
  aspect-ratio: 1;
  transform: translate(-50%, 64vh);
  background: url("assets/img/red-moon.webp") center / contain no-repeat;

  filter: drop-shadow(0 0 35px rgba(255, 45, 45, 0.8)) drop-shadow(0 0 85px rgba(210, 0, 0, 0.5));
}
/* sobe + glow pulsante */
html.bm-active .bm-moon {
  animation: bm-rise 6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
             bm-glow 3.2s ease-in-out infinite;
}
@keyframes bm-rise { to { transform: translate(-50%, 0); } }
@keyframes bm-glow {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(255, 45, 45, 0.7)) drop-shadow(0 0 75px rgba(210, 0, 0, 0.45)); }
  50%      { filter: drop-shadow(0 0 55px rgba(255, 80, 60, 0.95)) drop-shadow(0 0 120px rgba(235, 15, 15, 0.6)); }
}

.bm-embers { position: absolute; inset: 0; }
.bm-ember {
  position: absolute;
  bottom: -3vh;
  left: var(--x, 50vw);
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, #ff8a5a, #d01c1c 60%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(255, 70, 40, 0.85));
  animation: bm-ember-up var(--dur, 7s) linear var(--delay, 0s) infinite;
}

.bm-ember--dark {
  background: radial-gradient(circle, #4a4a4a, #0a0a0a 60%, transparent 72%);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
}
@keyframes bm-ember-up {
  0%   { transform: translateY(0) scale(1);     opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-94vh) scale(0.5); opacity: 0; }
}

/* Texto temático, surgindo aos poucos */
.bm-text {
  position: absolute;
  left: 0; right: 0;
  top: 40%;
  text-align: center;
  padding: 0 24px;
  font-family: "Hylia Serif", serif;
  color: #ffdede;
  text-shadow: 0 0 22px rgba(255, 40, 40, 0.85), 0 2px 10px rgba(0, 0, 0, 0.8);
}
.bm-text p { font-size: clamp(1.1rem, 3.4vw, 2.1rem); line-height: 1.3; opacity: 0; }
.bm-text p + p { margin-top: 10px; font-size: clamp(0.95rem, 2.6vw, 1.5rem); }
html.bm-active .bm-text p { animation: bm-text-in 2s ease forwards; }
html.bm-active .bm-text p:nth-child(1) { animation-delay: 1.6s; }
html.bm-active .bm-text p:nth-child(2) { animation-delay: 3.6s; }
@keyframes bm-text-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  to   { opacity: 0.96; filter: blur(0); transform: none; }
}

.hero-logo-wrap { transition: opacity 2.5s ease, transform 1.4s ease; }
html.bm-cursed .hero-logo-wrap { transform: translate(-50%, -50%) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .bm-overlay { animation: none; }
  html.bm-active .bm-moon { animation: none; transform: translate(-50%, 0); }
}

.rain-fx {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  display: none;
}
html.storm .rain-fx { display: block; }

.rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: rotate(9deg) scale(1.35);
  transform-origin: center;
}
.drop {
  position: absolute;
  top: -14vh;
  width: 1.6px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(200, 222, 245, 0.65));
  animation: rain-fall linear infinite;
}
@keyframes rain-fall { to { transform: translateY(135vh); } }

.storm-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 28%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}
/* relâmpago ocasional (só opacidade — leve) */
.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%,
    rgba(207, 228, 255, 0.9), rgba(160, 200, 255, 0.25) 60%, transparent 80%);
  opacity: 0;
  animation: rain-lightning 8s infinite;
}
@keyframes rain-lightning {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.55; } 92% { opacity: 0.08; }
  93% { opacity: 0.5; } 94.5% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drop, .flash { animation: none; }
}

.storm-swirl-fx {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s ease;
  overflow: hidden;
}
html.storm-playing .storm-swirl-fx,
html.epona-playing .storm-swirl-fx { opacity: 1; }

/* atmosfera azul no fundo do vórtice */
.storm-swirl-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 120vmax; height: 120vmax; margin: -60vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(70, 120, 210, 0.12) 0%,
    rgba(40, 90, 185, 0.18) 30%,
    transparent 60%);
}
html.storm-playing .storm-swirl-glow,
html.epona-playing .storm-swirl-glow { animation: storm-swirl-glow 5s ease-in-out infinite; }
@keyframes storm-swirl-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.storm-cloud {
  position: absolute;
  left: 50%; top: 50%;
  width: 220vmax; height: 220vmax; margin: -110vmax;   /* centraliza sem translate no keyframe */
  border-radius: 50%;
  will-change: transform;
  background-image: var(--swirl-tex, url('/assets/img/storm/cloud.svg'));
  background-repeat: repeat;
  background-size: 44vmax 44vmax;                       /* escala dos "puffs" de nuvem */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 13%, #000 32%, #000 62%, transparent 84%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 13%, #000 32%, #000 62%, transparent 84%);
}
html.storm-playing .storm-cloud,
html.epona-playing .storm-cloud { animation: storm-swirl-spin var(--spin, 32s) linear infinite; }

html.epona-playing { --swirl-tex: url('/assets/img/epona/cloud.svg'); }
html.epona-playing .storm-swirl-glow {
  background: radial-gradient(circle at 50% 50%,
    rgba(210, 140, 70, 0.13) 0%,
    rgba(180, 100, 45, 0.19) 30%,
    transparent 60%);
}

.epona-notes {
  position: fixed;
  inset: 0;
  z-index: 9981;               /* logo acima do vórtice (9980) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.3s ease;
  overflow: hidden;
}
html.epona-playing .epona-notes { opacity: 1; }

.epona-note {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  will-change: transform;
  animation: epona-orbit var(--dur, 24s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes epona-orbit { to { transform: rotate(360deg); } }

.epona-note > i {
  position: absolute;
  left: 0; top: 0;
  display: block;
  width: var(--size, 46px);
  height: var(--size, 46px);
  /* base (bottom-center do box) sobre o centro e empurrada --r para fora: aponta para dentro */
  transform: translate(-50%, -100%) translateY(calc(var(--r, 30vmax) * -1));
  background: url('/assets/img/epona/note.svg') center / contain no-repeat;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .epona-note { animation: none; }
}
.storm-cloud--a { background-position:  0      0; }
.storm-cloud--b { width: 150vmax; height: 150vmax; margin: -75vmax;  opacity: 0.8;  --spin: 21s; background-position: 22vmax 10vmax; }
.storm-cloud--c { width: 280vmax; height: 280vmax; margin: -140vmax; opacity: 0.6;  --spin: 45s; background-position: 10vmax 26vmax; }
@keyframes storm-swirl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .storm-cloud, .storm-swirl-glow { animation: none; }
}

.oc-stage{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.oc-stage.open{ opacity:1; pointer-events:auto; }

.oc-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(2px);
}

.oc-box{
  position:relative;
  width:440px; max-width:92vw;
  background-color:rgba(0,0,0,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:22px 22px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.96);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; gap:16px;
}
.oc-stage.open .oc-box{ transform:translateY(0) scale(1); }

.oc-box.flash{ animation:oc-flash .7s ease; }
@keyframes oc-flash{
  0%{ box-shadow:0 0 0 0 rgba(242,90,1,0) inset, 0 24px 70px rgba(0,0,0,.55); }
  30%{ box-shadow:0 0 70px 0 rgba(242,90,1,.45) inset, 0 24px 70px rgba(0,0,0,.55); }
  100%{ box-shadow:0 0 0 0 rgba(242,90,1,0) inset, 0 24px 70px rgba(0,0,0,.55); }
}

/* botão de fechar */
.oc-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:30px; height:30px; border:none; border-radius:50%;
  background:rgba(255,255,255,.08); color:#e8eefc;
  font-size:20px; line-height:1; cursor:pointer;
  transition:background .12s ease, transform .08s ease;
}
.oc-close:hover{ background:rgba(255,255,255,.18); }
.oc-close:active{ transform:scale(.9); }

.oc-played{
  min-height:1.4em;                 /* reserva o espaço p/ o box não pular */
  padding:2px 34px 0;               /* clareia o botão de fechar */
  text-align:center;
  font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.3px;
  color:#eef3ff;
  opacity:0; transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease;
}
.oc-played.show{ opacity:1; transform:translateY(0); }
.oc-played .oc-song{ font-weight:700; }

.oc-staff{
  position:relative; height:120px; border-radius:16px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.oc-slots{ position:absolute; top:8px; right:14px; font-size:11px; color:#fff; opacity:.35; }

.oc-lines{ height:50px; position:absolute; left:24px; right:24px; bottom:24px; }
.oc-lines div{ background-color:#9b180b; width:100%; height:2px; margin-bottom:14px; }
.oc-lines div:last-child{ margin-bottom:0; }

.oc-clef{ position:absolute; height:70px; left:36px; bottom:14px; pointer-events:none; }
.oc-clef path{ fill:#f25a01; }

.oc-notes{ height:50px; position:absolute; left:84px; right:24px; bottom:24px; }
.oc-note{
  width:24px; margin-top:-12px; position:absolute;
  transition:left .26s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
  will-change:left;
}
.oc-note svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.oc-note.enter{ animation:oc-drop .26s cubic-bezier(.22,.61,.36,1); }
@keyframes oc-drop{ from{ opacity:.2; } }
.oc-note.leaving{ opacity:0; }

.oc-note.re-2{ top:0; }
.oc-note.do-2{ top:8px; }
.oc-note.si  { top:16px; }
.oc-note.la  { top:24px; }
.oc-note.sol { top:32px; }
.oc-note.fa  { top:40px; }
.oc-note.mi  { top:48px; }
.oc-note.re  { top:56px; }
.oc-note.do  { top:64px; }

.oc-pad{ display:flex; align-items:flex-start; justify-content:center; gap:10px; }
.oc-btn{
  width:48px; height:48px; border:none; background:transparent; cursor:pointer;
  padding:0; transition:transform .08s ease, filter .08s ease; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.oc-btn:active, .oc-btn.down{ transform:translateY(2px) scale(.93); filter:brightness(1.25); }
.oc-btn:disabled{ opacity:.4; cursor:default; }   /* toque bloqueado durante a apresentação */
.oc-btn svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 7px rgba(0,0,0,.5)); }

/* ============ controles: switch + dica ============ */
.oc-controls{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:#e8eefc; font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}
.oc-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.oc-switch input{ position:absolute; opacity:0; width:0; height:0; }
.oc-track{
  position:relative; width:44px; height:24px; border-radius:999px;
  background:#3a6b2e; transition:background .2s ease;
  flex:0 0 auto;
}
.oc-thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .2s cubic-bezier(.22,.61,.36,1);
}
.oc-switch input:checked + .oc-track{ background:#3a6b2e; }        /* ligado = verde */
.oc-switch input:checked + .oc-track .oc-thumb{ transform:translateX(20px); }
.oc-switch input:not(:checked) + .oc-track{ background:#555; }     /* livre = cinza */
.oc-switch input:disabled + .oc-track{ opacity:.55; }
.oc-switch.locked{ cursor:not-allowed; }

.oc-switch-label{ font-size:12.5px; font-weight:600; white-space:nowrap; }

/* ===== "Carregando…" — cobre a caixinha até os áudios/efeitos baixarem ===== */
.oc-loading{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border-radius:24px;                         /* acompanha o .oc-box */
  background:rgba(0,0,0,.86);
  color:#eef3ff;
  font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}
.oc-loading[hidden]{ display:none; }
.oc-loading-text{ font-size:14px; font-weight:600; letter-spacing:.3px; }
.oc-loading-spin{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:#f25a01;                   /* laranja da ocarina */
  animation:oc-spin .8s linear infinite;
}
@keyframes oc-spin{ to{ transform:rotate(360deg); } }

/* respeita quem pediu menos animação */
@media (prefers-reduced-motion: reduce){
  .oc-stage, .oc-box, .oc-note, .oc-thumb{ transition:none; }
  .oc-note.enter, .oc-box.flash{ animation:none; }
  .oc-loading-spin{ animation:none; }
}

@media (max-width:480px){
  .oc-box{ padding:18px 14px 14px; }
  .oc-btn{ width:44px; height:44px; }
}

/* Fim do efeito de Fase A: força o fade (opacity 0) mantendo a classe do efeito ligada,
   pra a cor/sentido do giro NÃO voltarem ao padrão no meio da transição (o "snap"). */
html.oc-fxout .song-fx,
html.oc-fxout .saria-swirl-fx,
html.oc-fxout .storm-swirl-fx,
html.oc-fxout .epona-notes{ opacity:0 !important; }

html.saria {
  --blue:      #5fbf3f;        /* acento principal (era #3fa9ff) */
  --blue-rgb:  95, 191, 63;    /* recolore todos os rgba() de borda/sombra/glow */
  --blue-glow: #8fe066;
  --cyan:      #bce89a;
  --gold:      #c9d84a;        /* acento quente (lima/musgo) */
  --cream:     #e9f6d9;
  --ivory:     #eef7e4;        /* texto base, esverdeado claro */
  --muted:     #a4bd8a;        /* texto secundário, musgo */

  /* fundos: navy frio -> tons escuros de mata e madeira */
  --navy-900:  #0b1408;
  --navy-800:  #101c0b;
  --navy-700:  #17280f;
  --navy-600:  #203414;
}

html.saria .btn-primary,
html.saria .nav-cta {
  background: linear-gradient(135deg, var(--blue), #6b4423);
  color: #0d2408;
}

/* transição suave ao entrar no modo (acompanha a troca de classe) */
html.saria,
html.saria body,
html.saria .navbar,
html.saria .card,
html.saria .shop-card,
html.saria .rune-tile,
html.saria .btn,
html.saria .eyebrow,
html.saria .section-title,
html.saria .runes {
  transition:
    background-color 0.6s ease,
    background 0.6s ease,
    color 0.6s ease,
    border-color 0.6s ease,
    box-shadow 0.6s ease,
    text-shadow 0.6s ease;
}

/* brilho verde suave no logo do hero */
html.saria .hero-logo {
  filter: drop-shadow(0 0 20px rgba(var(--blue-rgb), 0.5));
}

.saria-fx {
  position: fixed;
  inset: 0;
  z-index: 45;               /* na frente do conteúdo (1–3), atrás da navbar (50) */
  pointer-events: none;      /* nunca bloqueia cliques */
  display: none;
  overflow: hidden;
}
html.saria .saria-fx { display: block; }

.saria-foliage {
  position: absolute;
  bottom: 0;
  width: min(34vw, 380px);
  height: 100vh;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto 100%;
  background-image: url('/assets/img/saria/foliage-side.svg');
  opacity: 0.96;
}
.saria-foliage--left  { left: 0; }
/* espelha a mesma arte pra densa colar na borda DIREITA (mantém background-position: bottom left) */
.saria-foliage--right { right: 0; transform: scaleX(-1); }

html.saria .saria-foliage--left  { animation: saria-slide-left  1.2s cubic-bezier(.22,.61,.36,1) both; }
html.saria .saria-foliage--right { animation: saria-slide-right 1.2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes saria-slide-left  { from { transform: translateX(-115%); }            to { transform: translateX(0); } }
@keyframes saria-slide-right { from { transform: scaleX(-1) translateX(-115%); } to { transform: scaleX(-1) translateX(0); } }

/* matinho na base inteira, repetido no eixo X — sobe de baixo pra cima */
.saria-grass {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 9vw, 110px);
  background-image: url('/assets/img/saria/grass.svg');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  transform: translateY(100%);
}
html.saria .saria-grass { animation: saria-rise 1s cubic-bezier(.22,.61,.36,1) 0.2s both; }
@keyframes saria-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.saria-leaves { position: absolute; inset: 0; }
.saria-leaf {
  position: absolute;
  top: -8vh;
  width: var(--sz, 26px);
  height: var(--sz, 26px);
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform;
  animation: saria-fall var(--dur, 9s) linear var(--delay, 0s) infinite;
}
/* queda + deriva lateral + giro — tudo em transform (composição na GPU) */
@keyframes saria-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--op, 0.9); }
  50%  { transform: translate3d(var(--sway, 40px), 55vh, 0) rotate(180deg); }
  90%  { opacity: var(--op, 0.9); }
  100% { transform: translate3d(calc(var(--sway, 40px) * -1), 112vh, 0) rotate(360deg); opacity: 0; }
}

.saria-swirl-fx {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  overflow: hidden;
}
html.saria-swirl .saria-swirl-fx { opacity: 1; }

/* brilho verde pulsante ao fundo do vórtice */
.saria-swirl-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 130vmax; height: 130vmax; margin: -65vmax;   /* centraliza */
  background: radial-gradient(circle at 50% 50%,
    rgba(130, 225, 95, 0.22) 0%,
    rgba(60, 150, 50, 0.12) 34%,
    transparent 64%);
}
html.saria-swirl .saria-swirl-glow { animation: saria-swirl-glow 3.2s ease-in-out infinite; }
@keyframes saria-swirl-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.saria-swirl-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  will-change: transform;
}
html.saria-swirl .saria-swirl-ring--a { animation: saria-swirl-spin 20s linear infinite; }
html.saria-swirl .saria-swirl-ring--b { animation: saria-swirl-spin 14.7s linear infinite; }
html.saria-swirl .saria-swirl-ring--c { animation: saria-swirl-spin 25.3s linear infinite; }
@keyframes saria-swirl-spin { to { transform: rotate(360deg); } }

.saria-swirl-leaf {
  position: absolute;
  width: var(--sz, 34px); height: var(--sz, 34px);
  margin: calc(var(--sz, 34px) * -0.5);           /* centraliza no ponto do aro */
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--op, 0.9);

  transform: rotate(var(--a, 0deg)) translateY(calc(var(--r, 30vmin) * -1)) rotate(var(--tilt, 20deg));
}

@media (prefers-reduced-motion: reduce) {
  .saria-leaf { display: none; }
  html.saria .saria-foliage--left,
  html.saria .saria-foliage--right,
  html.saria .saria-grass { animation: none; }
  .saria-grass { transform: translateY(0); }
  html.saria-swirl .saria-swirl-ring--a,
  html.saria-swirl .saria-swirl-ring--b,
  html.saria-swirl .saria-swirl-ring--c,
  html.saria-swirl .saria-swirl-glow { animation: none; }
}

@media (max-width: 640px) {
  .saria-foliage { width: 44vw; opacity: 0.9; }
}

/* Ladeiam o CTA do YouTube (a linha é o .cta-row, no base.css). Ficam alinhados
   pela base, pra dançarem "no chão" do botão em vez de flutuar centralizados. */
.ganon-dance {
  width: 52px;
  height: auto;
  opacity: 0.45;                 /* meio transparente */
  pointer-events: none;
  user-select: none;
}
/* Quem pediu menos animação não vê o gif dançando. */
@media (prefers-reduced-motion: reduce) {
  .ganon-dance { display: none; }
}

#navi {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  z-index: 65;
  pointer-events: none;
  will-change: transform;
}
/* no modo órbita ela é clicável; depois de seguir o mouse, deixa de bloquear cliques */
#navi:not(.following) { pointer-events: auto; cursor: pointer; }
#navi:not(.following) .navi-core,
#navi:not(.following) .navi-glow { pointer-events: auto; }
.navi-core {
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #d4f3ff 40%, #4fb4ff 100%);
  box-shadow:
    0 0 6px 2px #aee6ff,
    0 0 14px 5px rgba(79, 180, 255, 0.85),
    0 0 30px 12px rgba(var(--blue-rgb), 0.55);
  animation: navi-pulse 1.5s ease-in-out infinite;
}
.navi-glow {
  position: absolute;
  left: -22px; top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 190, 255, 0.45) 0%, rgba(var(--blue-rgb), 0) 70%);
  animation: navi-pulse 1.5s ease-in-out infinite;
}
@keyframes navi-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.35); opacity: 1; }
}
/* asinhas translúcidas batendo */
.navi-wing {
  position: absolute;
  top: -10px;
  width: 20px; height: 13px;
  border-radius: 60% 60% 55% 55%;
  background: radial-gradient(circle at 70% 50%, rgba(214, 244, 255, 0.9), rgba(120, 200, 255, 0.3) 65%, transparent 80%);
  filter: blur(0.4px);
}
.navi-wing--l { left: -19px; transform-origin: 100% 60%; animation: navi-flap-l 0.16s ease-in-out infinite; }
.navi-wing--r { left: -1px;  transform-origin: 0% 60%;   animation: navi-flap-r 0.16s ease-in-out infinite; }
@keyframes navi-flap-l {
  0%, 100% { transform: rotate(-22deg) scaleX(1); }
  50%      { transform: rotate(-30deg) scaleX(0.45); }
}
@keyframes navi-flap-r {
  0%, 100% { transform: rotate(22deg) scaleX(1); }
  50%      { transform: rotate(30deg) scaleX(0.45); }
}
/* rastro de poeira mágica */
.navi-trail {
  position: fixed;
  left: 0; top: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #eafbff 0%, rgba(99, 190, 255, 0.7) 50%, transparent 78%);
  pointer-events: none;
  z-index: 64;
  animation: navi-trail-fade 0.95s ease-out forwards;
}
@keyframes navi-trail-fade {
  0%   { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0;    transform: scale(0.15) translateY(12px); }
}

#navi { transition: filter 0.3s ease; }
#navi.hit { animation: navi-hit 0.45s ease-out; }
@keyframes navi-hit {
  0%, 100% { filter: none; }
  25%      { filter: hue-rotate(-155deg) saturate(2.2) brightness(1.5); }
}
/* fica verde ao passar o mouse sobre um link */
#navi.link-hover { filter: hue-rotate(-80deg) saturate(1.6) brightness(1.1); }

#navi.alert { filter: hue-rotate(-155deg) saturate(2.2) brightness(1.3); }
@media (prefers-reduced-motion: reduce) {
  #navi { display: none !important; }
}

.cucco-ground {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background: var(--navy-900);
}
#cucco {
  position: absolute;
  bottom: 0;
  left: -80px;
  z-index: 2;
  width: 64px;
  height: 56px;
  display: none;            /* só aparece quando .active */
  cursor: pointer;
  transform: scaleX(-1);    /* entra virada pra direita */
}
#cucco.active {
  display: block;       /* movimento controlado via JS (comportamento natural) */
}
/* parada: pernas estáticas, só dando umas bicadas/olhadas */
#cucco.idle .cucco-body {
  animation: cucco-peck 1.6s ease-in-out infinite;
}
.cucco-body {
  width: 100%;
  height: 100%;
  background: url("assets/sprites/cucco-a.webp") center bottom / contain no-repeat;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  animation:
    cucco-step 0.6s steps(1) infinite,
    cucco-peck 2.6s ease-in-out infinite;
}
/* ciclo de caminhada — 4 frames da linha 2 */
@keyframes cucco-step {
  0%   { background-image: url("assets/sprites/cucco-a.webp"); }
  25%  { background-image: url("assets/sprites/cucco-b.webp"); }
  50%  { background-image: url("assets/sprites/cucco-c.webp"); }
  75%  { background-image: url("assets/sprites/cucco-d.webp"); }
}
/* ciscada: dá uma bicada pro chão de vez em quando */
@keyframes cucco-peck {
  0%, 80%, 100% { transform: rotate(0deg) translateY(0); }
  88%           { transform: rotate(-12deg) translateY(2px); }
  94%           { transform: rotate(0deg) translateY(0); }
}

.cucco-swarm {
  position: fixed;
  left: 0; top: 0;
  width: 64px; height: 56px;
  z-index: 61;
  pointer-events: none;
  will-change: transform;
}
.cucco-swarm > i {
  display: block;
  width: 100%; height: 100%;
  background: url("assets/sprites/cucco-fly-a.webp") center bottom / contain no-repeat;
  image-rendering: pixelated;
  animation: cucco-fly 0.32s steps(1) infinite;
}
@keyframes cucco-fly {
  0%   { background-image: url("assets/sprites/cucco-fly-a.webp"); }
  25%  { background-image: url("assets/sprites/cucco-fly-b.webp"); }
  50%  { background-image: url("assets/sprites/cucco-fly-c.webp"); }
  75%  { background-image: url("assets/sprites/cucco-fly-d.webp"); }
}

#cucco.hurt {
  animation-play-state: paused;
}
#cucco.hurt .cucco-body {
  animation: none;
  background-image: url("assets/sprites/cucco-hurt.webp");
}
@media (prefers-reduced-motion: reduce) {
  #cucco { display: none !important; }
}

/* Rodapé antigo (páginas internas): a ocarina é uma bolinha entre os ícones. */
.footer .social .oc-footer-btn { display: flex; }
.footer .social .oc-footer-btn img { display: block; width: 22px; height: 22px; margin: 0; object-fit: contain; }

/* Rodapé em colunas (home): a ocarina fecha a lista de redes, disfarçada de link. */
.footer-social .oc-footer-item { display: block; }

/* No mobile a caixinha musical não cabe: o gatilho some (nos dois rodapés). */
@media (max-width: 760px) {
  .footer .social .oc-footer-btn,
  .footer-social .oc-footer-item { display: none; }
}