/* ========================================================= KONAMI MODE — "Modo Triforce" (dourado) ⌖ △ --------------------------------------------------------- Ativa adicionando a classe `konami` no : document.documentElement.classList.add('konami') Desativa removendo: document.documentElement.classList.remove('konami') Não remove nada do styles.css base — só SOBREPÕE as cores, trocando as variáveis de tema (o azul Sheikah vira dourado). O grosso do site recolore sozinho porque tudo usa var(--blue), var(--blue-rgb), var(--glow), etc. ========================================================= */ /* Troca de paleta: azul Sheikah -> dourado da Triforce */ 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: troca o logo pela Triforce 3D no Modo Triforce ---- */ /* Container da Triforce: ocupa o hero inteiro, pra as peças virem das bordas reais da tela (e não de dentro de uma caixa pequena). Escondido por padrão. */ .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; /* halo dourado em volta da Triforce (compensa o brilho do bloom removido) */ 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; } /* Coreografia em estágios (controlada por JS): konami -> troca as cores (a Triforce já fica no DOM, mas invisível) tri-logo-out -> o logo do hero some (fade-out) tri-in -> a Triforce aparece (fade-in) e se monta */ 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; } /* ---- Efeito da Ocarina: ondas de luz azul girando (durante a Song of Time) ---- Tudo em CSS: raios (repeating-conic-gradient) girando + máscara radial (anel) + glow radial pulsante. Ligado/desligado pela classe `song-playing`. */ .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; /* cor do efeito — azul da Song of Time por padrão */ } html.song-playing .song-fx { opacity: 1; } /* mesma estrutura de raios, recolorida por música (efeito da Fase A na caixinha) */ html.lullaby-playing .song-fx { opacity: 1; --fx-rgb: 255, 135, 205; } /* Zelda's Lullaby: rosa */ html.lullaby-playing .song-ray { animation-direction: reverse; } /* ...girando anti-horário */ html.saria-swirl .song-fx { opacity: 1; --fx-rgb: 120, 235, 130; } /* Saria: luzes verdes atrás das folhas */ /* 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; } }