globals.css

@import "tailwindcss";

:root {
    --foreground: #ffffff;
    --background: linear-gradient(206deg, #4E0088 13.13%, #180029 86.33%);
    overflow-x: hidden;
}

/* Lenis Smooth Scroll */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: linear-gradient(206deg, #4E0088 13.13%, #4E0088 13.33%);
        --foreground: #ededed;
    }
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family:
        var(--font-geist-sans),
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

.font-kanit {
    font-family: var(--font-kanit), var(--font-geist-sans), sans-serif;
}

.font-poppins {
    font-family: var(--font-poppins), var(--font-geist-sans), sans-serif;
}

.text-stroke-brand-thick {
    -webkit-text-stroke: 10px #62009b;
    paint-order: stroke fill;
}

.text-stroke-number {
    paint-order: stroke fill;
}

.text-stroke-white-thick {
    -webkit-text-stroke: 10px #ffffff;
    paint-order: stroke fill;
}

.text-stroke-white-medium {
    -webkit-text-stroke: 4px #ffffff;
    paint-order: stroke fill;
}

.text-stroke-white-thin {
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
}

.text-stroke-black-thick {
    -webkit-text-stroke: 14px #000000;
    paint-order: stroke fill;
}

/* View Transitions */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Interactive Glass Cracks ── */

/* Dim overlay — darkens hero as cracks accumulate */
.crack-dim-overlay {
    position: absolute;
    inset: 0;
    z-index: 29;
    pointer-events: none;
    background: radial-gradient(
        ellipse 120% 100% at 50% 50%,
        rgba(5, 0, 12, 0.6) 0%,
        rgba(10, 0, 25, 0.85) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Subtle glass sheen overlay */
.glass-pane {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025) 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.012) 55%,
        transparent 100%
    );
}

/* SVG canvas for persistent crack lines */
.crack-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 31;
    pointer-events: none;
    overflow: visible;
}

/* Base crack line — responsive via media queries */
.crack-line {
    fill: none;
    stroke: rgba(235, 225, 255, 0.98);
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 12;
    filter: drop-shadow(0 0 7px rgba(150, 90, 255, 0.85))
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
            drop-shadow(0 0 16px rgba(170, 100, 255, 0.35))
            drop-shadow(0 0 24px rgba(130, 70, 220, 0.25));
}

/* Inner core line to add visible thickness down the middle */
.crack-core-line {
    fill: none;
    stroke: rgba(255, 252, 255, 1);
    stroke-width: 0.9;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 12;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 14px rgba(190, 130, 255, 0.45));
}

/* Main (thickest) crack per click — strong glow */
.crack-main {
    stroke: rgba(235, 220, 255, 1);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 10px rgba(120, 60, 200, 0.95))
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))
            drop-shadow(0 0 22px rgba(90, 0, 170, 0.55))
            drop-shadow(0 0 36px rgba(170, 80, 255, 0.25));
}

/* Secondary branches */
.crack-branch {
    fill: none;
    stroke: rgba(190, 170, 240, 0.6);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(120, 60, 200, 0.6))
            drop-shadow(0 0 8px rgba(160, 90, 255, 0.25));
}

/* Branches off the main crack */
.crack-main-branch {
    stroke: rgba(220, 205, 255, 0.75);
    stroke-width: 1.3;
    filter: drop-shadow(0 0 6px rgba(120, 60, 200, 0.75))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.35))
            drop-shadow(0 0 14px rgba(170, 80, 255, 0.25));
}

/* Concentric ring fragments */
.crack-ring {
    fill: none;
    stroke: rgba(170, 150, 220, 0.45);
    stroke-width: 0.7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(98, 0, 155, 0.35))
            drop-shadow(0 0 6px rgba(140, 80, 220, 0.15));
}

/* Yellow impact flash circle */
.crack-impact {
    fill: none;
    stroke: rgba(255, 238, 0, 0.55);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 10px rgba(255, 238, 0, 0.4))
            drop-shadow(0 0 20px rgba(255, 200, 0, 0.2));
}

/* Radial glow blob at impact center */
.crack-center-glow {
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
}

.crack-center-core {
    fill: rgba(250, 245, 255, 0.9);
    stroke: rgba(195, 145, 255, 0.95);
    stroke-width: 1.1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7))
            drop-shadow(0 0 16px rgba(170, 90, 255, 0.45));
}

/* Persistent glow chip at each impact point */
.crack-glow {
    fill: rgba(210, 190, 255, 0.6);
    filter: drop-shadow(0 0 5px rgba(98, 0, 155, 0.7))
            drop-shadow(0 0 10px rgba(140, 80, 220, 0.4))
            drop-shadow(0 0 3px rgba(255, 238, 0, 0.15));
}

/* ── Cursor-Following Cracks ── */
.cursor-crack-line {
    fill: none;
    filter: drop-shadow(0 0 5px rgba(150, 90, 255, 0.7))
            drop-shadow(0 0 10px rgba(190, 130, 255, 0.3));
}

/* ── Responsive crack scaling via stroke-width ── */
@media (min-width: 768px) {
    .crack-line { stroke-width: 1.8; }
    .crack-core-line { stroke-width: 1.1; }
    .crack-main { stroke-width: 3; }
    .crack-branch { stroke-width: 1.1; }
    .crack-main-branch { stroke-width: 1.6; }
    .crack-ring { stroke-width: 0.9; }
    .crack-impact { stroke-width: 2; }
}

@media (min-width: 1280px) {
    .crack-line { stroke-width: 2.2; }
    .crack-core-line { stroke-width: 1.35; }
    .crack-main { stroke-width: 3.5; }
    .crack-branch { stroke-width: 1.3; }
    .crack-main-branch { stroke-width: 1.8; }
    .crack-ring { stroke-width: 1.1; }
    .crack-impact { stroke-width: 2.5; }
}

@media (min-width: 1920px) {
    .crack-line { stroke-width: 2.8; }
    .crack-core-line { stroke-width: 1.65; }
    .crack-main { stroke-width: 4.2; }
    .crack-branch { stroke-width: 1.6; }
    .crack-main-branch { stroke-width: 2.2; }
    .crack-ring { stroke-width: 1.3; }
    .crack-impact { stroke-width: 3; }
}