/* ============================================
   gabs.review — Graffiti meets Geological Wonder
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

body {
    background: #2d2a2e;
    color: #e8e0d4;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.6;
    overflow-x: hidden;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Concrete Texture (CSS noise) --- */
.concrete-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(255,255,255,0.03) 0%, transparent 70%),
        radial-gradient(ellipse at 72% 60%, rgba(255,255,255,0.025) 0%, transparent 70%),
        radial-gradient(ellipse at 40% 80%, rgba(255,255,255,0.02) 0%, transparent 70%),
        radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.03) 0%, transparent 70%),
        radial-gradient(ellipse at 55% 40%, rgba(255,255,255,0.015) 0%, transparent 70%),
        radial-gradient(ellipse at 20% 70%, rgba(255,255,255,0.025) 0%, transparent 70%),
        radial-gradient(ellipse at 90% 85%, rgba(255,255,255,0.02) 0%, transparent 70%),
        radial-gradient(ellipse at 30% 10%, rgba(255,255,255,0.03) 0%, transparent 70%);
    opacity: 0.8;
}

/* --- Vein Lines --- */
.vein-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.vein-lines line {
    animation: veinPulse 4s ease-in-out infinite alternate;
}

@keyframes veinPulse {
    0% { stroke-opacity: 0.1; }
    100% { stroke-opacity: 0.2; }
}

/* --- Wall Sections --- */
.wall {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
}

/* Jagged transitions between sections */
.fresh-wall {
    clip-path: polygon(0 3vh, 8% 0, 20% 2vh, 35% 0.5vh, 50% 3vh, 65% 1vh, 80% 2.5vh, 92% 0, 100% 2vh, 100% 100%, 0 100%);
    margin-top: -3vh;
    padding-top: clamp(4rem, 7vw, 7rem);
}

.deep-wall {
    clip-path: polygon(0 2.5vh, 12% 0, 25% 3vh, 40% 1vh, 55% 2.5vh, 70% 0, 85% 2vh, 100% 0.5vh, 100% 100%, 0 100%);
    margin-top: -3vh;
    padding-top: clamp(4rem, 7vw, 7rem);
}

.echo-wall {
    clip-path: polygon(0 1.5vh, 10% 3vh, 22% 0, 38% 2.5vh, 52% 0.5vh, 68% 3vh, 82% 1vh, 95% 2.5vh, 100% 0, 100% 100%, 0 100%);
    margin-top: -3vh;
    padding-top: clamp(4rem, 7vw, 7rem);
}

/* --- Hero Wall --- */
.hero-wall {
    background: #2d2a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.hero-title {
    font-family: 'Bungee Shade', cursive;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #7b2d8e;
    text-shadow:
        3px 3px 0 #1a1818,
        6px 6px 0 rgba(26,24,24,0.5),
        0 0 40px rgba(123,45,142,0.3);
    position: relative;
    z-index: 5;
    opacity: 0;
    animation: sprayIn 1.2s ease-out 0.3s forwards;
}

.hero-subtitle {
    font-family: 'Lilita One', cursive;
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    color: #d4a017;
    margin-top: 0.5rem;
    position: relative;
    z-index: 5;
    opacity: 0;
    animation: fadeSlideUp 0.8s ease-out 1s forwards;
}

@keyframes sprayIn {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.95);
    }
    60% {
        opacity: 1;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Crystal Clusters --- */
.crystal-cluster {
    position: absolute;
    z-index: 3;
}

.hero-crystals {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
}

.crystal {
    position: absolute;
    filter: drop-shadow(0 0 6px currentColor);
}

.hero-crystals .c1 { left: 10%; top: 20%; transform: scale(0) rotate(45deg); animation: crystalEmerge 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.4s forwards; }
.hero-crystals .c2 { left: 35%; top: 50%; transform: scale(0) rotate(-30deg); animation: crystalEmerge 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.6s forwards; }
.hero-crystals .c3 { left: 55%; top: 10%; transform: scale(0) rotate(60deg); animation: crystalEmerge 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.8s forwards; }
.hero-crystals .c4 { left: 75%; top: 55%; transform: scale(0) rotate(-45deg); animation: crystalEmerge 0.6s cubic-bezier(0.34,1.56,0.64,1) 2s forwards; }
.hero-crystals .c5 { left: 50%; top: 35%; transform: scale(0) rotate(20deg); animation: crystalEmerge 0.6s cubic-bezier(0.34,1.56,0.64,1) 2.2s forwards; }

@keyframes crystalEmerge {
    to {
        transform: scale(1) rotate(0deg);
    }
}

/* --- Section Headers --- */
.section-header {
    font-family: 'Lilita One', cursive;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 400;
    color: #e8e0d4;
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
    position: relative;
    z-index: 5;
    text-shadow: 2px 2px 0 #1a1818;
}

/* --- Review Grids --- */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(14rem, 30vw, 22rem), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    position: relative;
    z-index: 5;
}

.review-card {
    background: rgba(26,24,24,0.7);
    border-left: 4px solid var(--accent-color);
    padding: clamp(1.2rem, 2vw, 2rem);
    transform: rotate(var(--card-rotation));
    position: relative;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0;
}

.review-card.tall {
    grid-row: span 2;
}

/* Paint drip */
.review-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 8px;
    height: 0;
    background: var(--accent-color);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.7;
    transform: translateY(100%);
    transition: height 0.8s ease-out;
}

.review-card.dripping::after {
    height: var(--drip-length);
}

/* Hover effects */
.review-card:hover {
    transform: rotate(var(--card-rotation)) translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.review-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: #e8e0d4;
    margin-bottom: 0.8rem;
}

.review-author {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: var(--accent-color);
    display: block;
}

/* --- Shake Animation --- */
@keyframes shakeIn {
    0%   { opacity: 0; transform: rotate(var(--card-rotation)) translateX(-4px) scale(1.02); }
    15%  { opacity: 0.5; transform: rotate(var(--card-rotation)) translateX(4px) scale(1.02); }
    30%  { opacity: 0.8; transform: rotate(var(--card-rotation)) translateX(-2px) scale(1.01); }
    50%  { opacity: 0.9; transform: rotate(var(--card-rotation)) translateX(2px) scale(1.005); }
    70%  { opacity: 1; transform: rotate(var(--card-rotation)) translateX(-1px) scale(1); }
    85%  { transform: rotate(var(--card-rotation)) translateX(1px); }
    100% { opacity: 1; transform: rotate(var(--card-rotation)) translateX(0); }
}

.review-card.shake-visible {
    animation: shakeIn 0.4s ease-out forwards;
}

/* --- Splatter Marks --- */
.splatter-marks {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-card:hover .splatter-marks {
    opacity: 1;
}

.splatter-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.6;
}

/* --- Deep Wall --- */
.deep-wall {
    background: #1e3a6e;
}

.deep-card {
    background: rgba(26,24,24,0.6);
    border-left-width: 5px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.crystal-border {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.crystal-corner {
    position: absolute;
    filter: drop-shadow(0 0 4px currentColor);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    transform: scale(0) rotate(-30deg);
}

.review-card:hover .crystal-corner {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.crystal-corner.tl { top: -8px; left: -8px; }
.crystal-corner.tr { top: -8px; right: -8px; }
.crystal-corner.bl { bottom: -8px; left: -8px; }
.crystal-corner.br { bottom: -8px; right: -8px; }

/* --- Fresh Wall --- */
.fresh-wall {
    background: #2d2a2e;
    background-image:
        radial-gradient(ellipse at 30% 50%, rgba(123,45,142,0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(212,160,23,0.04) 0%, transparent 60%);
}

/* --- Echo Wall --- */
.echo-wall {
    background: #1a1818;
    min-height: 120vh;
}

.echo-container {
    position: relative;
    width: 100%;
    height: 80vh;
    z-index: 5;
}

.echo-quote {
    position: absolute;
    left: var(--eq-x);
    top: var(--eq-y);
    font-family: 'Permanent Marker', cursive;
    font-size: var(--eq-size);
    color: #e8e0d4;
    opacity: var(--eq-opacity);
    transform: rotate(var(--eq-rotation));
    transition: opacity 1s ease, transform 1s ease;
    white-space: nowrap;
}

.echo-quote.eq-center {
    color: #e8c520;
    z-index: 10;
}

.echo-wall.echo-active .echo-quote {
    opacity: 0.05;
}

.echo-wall.echo-active .echo-quote.eq-center {
    opacity: 1;
    transform: rotate(0deg) scale(1.1);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-card.tall {
        grid-row: span 1;
    }

    .hero-crystals {
        width: 250px;
        height: 130px;
    }

    .echo-quote {
        white-space: normal;
        max-width: 60vw;
    }
}