/* ========================================================= CHUVA — Song of Storms (efeito de tempestade, 100% CSS, leve) --------------------------------------------------------- Gotas = traços finos animados só por transform (GPU), sem filter/drop-shadow. Easter egg: só aparece quando (ligado pelo JS quando a Song of Storms toca). Fica até o site ser recarregado. ========================================================= */ .rain-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none; } html.storm .rain-fx { display: block; } /* container inclinado = chuva com "vento"; scale evita ver as bordas ao girar */ .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); } } /* clima de tempestade: escurece as bordas */ .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; } } /* ========================================================= Efeito "durante a música" da Song of Storms (Fase A) — não são raios: uma NUVEM/vórtice que gira no sentido horário, com um BURACO (olho) no centro. Camadas de conic-gradient (braços de nuvem suaves) recortadas num anel pela máscara radial. Só transform/opacity anima (sem filter em coisa que gira). Aparece com (por cima da caixinha) enquanto a música toca. ========================================================= */ .storm-swirl-fx { position: fixed; inset: 0; z-index: 9980; /* por cima da caixinha (1000), como os raios */ 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; } } /* nuvem carregada girando (textura de feTurbulence); anel com furo no centro (o olho). A textura já vem "assada" no SVG, então só o transform (giro) anima — continua leve. --swirl-tex troca a textura por música (azul da tempestade / laranja da Epona). */ .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; } /* Tema da Epona's Song (Fase A): mesmo vórtice, tom laranja/marrom (campo de Lon Lon). */ 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%); } /* Notas musicais orbitando a nuvem da Epona (Fase A). Cada .epona-note é um braço que gira a partir do centro; o é empurrado para fora no raio (--r) com a BASE apontada para o centro (o braço gira, a nota herda o giro e mantém a orientação radial). Velocidade (--dur), raio (--r), tamanho (--size) e ângulo inicial (--delay) variam por nota. Só transform anima. */ .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; } }