/* ========================================================= BLOOD MOON ā€” "Lua de Sangue" šŸ”“šŸŒ‘ --------------------------------------------------------- Evento TEMPORƁRIO (~14s), nĆ£o um modo permanente. Ativa adicionando a classe `blood-moon` no (e `bm-leaving` no fim, pra o fade-out). O JS orquestra a timeline. Mesmo esquema do Konami: recolore o site trocando as variĆ”veis de tema (azul Sheikah -> vermelho-sangue), e sobrepƵe lua + brasas + texto. ========================================================= */ /* RecoloraĆ§Ć£o: azul Sheikah -> vermelho-sangue (igual ao --blue-rgb do Konami) */ 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; } /* ---- Container do evento (sobreposiĆ§Ć£o em tela cheia) ---- Nome PRƓPRIO (.bm-stage), separado da classe de ativaĆ§Ć£o `blood-moon`: se fosse `.blood-moon`, casaria com e aplicaria display:none no documento inteiro (tela branca). */ .bm-stage { position: fixed; inset: 0; z-index: 9990; pointer-events: none; display: none; overflow: hidden; } /* O palco fica enquanto `blood-moon` estiver ativa (permanente, p/ as brasas). O EVENTO (lua/overlay/texto) Ć© controlado por `bm-active` e some no fim; as brasas (.bm-embers, fora do .bm-event) continuam atĆ© recarregar. */ 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; } } /* A lua de sangue (imagem com glow prĆ³prio), subindo do horizonte */ .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; /* glow vermelho seguindo o formato da lua (drop-shadow respeita o alpha) */ 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)); } } /* Brasas vermelhas subindo (geradas via JS; variaĆ§Ć£o por custom props inline) */ .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; } /* brasas pretas, embaralhadas com as vermelhas (classe via JS) */ .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; } } /* Estado amaldiƧoado (depois que a lua some): o logo do hero vira de ponta-cabeƧa. A troca do texto "O ƚltimo Sheikah" -> "O Primeiro Yiga" Ć© feita no JS. Tudo volta ao normal ao recarregar a pĆ”gina. */ .hero-logo-wrap { transition: opacity 2.5s ease, transform 1.4s ease; } html.bm-cursed .hero-logo-wrap { transform: translate(-50%, -50%) rotate(180deg); } /* Acessibilidade: menos movimento -> sem brasas e sem pulso (o clima continua) */ @media (prefers-reduced-motion: reduce) { .bm-overlay { animation: none; } html.bm-active .bm-moon { animation: none; transform: translate(-50%, 0); } }