/* Smooth Custom Cursor - cursor.css (v4.0) */

body {
    cursor: none;
}

*, *::before, *::after {
    cursor: none !important;
}

/* ======================================================
   STYLE 1: DOT + RING (classic / default)
====================================================== */
#scc-cursor {
    position: fixed;
    width: var(--scc-size, 12px);
    height: var(--scc-size, 12px);
    border-radius: 50%;
    background: var(--scc-color, #00ffff);
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: left, top, transform;
}
#scc-cursor-ring {
    position: fixed;
    width: calc(var(--scc-size, 12px) * 4);
    height: calc(var(--scc-size, 12px) * 4);
    border: 1.5px solid var(--scc-color, #00ffff);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    mix-blend-mode: difference;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: left, top;
}
body.scc-hover #scc-cursor {
    transform: translate(-50%, -50%) scale(1.8);
}
body.scc-hover #scc-cursor-ring {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.3;
}

/* ======================================================
   STYLE 2: GLOW CIRCLE (small circle -> grows with text on hover)
====================================================== */
#scc-glow-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-glow-size, 14px);
    height: var(--scc-glow-size, 14px);
    border-radius: 50%;
    background: var(--scc-glow-color, #a29bfe);
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: left, top;
}
#scc-glow-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--scc-glow-text-color, #0d0e11);
    opacity: 0;
    transition: opacity 0.25s ease;
    white-space: nowrap;
}
body.scc-hover #scc-glow-circle {
    width: var(--scc-glow-hover-size, 64px);
    height: var(--scc-glow-hover-size, 64px);
}
body.scc-hover #scc-glow-text {
    opacity: 1;
}

/* ======================================================
   STYLE 3: DIAMOND
====================================================== */
#scc-diamond {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-diamond-size, 26px);
    height: var(--scc-diamond-size, 26px);
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: left, top, transform;
}
.scc-diamond-shape {
    width: 100%;
    height: 100%;
    background: var(--scc-diamond-color, #a29bfe);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: border-radius 0.4s ease, background 0.4s ease;
}
body.scc-hover #scc-diamond {
    width: var(--scc-diamond-hover-size, 46px);
    height: var(--scc-diamond-hover-size, 46px);
}
body.scc-hover .scc-diamond-shape {
    border-radius: 50%;
    background: var(--scc-diamond-hover-color, #6c5ce7);
    mix-blend-mode: difference;
}

/* ======================================================
   STYLE 4: WATER ARROW
====================================================== */
#scc-water-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-water-size, 26px);
    height: var(--scc-water-size, 26px);
    pointer-events: none;
    z-index: 2147483647;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: left, top;
}
body.scc-hover #scc-water-cursor {
    width: var(--scc-water-hover-size, 42px);
    height: var(--scc-water-hover-size, 42px);
}
#scc-water-cursor svg { width: 100%; height: 100%; overflow: visible; }
#scc-water-outline {
    fill: none;
    stroke: var(--scc-water-dark, #16a34a);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.scc-water-level { animation: sccRiseFall var(--scc-water-speed, 3.2s) ease-in-out infinite; }
.scc-water-wave { animation: sccRipple 1.6s linear infinite; }
.scc-water-shine { fill: #fff; opacity: 0.35; }

@keyframes sccRiseFall {
    0%   { transform: translateY(22px); }
    45%  { transform: translateY(-2px); }
    55%  { transform: translateY(-2px); }
    100% { transform: translateY(22px); }
}
@keyframes sccRipple {
    from { transform: translateX(0); }
    to   { transform: translateX(-24px); }
}
#scc-water-cursor.scc-water-multicolor { animation: sccHueCycle 4s linear infinite; }
@keyframes sccHueCycle {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ======================================================
   STYLE 5 & 6: SHARED ARROW (Bubble Trail / Character Trail)
====================================================== */
#scc-bubble-cursor,
#scc-char-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483647;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: width 0.25s ease, height 0.25s ease;
    will-change: left, top;
}
#scc-bubble-cursor {
    width: var(--scc-bubble-size, 22px);
    height: var(--scc-bubble-size, 22px);
}
#scc-char-cursor {
    width: var(--scc-char-size, 22px);
    height: var(--scc-char-size, 22px);
}
body.scc-hover #scc-bubble-cursor {
    width: var(--scc-bubble-hover-size, 30px);
    height: var(--scc-bubble-hover-size, 30px);
}
body.scc-hover #scc-char-cursor {
    width: var(--scc-char-hover-size, 30px);
    height: var(--scc-char-hover-size, 30px);
}
#scc-bubble-cursor svg,
#scc-char-cursor svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.scc-arrow-fill { fill: var(--scc-arrow-fill, #ffffff); }
.scc-arrow-outline {
    fill: none;
    stroke: var(--scc-arrow-outline, #222222);
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.scc-bubble {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
    animation: sccFloatUp 1.4s ease-out forwards;
}
.scc-char-particle {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483646;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: sccFloatUp 1.2s ease-out forwards;
}
@keyframes sccFloatUp {
    0% { transform: translate(-50%, -50%) translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 0.95; }
    100% { transform: translate(-50%, -50%) translateY(-55px) translateX(var(--drift, 0px)) rotate(var(--spin, 0deg)) scale(0.5); opacity: 0; }
}

/* ======================================================
   STYLE 7: SPARKLE -> ARROW-IN-CIRCLE
====================================================== */
#scc-sparkle-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-sparkle-size, 30px);
    height: var(--scc-sparkle-size, 30px);
    pointer-events: none;
    z-index: 2147483647;
    will-change: transform;
}
.scc-sparkle-spin {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#scc-sparkle-cursor svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.scc-icon-sparkle,
.scc-icon-arrow {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.scc-icon-sparkle path {
    fill: var(--scc-sparkle-color, #c9a768);
    filter: drop-shadow(0 0 6px var(--scc-sparkle-color, #c9a768));
}
.scc-icon-arrow {
    opacity: 0;
    transform: scale(0.4) rotate(-45deg);
}
.scc-icon-arrow circle {
    fill: none;
    stroke: var(--scc-sparkle-color, #c9a768);
    stroke-width: 1.4;
}
.scc-icon-arrow path {
    stroke: var(--scc-sparkle-hover-color, #f3efe6);
}
body.scc-hover .scc-icon-sparkle {
    opacity: 0;
    transform: scale(0.4) rotate(45deg);
}
body.scc-hover .scc-icon-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
body.scc-click #scc-sparkle-cursor .scc-sparkle-spin {
    transform: scale(0.8);
}

/* ======================================================
   STYLE 8: SEED -> BLOOM (with trailing vine)
====================================================== */
#scc-seed-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-seed-size, 26px);
    height: var(--scc-seed-size, 26px);
    pointer-events: none;
    z-index: 2147483647;
    will-change: transform;
}
.scc-seed-spin {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#scc-seed-cursor svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.scc-icon-seed,
.scc-icon-bloom {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scc-icon-seed path {
    fill: var(--scc-seed-color, #c9a768);
    filter: drop-shadow(0 0 5px var(--scc-seed-color, #c9a768));
}
.scc-icon-bloom {
    opacity: 0;
    transform: scale(0.2) rotate(-90deg);
}
.scc-icon-bloom .scc-petal-a { fill: var(--scc-bloom-petal-color, #c9a768); }
.scc-icon-bloom .scc-petal-b { fill: var(--scc-bloom-petal-color2, #f3efe6); opacity: 0.92; }
.scc-icon-bloom .scc-bloom-center { fill: var(--scc-bloom-center-color, #0d0e11); }
body.scc-hover .scc-icon-seed {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
}
body.scc-hover .scc-icon-bloom {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
body.scc-click #scc-seed-cursor .scc-seed-spin {
    transform: scale(0.82);
}
.scc-vine-node {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: var(--scc-vine-color, #2f5d50);
    pointer-events: none;
    z-index: 2147483646;
    will-change: transform;
    transition: background 0.4s ease, opacity 0.3s ease;
}
body.scc-hover .scc-vine-node {
    background: var(--scc-bloom-petal-color, #c9a768);
}

/* ======================================================
   STYLE 9: IMAGE CURSOR
====================================================== */
#scc-image-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scc-image-size, 32px);
    height: var(--scc-image-size, 32px);
    object-fit: contain;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease;
    will-change: left, top;
}
body.scc-hover #scc-image-cursor {
    width: var(--scc-image-hover-size, 40px);
    height: var(--scc-image-hover-size, 40px);
}