/* ============================================================ Easter egg "Saria" — a home vira uma clareira dos Lost Woods. Só age quando . Gatilho: Saria's Song na caixinha. Performance (lição da Ocarina): animar só transform/opacity; nada de filter/drop-shadow em coisa grande que gira/cai. ============================================================ */ /* ---- Troca de paleta: azul Sheikah -> verde-floresta + madeira ---- */ 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; } /* botões primários: gradiente verde-folha -> madeira */ 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)); } /* ============================================================ Moldura da floresta (overlay decorativo nas bordas) ============================================================ */ .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; /* só aparece no modo saria */ overflow: hidden; } html.saria .saria-fx { display: block; } /* folhagem + tronco saindo dos cantos inferiores, subindo pelas laterais */ .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); } /* entrada encenada: as laterais deslizam de FORA pra DENTRO ao ligar o modo saria. Uso @keyframes (não transition) porque o container sai de display:none e transição não anima partindo de display:none. */ 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); } } /* ---- folhas caindo (spawnadas via JS; começam a cair do topo, escalonadas) ---- */ .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; } } /* ============================================================ Efeito "durante a música" (Fase A, POR CIMA da caixinha): vórtice verde de folhas dando voltas lentas. Aparece com enquanto a sarias-song toca (some ao fechar). z-index acima da caixinha (1000). Só transform/opacity anima. ============================================================ */ .saria-swirl-fx { position: fixed; inset: 0; z-index: 9990; /* acima das luzes verdes (song-fx em 9980) — folhas por cima */ 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; } } /* aros concêntricos de folhas; cada aro gira devagar (voltas lentas), velocidades diferentes */ .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); /* posiciona na órbita (ângulo + raio) e inclina a folha p/ dar a impressão do giro */ transform: rotate(var(--a, 0deg)) translateY(calc(var(--r, 30vmin) * -1)) rotate(var(--tilt, 20deg)); } /* quem pediu menos movimento: sem folhas caindo e sem deslizes (a moldura só aparece) */ @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; } }