/* ===========================================================
   4 CORNER GIFS — 25% OF SCREEN WIDTH
=========================================================== */

.corner-gif {
  position: fixed;
  z-index: -999;
  pointer-events: none;
  opacity: 0.55;                 /* visible but elegant */
}

.corner-gif img {
  width: 25vw;                   /* ⭐ GIF = 25% of screen width */
  height: auto;
  object-fit: contain;
  filter: blur(0px);
}

/* Corner positions */
.corner-gif.tl { top: 0; left: 0; }
.corner-gif.tr { top: 0; right: 0; }
.corner-gif.bl { bottom: 0; left: 0; }
.corner-gif.br { bottom: 0; right: 0; }

/* ===========================================================
   MOBILE: make GIFs bigger + keep them lifted
=========================================================== */
@media (max-width: 600px) {

  .corner-gif img {
    width: 50vw;     /* 🔥 bigger GIF on mobile */
    opacity: 0.70;   /* slightly clearer */
  }

  .corner-gif.bl {
    bottom: 120px;   /* keep it lifted */
  }

  .corner-gif.br {
    bottom: 120px;   /* keep it lifted */
  }

}
/* Main glowing cursor */
.cursor-main{
    position: fixed;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #ffeb3b, #ffcc00);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow: 
        0 0 12px rgba(255, 221, 70, 0.9),
        0 0 25px rgba(255, 187, 0, 0.6),
        0 0 40px rgba(255, 170, 0, 0.5);
    transform: translate(-50%, -50%);
    transition: transform 0.08s linear;
    z-index: 99999;
}

/* trailing particles */
.cursor-trail{
    position: fixed;
    width: 10px;
    height: 10px;
    background: rgba(255,255,140,0.7);
    border-radius: 50%;
    filter: blur(1.5px);
    pointer-events: none;
    opacity: 0.65;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: transform 0.15s, opacity 0.3s;
}

/* Pulse on click */
.cursor-main.click-pulse{
    animation: pulse 0.45s ease-out;
}

@keyframes pulse{
    0%   { transform: scale(1); }
    50%  { transform: scale(1.8); box-shadow:0 0 50px rgba(255,210,80,1); }
    100% { transform: scale(1); }
}

/* On hover elements pull+grow effect */
a:hover ~ .cursor-main,
button:hover ~ .cursor-main,
.nav__link:hover ~ .cursor-main {
    transform: scale(1.4);
    box-shadow:
        0 0 25px rgba(255, 230, 100, 1),
        0 0 40px rgba(255,200,0,0.9),
        0 0 65px rgba(255,180,0,0.7);
}

/* Smooth attraction to interactive elements */
a:hover ~ .cursor-main,
button:hover ~ .cursor-main {
    animation: attract 0.4s alternate infinite ease-out;
}

@keyframes attract{
    0% { filter: brightness(1) }
    100% { filter: brightness(1.45) }
}
/* Water ripple rings */
.ripple {
    position: fixed;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,200,0.55);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: rippleExpand 1.2s ease-out forwards;
    mix-blend-mode: screen;
}

@keyframes rippleExpand {
    0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(6); }
}

/* Beach sand sparkle particles */
.sparkle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fffad1, #ffe06c);
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transform: translate(-50%,-50%);
    animation: sparkleFade 0.9s ease-out forwards;
    filter: blur(0.6px) brightness(1.8);
    mix-blend-mode: screen;
}

@keyframes sparkleFade {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(1);}
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4);}
}

/* ===================== SCROLLBAR STYLING ===================== */

::-webkit-scrollbar {
    width: 10px;
    background: rgba(0,0,0,0);      /* transparent track */
}

/* Track (background) */
::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #cbe5ff 0%, #b3d9ff 40%, #ffe7a1 100%);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 200, 0.5);
}

/* Scroll thumb (moving part) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffdd55, #ffb300);
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 
        0 0 10px rgba(255,210,80,0.8),
        0 0 18px rgba(255,140,0,0.6);
    transition: 0.3s ease-in-out;
}

/* Hover effect – thumb glows like sun reflection */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffe97f, #ffca28);
    box-shadow: 
        0 0 12px rgba(255,230,120,1),
        0 0 25px rgba(255,180,0,0.9);
}

/* Click effect – ripple shrink */
::-webkit-scrollbar-thumb:active {
    transform: scale(0.88);
    background: #ffc400;
}

/* Optional smooth scroll */
html {
    scroll-behavior: smooth;
}