/* ========================================================== MIEL GLOW LIBRARY v1.0 Girarsoft ========================================================== */ :root{ --miel-gold:#D3A449; --miel-gold-light:#F4DE9A; --miel-gold-dark:#B98724; --miel-white:#FFFFFF; --miel-shadow: rgba(211,164,73,.45); --miel-radius:18px; --miel-speed:3.5s; --miel-glow-size:30px; } /**************************************************** CONTENEDOR *****************************************************/ .miel-glow{ position:relative; overflow:hidden; isolation:isolate; transform:translateZ(0); will-change:transform,filter; } /**************************************************** GLOW *****************************************************/ .miel-glow{ filter: drop-shadow(0 0 3px rgba(255,210,120,.15)) drop-shadow(0 0 8px rgba(255,210,120,.12)); transition: filter .45s ease, transform .35s ease; } .miel-glow:hover{ filter: drop-shadow(0 0 8px rgba(255,220,140,.45)) drop-shadow(0 0 18px rgba(255,210,120,.40)) drop-shadow(0 0 40px rgba(255,200,80,.30)); } /**************************************************** HERO GLOW *****************************************************/ .glow-hero{ animation:mielHeroGlow 5s ease-in-out infinite; } @keyframes mielHeroGlow{ 0%,100%{ filter: drop-shadow(0 0 10px rgba(255,220,120,.30)) drop-shadow(0 0 30px rgba(255,210,90,.25)); } 50%{ filter: drop-shadow(0 0 20px rgba(255,220,120,.8)) drop-shadow(0 0 55px rgba(255,205,70,.55)) drop-shadow(0 0 95px rgba(255,240,180,.45)); } } /**************************************************** MEDIUM *****************************************************/ .glow-medium{ animation:mielMedium 4s ease-in-out infinite; } @keyframes mielMedium{ 0%,100%{ filter: drop-shadow(0 0 4px rgba(255,220,120,.25)) drop-shadow(0 0 10px rgba(255,200,90,.15)); } 50%{ filter: drop-shadow(0 0 8px rgba(255,220,120,.5)) drop-shadow(0 0 18px rgba(255,205,70,.25)); } } /**************************************************** SOFT *****************************************************/ .glow-soft{ filter: drop-shadow(0 0 3px rgba(255,220,120,.18)); } /**************************************************** STRONG *****************************************************/ .glow-strong{ animation:mielStrong 2.5s ease-in-out infinite; } @keyframes mielStrong{ 0%,100%{ filter: drop-shadow(0 0 8px rgba(255,220,120,.3)) drop-shadow(0 0 20px rgba(255,205,70,.2)); } 50%{ filter: drop-shadow(0 0 15px rgba(255,220,120,.7)) drop-shadow(0 0 35px rgba(255,205,70,.45)) drop-shadow(0 0 70px rgba(255,240,180,.3)); } } /**************************************************** HALO *****************************************************/ .miel-halo{ position:absolute; inset:-40px; border-radius:50%; pointer-events:none; z-index:-1; opacity:.9; } .miel-halo::before{ content:""; position:absolute; inset:0; border-radius:50%; background: conic-gradient( transparent, rgba(255,220,130,.75), transparent, rgba(255,255,255,.25), transparent, rgba(255,220,130,.65), transparent ); filter: blur(18px); animation: mielRotate 14s linear infinite; } @keyframes mielRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /**************************************************** REFLEJO EN HOVER *****************************************************/ .miel-glow::after{ content:""; position:absolute; top:-130%; left:-120%; width:70%; height:350%; background: linear-gradient( 110deg, transparent, rgba(255,255,255,.55), rgba(255,230,170,.85), rgba(255,255,255,.4), transparent ); transform:rotate(25deg); transition:left .9s ease; pointer-events:none; } .miel-glow:hover::after{ left:180%; } /* ========================================================== MIEL GLOW LIBRARY PART 2 - PARTICLES / STARS / ORBITS ==========================================================*/ /**************************************************** CAPA FX *****************************************************/ .miel-fx{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:30; } /**************************************************** PARTICULAS *****************************************************/ .miel-particle{ position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; opacity:0; box-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 10px rgba(255,225,150,.95), 0 0 18px rgba(211,164,73,.75); transform:translate3d(0,0,0) scale(.2); animation:mielParticleFloat linear infinite; will-change:transform,opacity; } .miel-particle.large{ width:7px; height:7px; } .miel-particle.small{ width:3px; height:3px; } @keyframes mielParticleFloat{ 0%{ opacity:0; transform: translateY(20px) scale(.2); } 15%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; transform: translateY(-40px) scale(1); } } /**************************************************** ESTRELLAS *****************************************************/ .miel-star{ position:absolute; display:flex; justify-content:center; align-items:center; width:auto; height:auto; color:#fff; font-size:18px; line-height:1; opacity:0; pointer-events:none; text-shadow: 0 0 6px #fff, 0 0 12px #FFE39A, 0 0 24px #D3A449, 0 0 40px #D3A449; animation:mielTwinkle 2.4s ease-in-out infinite; will-change:transform,opacity; } @keyframes mielTwinkle{ 0%{ opacity:0; transform: scale(.2) rotate(0deg); } 40%{ opacity:1; transform: scale(1.15) rotate(45deg); } 100%{ opacity:0; transform: scale(.2) rotate(90deg); } } /**************************************************** CHISPAS *****************************************************/ .miel-spark{ position:absolute; width:2px; height:22px; border-radius:20px; background: linear-gradient( transparent, rgba(255,255,255,.95), rgba(255,230,170,.9), transparent ); opacity:0; transform-origin:center; animation:mielSpark 3s linear infinite; } @keyframes mielSpark{ 0%{ opacity:0; transform: rotate(0deg) scaleY(.2); } 40%{ opacity:1; transform: rotate(30deg) scaleY(1); } 100%{ opacity:0; transform: rotate(70deg) scaleY(.2); } } /**************************************************** ORBITA *****************************************************/ .miel-orbit{ position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(255,220,120,.12); animation:mielOrbitRotate 12s linear infinite; opacity:.55; } .miel-orbit::before{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#FFE4A5; top:-4px; left:50%; transform:translateX(-50%); box-shadow: 0 0 10px #fff, 0 0 18px rgba(255,220,120,.9); } @keyframes mielOrbitRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /**************************************************** HOVER PREMIUM *****************************************************/ .miel-glow:hover .miel-particle{ animation-duration:1.6s; } .miel-glow:hover .miel-star{ animation-duration:1.2s; } .miel-glow:hover .miel-orbit{ animation-duration:6s; } .miel-glow:hover{ transform: translateY(-2px) scale(1.015); } /**************************************************** MOBILE *****************************************************/ @media (max-width:768px){ .miel-orbit{ display:none; } .miel-particle{ width:3px; height:3px; } .miel-star{ width:12px; height:12px; } } /**************************************************** REDUCED MOTION *****************************************************/ @media (prefers-reduced-motion:reduce){ .miel-particle, .miel-star, .miel-orbit, .miel-halo, .glow-hero, .glow-medium, .glow-strong{ animation:none !important; } }