/* =================================================================
   SECTIONS.CSS — ALL PAGE SECTIONS
   Hero, About, Skills, Projects, Contact, Footer with effects
   ================================================================= */

/* =================================================================
   HERO SECTION — Stone & Serpent Realism
   Full-screen landing with title, CTAs, and atmospheric effects
   ================================================================= */

.hero {
    /* Layout */
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
}

/* ═══ HERO BACKGROUND WITH HOUSE TINT ═══ */
/* Layered gradients create colored tinting over the background image */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 60% at 18% 18%, var(--house-glow-1), transparent 65%),
        radial-gradient(55% 65% at 72% 12%, var(--house-glow-2), transparent 70%),
        linear-gradient(180deg, rgba(5, 10, 8, .18) 0%, rgba(7, 16, 12, .45) 100%),
        var(--bg-hero) center/cover no-repeat;
    background-blend-mode: screen, screen, normal, normal;
    z-index: 0;
    filter: brightness(1.08) saturate(102%);
    transition: transform 0.3s ease-out;
}

/* ═══ SERPENT DECORATION — Atmospheric Side Element ═══ */
/* Large decorative serpent that breathes with animation */
.hero-serpent {
    position: absolute;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    width: 58vw;
    max-width: 980px;
    opacity: .28;
    /* Subtle presence */

    /* Radial glow creates depth */
    background: radial-gradient(40% 40% at 50% 50%,
            rgba(12, 59, 46, .5),
            transparent 70%);
    filter: blur(6px);
    animation: serpent-breathe 4s ease-in-out infinite;
}

/* ═══ HERO CONTENT — Text and CTAs ═══ */
.hero-content {
    position: relative;
    z-index: 2;
    /* Above background effects */
    padding: 2rem;
    max-width: 1000px;
}

/* ═══ HERO TITLE — Large Display Font ═══ */
.hero-title {
    /* Typography */
    font-family: 'HarryPotter', 'Old London', 'Cinzel', serif;
    font-size: clamp(3.4rem, 7.8vw, 7.2rem);
    color: var(--gold);
    letter-spacing: 0.08em;

    /* Effects */
    text-shadow:
        0 6px 32px rgba(0, 0, 0, .6),
        0 0 40px rgba(197, 165, 107, 0.4);

    /* Layout and animation */
    position: relative;
    display: inline-block;
    opacity: 0;
    /* Starts hidden */

    /* Entrance animation + periodic glitch */
    animation: hero-title-entrance 1.2s ease-out 0.3s forwards,
        title-glitch 8s linear 2s infinite;

    will-change: transform, filter;
    /* Performance optimization */
}

/* Floating effect on hover only (smooth, subtle) */
.hero-title:hover {
    animation: hero-title-entrance 1.2s ease-out 0.3s forwards,
        title-glitch 8s linear 2s infinite,
        title-float-hover 3s ease-in-out infinite;
}

/* ═══ HERO SUBTITLE — Uppercase Profession ═══ */
.hero-subtitle {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--silver);
    margin-top: .5rem;

    /* Entrance animation with elastic bounce */
    opacity: 0;
    transform: translateY(20px);
    animation: hero-subtitle-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

/* ═══ HERO TAGLINE — Italic Description ═══ */
.hero-tagline {
    font-style: italic;
    color: var(--silver);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 760px;
    margin: 1.2rem auto 2.2rem;

    /* Entrance animation */
    opacity: 0;
    transform: translateY(20px);
    animation: hero-tagline-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards;
}

/* ═══ HERO CALL-TO-ACTION BUTTONS ═══ */
.hero-ctas {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;

    /* Entrance animation */
    opacity: 0;
    transform: translateY(20px);
    animation: hero-ctas-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
}

/* CTA button base styling */
.hero-cta {
    /* Layout */
    padding: 0.80rem 2rem;
    border-radius: 42px;
    text-decoration: none;
    display: inline-flex;
    gap: .6rem;
    align-items: center;

    /* Typography */
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    /* Animation */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CTA icons */
.cta-icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(197, 165, 107, 0.4));
    transition: transform var(--t-med), filter var(--t-med);
}

.hero-cta:hover .cta-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(197, 165, 107, 0.6));
}

/* ═══ PRIMARY CTA — Gold Accent Button ═══ */
.hero-cta-primary {
    color: var(--gold);
    background: linear-gradient(135deg,
            rgba(197, 165, 107, 0.18) 0%,
            rgba(183, 150, 95, 0.25) 100%);
    border: 2px solid rgba(197, 165, 107, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-cta-primary:hover {
    background: linear-gradient(135deg,
            rgba(197, 165, 107, 0.28) 0%,
            rgba(183, 150, 95, 0.35) 100%);
    border-color: rgba(197, 165, 107, 0.7);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(197, 165, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

/* ═══ SECONDARY CTA — House-Themed Button ═══ */
.hero-cta-secondary {
    color: var(--gold);
    background: var(--hero-cta-secondary-bg);
    border: 2px solid rgba(197, 165, 107, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-cta-secondary:hover {
    background: var(--hero-cta-secondary-hover-bg);
    border-color: rgba(197, 165, 107, 0.6);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 30px var(--house-accent-light),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

/* ═══ SCROLL INDICATOR — Animated Down Arrow ═══ */
.scroll-indicator {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    opacity: .85;
    animation: bob 2.6s infinite;
    /* Gentle bobbing motion */
}

/* ═══ HERO FLOATING PARTICLES — Ambient Magic ═══ */
/* Created by particles.js, styled here */
.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: float-particle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
    /* Fades in during animation */
}

/* Gold particle variant */
.hero-particle.gold {
    background: radial-gradient(circle,
            rgba(197, 165, 107, 1) 0%,
            rgba(197, 165, 107, 0.6) 50%,
            transparent 100%);
    box-shadow: 0 0 8px rgba(197, 165, 107, 0.8);
}

/* Emerald particle variant */
.hero-particle.emerald {
    background: radial-gradient(circle,
            rgba(126, 186, 148, 1) 0%,
            rgba(126, 186, 148, 0.6) 50%,
            transparent 100%);
    box-shadow: 0 0 8px rgba(126, 186, 148, 0.8);
}

/* House-colored particle variant (adapts to theme) */
.hero-particle.house-colored {
    background: radial-gradient(circle,
            var(--wand-magic-color-1) 0%,
            var(--wand-magic-color-2) 50%,
            transparent 100%);
    box-shadow: 0 0 8px var(--wand-magic-glow);
}

/* ═══ PREMIUM VIGNETTE OVERLAY SYSTEM ═══ */
/* Strong top/bottom masking, softer left/right edges */

/* Hero section vignette with adjustable overlay */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    /* Layered gradient system:
       1. Adjustable overlay (controlled by --hero-overlay)
       2. Heavy top/bottom fade
       3. Softer left/right edge darkening
       4. Corner radial darkening for depth */
    background:
        /* Adjustable overlay - theme controls this */
        linear-gradient(var(--hero-overlay), var(--hero-overlay)),

        /* Heavy vertical fade - masks header/footer transition */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.5) 8%,
            rgba(0, 0, 0, 0.2) 18%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.2) 82%,
            rgba(0, 0, 0, 0.5) 92%,
            rgba(0, 0, 0, 0.75) 100%),

        /* Softer horizontal edges */
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 15%),
        linear-gradient(270deg,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 15%),

        /* Corner darkening for depth */
        radial-gradient(ellipse at top left,
            rgba(0, 0, 0, 0.4) 0%,
            transparent 40%),
        radial-gradient(ellipse at top right,
            rgba(0, 0, 0, 0.4) 0%,
            transparent 40%),
        radial-gradient(ellipse at bottom left,
            rgba(0, 0, 0, 0.4) 0%,
            transparent 40%),
        radial-gradient(ellipse at bottom right,
            rgba(0, 0, 0, 0.4) 0%,
            transparent 40%);
}

/* Content sections vignette (About, Skills, Projects, Contact) */
.content-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    /* Similar layered system with heavier top fade for section transitions */
    background:
        /* Very heavy top fade - critical for masking between sections */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.65) 5%,
            rgba(0, 0, 0, 0.4) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            transparent 28%,
            transparent 72%,
            rgba(0, 0, 0, 0.15) 80%,
            rgba(0, 0, 0, 0.4) 88%,
            rgba(0, 0, 0, 0.65) 95%,
            rgba(0, 0, 0, 0.85) 100%),

        /* Lighter horizontal edges */
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.1) 8%,
            transparent 18%),
        linear-gradient(270deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.1) 8%,
            transparent 18%),

        /* Subtle corner vignette */
        radial-gradient(ellipse 140% 100% at top left,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 45%),
        radial-gradient(ellipse 140% 100% at top right,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 45%),
        radial-gradient(ellipse 140% 100% at bottom left,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 45%),
        radial-gradient(ellipse 140% 100% at bottom right,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 45%),

        /* Central radial fade for overall containment */
        radial-gradient(ellipse 100% 100% at center,
            transparent 40%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.15) 85%,
            rgba(0, 0, 0, 0.25) 100%);
}

/* Ensure content is always above vignette overlay */
.hero-content,
.section-content {
    position: relative;
    z-index: 2;
}

/* =================================================================
   ABOUT SECTION — The Illuminated Statement
   Single premium card with glowing key words
   ================================================================= */

.about-section {
    /* Background with house-colored radial glow */
    background:
        radial-gradient(62% 74% at 52% 20%, var(--house-glow-3), transparent 70%),
        linear-gradient(var(--about-overlay), var(--about-overlay)),
        var(--bg-about) center/cover no-repeat;
    background-blend-mode: screen, normal, normal;
}

/* ═══ ILLUMINATED CARD — Premium Glass Container ═══ */
.about-illuminated-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;

    /* Glassmorphism with house tint */
    background: linear-gradient(135deg,
            var(--house-glass-1) 0%,
            var(--house-glass-2) 100%);
    border: 1px solid rgba(197, 165, 107, .3);
    border-radius: 20px;
    padding: 3.5rem 3rem;

    /* Effects */
    overflow: hidden;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: all var(--t-med) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects - lifts and glows */
body:not(.touch-card-mode) .about-illuminated-card:hover,
.about-illuminated-card.is-revealed {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(197, 165, 107, .65);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .55),
        0 0 60px var(--house-accent-light),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Ambient glow effect at top-right corner */
.about-illuminated-card::after {
    content: "";
    position: absolute;
    inset: -30% -30% auto auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(197, 165, 107, .18),
            transparent 65%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}

body:not(.touch-card-mode) .about-illuminated-card:hover::after,
.about-illuminated-card.is-revealed::after {
    opacity: 1;
}

/* Decorative corner accent */
.about-illuminated-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at top right,
            rgba(197, 165, 107, .08) 0%,
            transparent 70%);
    border-radius: 0 20px 0 100%;
    pointer-events: none;
}

/* Statement container */
.illuminated-statement {
    position: relative;
    z-index: 2;
}

/* Main statement text */
.statement-text {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #E8EAE7;
    margin-bottom: 2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Glowing key words - highlighted terms */
.glow-word {
    position: relative;
    color: var(--gold);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    display: inline-block;
    padding: 0 2px;
}

/* Signature at bottom */
.statement-signature {
    text-align: right;
    color: var(--silver);
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.9;
    margin-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-illuminated-card {
        padding: 2.5rem 2rem;
    }

    .statement-text {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .statement-signature {
        font-size: 1rem;
    }
}

/* =================================================================
   SKILLS SECTION — Potion Vials & Horizontal Cards
   Professional skill cards with animated potion bottles
   ================================================================= */

.skills-section {
    position: relative;
    background:
        radial-gradient(60% 72% at 50% 18%, var(--house-glow-4), transparent 72%),
        linear-gradient(var(--skills-overlay), var(--skills-overlay)),
        var(--bg-skills) center/cover no-repeat;
    background-blend-mode: screen, normal, normal;
    background-attachment: fixed;
    /* Parallax effect */
}

/* Ensure content is above the overlay */
.skills-section .section-content {
    position: relative;
    z-index: 2;
}

/* ═══ SKILLS GRID — Horizontal Card Layout ═══ */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 1.8rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ═══ SKILL CARD — Horizontal Layout ═══ */
/* Text content on left, potion vial on right */
.skill-card {
    /* Glassmorphism */
    background: linear-gradient(135deg,
            var(--house-glass-1) 0%,
            var(--house-glass-2) 100%);
    border: 1px solid rgba(197, 165, 107, .3);
    border-radius: 20px;
    padding: 2rem 2.4rem;

    /* Layout */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 200px;

    /* Effects */
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: all var(--t-med) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
body:not(.touch-card-mode) .skill-card:hover,
.skill-card.is-revealed {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(197, 165, 107, .65);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .55),
        0 0 60px var(--house-accent-light),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Ambient glow effect */
.skill-card::after {
    content: "";
    position: absolute;
    inset: -30% -30% auto auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(197, 165, 107, .18),
            transparent 65%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}

body:not(.touch-card-mode) .skill-card:hover::after,
.skill-card.is-revealed::after {
    opacity: 1;
}

/* Left content area - text information */
.skill-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* Icon styling */
.skill-icon {
    font-size: 2.8rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(197, 165, 107, .4);
    flex-shrink: 0;
    transition: transform var(--t-med), text-shadow var(--t-med);
}

body:not(.touch-card-mode) .skill-card:hover .skill-icon,
.skill-card.is-revealed .skill-icon {
    transform: scale(1.1) rotateY(10deg);
    text-shadow: 0 0 30px rgba(197, 165, 107, .6);
}

/* Typography */
.skill-name {
    font-size: 1.6rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    margin-bottom: 0;
}

.skill-description {
    color: #DADFD9;
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: .9;
}

/* Decorative corner accent */
.skill-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at top right,
            rgba(197, 165, 107, .08) 0%,
            transparent 70%);
    border-radius: 0 20px 0 100%;
    pointer-events: none;
}

/* ═══ POTION VIALS — Horizontal Layout (NO CORK) ═══ */
/* Right side of skill card - shows proficiency level */

.potion-vial-container {
    position: relative;
    width: 90px;
    height: 160px;
    flex-shrink: 0;
    perspective: 400px;
    /* 3D transform context */
}

.potion-vial {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: vial-float 3s ease-in-out infinite;
}

/* ═══ GLASS BOTTLE STRUCTURE ═══ */
/* Realistic glass with highlights and shadows */
.vial-glass {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 140px;

    /* Glass transparency with gradient */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.15) 100%);
    border: 2px solid rgba(197, 165, 107, 0.3);
    border-radius: 12px 12px 18px 18px;
    overflow: hidden;

    /* Glass effects */
    box-shadow:
        inset 2px 0 8px rgba(255, 255, 255, 0.15),
        /* Left highlight */
        inset -2px 0 8px rgba(0, 0, 0, 0.3),
        /* Right shadow */
        0 8px 24px rgba(0, 0, 0, 0.4);
    /* Outer shadow */
    backdrop-filter: blur(2px);
    transition: all var(--t-med);
}

body:not(.touch-card-mode) .skill-card:hover .vial-glass,
.skill-card.is-revealed .vial-glass {
    border-color: rgba(197, 165, 107, 0.5);
    box-shadow:
        inset 2px 0 12px rgba(255, 255, 255, 0.2),
        inset -2px 0 12px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(126, 186, 148, 0.3);
}

/* Glass shine effect - vertical highlight */
.vial-glass::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 15px;
    width: 14px;
    height: 65%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
    border-radius: 4px;
    filter: blur(1px);
}

/* ═══ MAGICAL LIQUID FILL ═══ */
/* Three-color gradient creates depth and realism */
.vial-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--fill-percent, 0%);
    /* Set inline per vial */

    /* House-colored potion gradient */
    background: linear-gradient(180deg,
            var(--potion-color-1) 0%,
            /* Light top */
            var(--potion-color-2) 50%,
            /* Mid tone */
            var(--potion-color-3) 100%);
    /* Dark bottom */
    border-radius: 0 0 16px 16px;

    /* Smooth fill animation on page load */
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Liquid glow effects */
    box-shadow:
        inset 0 2px 12px rgba(197, 165, 107, 0.4),
        0 -2px 20px var(--house-accent-light);
    animation: liquid-shimmer 2s ease-in-out infinite;
}

/* Liquid surface with glow */
.vial-liquid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: radial-gradient(ellipse at center,
            rgba(197, 165, 107, 0.8) 0%,
            var(--house-accent-light) 60%,
            transparent 100%);
    filter: blur(1px);
    animation: surface-ripple 3s ease-in-out infinite;
}

/* ═══ BUBBLES RISING IN LIQUID ═══ */
.vial-bubble {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.6),
            rgba(197, 165, 107, 0.3));
    border-radius: 50%;
    animation: bubble-rise var(--duration) ease-in infinite;
    animation-delay: var(--delay);
    opacity: 0;
    /* Fades in during animation */
}

/* Percentage label below vial */
.vial-label {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);

    /* Styling */
    background: var(--vial-label-bg);
    border: 1px solid rgba(197, 165, 107, 0.35);
    border-radius: 8px;
    padding: 4px 10px;

    /* Typography */
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;

    /* Effects */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    transition: all var(--t-med);
}

body:not(.touch-card-mode) .skill-card:hover .vial-label,
.skill-card.is-revealed .vial-label {
    background: var(--vial-label-hover-bg);
    border-color: rgba(197, 165, 107, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* ═══ MAGICAL STEAM/FUMES EFFECT ON HOVER ═══ */
.vial-steam-container {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 100px;
    pointer-events: none;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.4s ease;
}

body:not(.touch-card-mode) .skill-card:hover .vial-steam-container,
.skill-card.is-revealed .vial-steam-container {
    opacity: 1;
    /* Show on card hover */
}

/* Individual steam particles */
.steam-particle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle,
            var(--house-accent-light) 0%,
            rgba(197, 165, 107, 0.25) 40%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(4px);
    animation: steam-rise var(--duration) ease-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

/* Ambient vapor wisps */
.vapor-wisp {
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 60px;
    background: linear-gradient(180deg,
            transparent 0%,
            var(--house-accent-light) 30%,
            rgba(197, 165, 107, 0.1) 60%,
            transparent 100%);
    filter: blur(8px);
    animation: vapor-flow var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    transform-origin: bottom center;
    opacity: 0;
}

/* Sparkle particles in steam */
.steam-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(197, 165, 107, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(197, 165, 107, 0.6);
    animation: sparkle-float var(--duration) ease-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

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

    .skill-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.6rem;
    }

    .skill-header {
        flex-direction: column;
    }

    .potion-vial-container {
        margin-top: 1rem;
    }
}

/* =================================================================
   PROJECTS SECTION — Magical Image Reveal
   Cards with hover-revealed background images
   ================================================================= */

.projects-section {
    background:
        radial-gradient(58% 70% at 48% 16%, var(--house-glow-5), transparent 70%),
        linear-gradient(var(--projects-overlay), var(--projects-overlay)),
        var(--bg-projects) center/cover no-repeat;
    background-blend-mode: screen, normal, normal;
}

/* ═══ PROJECT CARDS GRID ═══ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ═══ PROJECT CARD — Image Reveal Container ═══ */
.project-card {
    position: relative;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;

    /* Glassmorphism */
    border: 1px solid rgba(197, 165, 107, .3);
    background: linear-gradient(135deg,
            var(--house-glass-1) 0%,
            var(--house-glass-2) 100%);
    padding: 2.4rem;

    /* Layout */
    display: flex;
    flex-direction: column;

    /* Effects */
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: all var(--t-med) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ MAGICAL IMAGE REVEAL ═══ */
/* Hidden by default, appears on hover */
.project-image-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body:not(.touch-card-mode) .project-card:hover .project-image-reveal,
.project-card.is-revealed .project-image-reveal {
    opacity: 1;
}

/* Project image with house tint */
.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(120%) brightness(0.85);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.touch-card-mode) .project-card:hover .project-image,
.project-card.is-revealed .project-image {
    transform: scale(1.08);
    /* Subtle zoom on hover */
}

/*
    -- OVERLAY EFFECTS (COMMENTED OUT) --
    To re-enable the hover overlays on project images,
    remove the surrounding and characters from this block.*/
/*
/ * House color tint overlay * /
.project-image-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            var(--house-accent-dark) 0%,
            var(--house-accent-medium) 50%,
            var(--house-accent-dark) 100%);
    mix-blend-mode: multiply;
    / * Blends with image * /
    z-index: 1;
}

/* Dark gradient at bottom for text readability */
.project-image-reveal::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
}

/* ═══ PROJECT CONTENT — Always Visible Text ═══ */
.project-content {
    position: relative;
    z-index: 3;
    /* Above image */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Project title */
.project-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: text-shadow var(--t-med);
}

body:not(.touch-card-mode) .project-card:hover .project-title,
.project-card.is-revealed .project-title {
    text-shadow:
        0 5px 12px rgba(0, 0, 0, 0.885),
        0 0 20px rgba(197, 165, 107, 0.4);
}

/* Project description */
.project-description {
    color: #E8EAE7;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    /* Updated transition to include opacity */
    transition: text-shadow var(--t-med), opacity var(--t-med);
}

body:not(.touch-card-mode) .project-card:hover .project-description,
.project-card.is-revealed .project-description {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    /* Add this line to make it disappear */
    opacity: 0;
}

/* ═══ TECHNOLOGY TAGS ═══ */
.project-tags {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.project-tag {
    padding: 0.4rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(197, 165, 107, .35);
    color: var(--gold);
    background: var(--house-glass-2);
    backdrop-filter: blur(4px);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--t-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body:not(.touch-card-mode) .project-card:hover .project-tag,
.project-card.is-revealed .project-tag {
    background: var(--house-glass-1);
    border-color: rgba(197, 165, 107, .5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ═══ PROJECT LINKS ═══ */
.project-links {
    display: flex;
    gap: 0.8rem;
}

.project-link {
    padding: 0.7rem 1.4rem;
    border-radius: 18px;
    border: 1px solid rgba(197, 165, 107, .4);
    color: var(--gold);
    text-decoration: none;
    background: var(--house-glass-2);
    backdrop-filter: blur(4px);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--t-med);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.project-link:hover {
    background: rgba(197, 165, 107, .2);
    border-color: rgba(197, 165, 107, .65);
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 20px var(--house-accent-light);
}

/* Card hover effects */
body:not(.touch-card-mode) .project-card:hover,
.project-card.is-revealed {
    transform: translateY(-8px);
    border-color: rgba(197, 165, 107, .6);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .55),
        0 0 60px var(--house-accent-light),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Ambient glow effect */
.project-card::before {
    content: "";
    position: absolute;
    inset: -30% -30% auto auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(197, 165, 107, .15),
            transparent 65%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
    z-index: 0;
}

body:not(.touch-card-mode) .project-card:hover::before,
.project-card.is-revealed::before {
    opacity: 1;
}

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

    .project-card {
        min-height: 380px;
        padding: 2rem;
    }
}

/* =================================================================
   CONTACT SECTION — Premium Magical Form
   Form with validation, character counter, and flying owl animation
   ================================================================= */

.contact-section {
    background:
        radial-gradient(60% 72% at 50% 18%, var(--house-glow-6), transparent 72%),
        linear-gradient(var(--contact-overlay), var(--contact-overlay)),
        var(--bg-contact) center/cover no-repeat;
    background-blend-mode: screen, normal, normal;
}

/* ═══ CONTACT FORM CONTAINER ═══ */
.contact-container {
    max-width: 720px;
    margin: 0 auto;

    /* Glassmorphism */
    background: linear-gradient(135deg,
            var(--house-ui-bg-1),
            var(--house-ui-bg-2));
    border: 1px solid rgba(197, 165, 107, .32);
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Split layout for name/email fields */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-container {
        padding: 2rem 1.5rem;
    }
}

/* ═══ FORM GROUP WITH FLOATING LABELS ═══ */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

/* ═══ GLASSMORPHIC INPUTS ═══ */
.form-input,
.form-textarea {
    /* Layout */
    width: 100%;
    padding: 1.1rem 1rem 0.6rem;

    /* Glassmorphism */
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(197, 165, 107, .28);
    border-radius: 12px;

    /* Typography */
    color: #E7EAE7;
    font-family: inherit;
    font-size: 1rem;

    /* Effects */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(126, 186, 148, .6);
    background: rgba(0, 0, 0, .45);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(126, 186, 148, .15),
        0 0 20px rgba(126, 186, 148, .2);
}

/* ═══ FLOATING LABELS ═══ */
/* Labels that move up when input has content */
.form-label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--silver);
    font-size: 1rem;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

/* Floated state - moves to top corner */
.form-input:focus+.form-label,
.form-input:not(:placeholder-shown)+.form-label,
.form-textarea:focus+.form-label,
.form-textarea:not(:placeholder-shown)+.form-label {
    top: 0.3rem;
    left: 0.8rem;
    font-size: 0.75rem;
    color: var(--gold);
    opacity: 1;
    font-weight: 600;
}

/* ═══ VALIDATION ICONS ═══ */
.validation-icon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 20px;
    height: 20px;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(197, 165, 107, 0.6));
    pointer-events: none;
}

.form-group.valid .validation-icon.valid-icon,
.form-group.invalid .validation-icon.invalid-icon {
    opacity: 1;
}

/* ═══ AUTO-GROWING TEXTAREA ═══ */
.form-textarea {
    min-height: 140px;
    max-height: 400px;
    resize: vertical;
    /* User can resize */
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ CHARACTER COUNTER ═══ */
.char-counter {
    text-align: right;
    color: var(--silver);
    font-size: 0.85rem;
    margin-top: 0.4rem;
    opacity: 0.7;
}

.char-counter.warning {
    color: #FFB84D;
    /* Yellow when approaching limit */
}

.char-counter.danger {
    color: #FF6B6B;
    /* Red when near/at limit */
}

/* ═══ SUBMIT BUTTON ═══ */
.submit-container {
    position: relative;
    margin-top: 2rem;
}

.submit-button {
    /* Layout */
    width: 100%;
    padding: 1.1rem;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;

    /* Styling */
    border: 2px solid rgba(197, 165, 107, .5);
    background: linear-gradient(135deg,
            var(--house-glass-1) 0%,
            var(--house-glass-2) 100%);
    backdrop-filter: blur(8px);
    color: var(--gold);

    /* Typography */
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1rem;

    /* Interaction */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover glow overlay */
.submit-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            var(--house-accent-light) 0%,
            rgba(197, 165, 107, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.submit-button:hover::before {
    opacity: 1;
}

.submit-button:hover {
    border-color: rgba(197, 165, 107, .7);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 30px var(--house-accent-light);
    transform: translateY(-2px);
}

.submit-button:active {
    transform: translateY(0);
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Owl icon */
.submit-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(197, 165, 107, .4));
    transition: transform 0.3s ease;
}

.submit-button:hover .submit-icon {
    transform: scale(1.1);
}

/* ═══ ANIMATED BIRD — Flying Messenger (Single Bird Only) ═══ */
.bird-container {
    position: fixed;
    top: 30%;
    left: -10%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    animation: fly-right-once 8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.bird {
    /* Sprite sheet animation */
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg');
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    animation: fly-cycle 0.8s steps(10) infinite;
    /* Wing flapping */

    /* Premium gold Slytherin color tinting */
    filter: brightness(0) saturate(100%) invert(71%) sepia(28%) saturate(443%) hue-rotate(6deg) brightness(95%) contrast(88%) drop-shadow(0 0 20px rgba(197, 165, 107, 0.8)) drop-shadow(0 0 40px rgba(197, 165, 107, 0.4));
}

/* Hide on mobile */
@media (max-width: 768px) {
    .bird-container {
        display: none;
    }
}

/* ═══ SUCCESS MESSAGE ═══ */
.success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    /* Starts scaled down */

    /* Glassmorphism */
    background: linear-gradient(135deg,
            var(--modal-bg-1) 0%,
            var(--modal-bg-2) 100%);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(197, 165, 107, .6);
    border-radius: 20px;
    padding: 2.5rem 3rem;

    /* Layering */
    z-index: 10000;

    /* Effects */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px var(--house-accent-light);
    animation: success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-align: center;
}

.success-message-icon {
    font-size: 4rem;
    color: var(--gold);
    margin-bottom: 1rem;
    animation: icon-bounce 0.8s ease-in-out;
}

.success-message-text {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 12px rgba(197, 165, 107, 0.4);
}

.success-message-subtext {
    color: var(--silver);
    font-size: 1rem;
    font-style: italic;
}

/* ═══ MAGICAL PARTICLES ═══ */
.magic-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle,
            rgba(197, 165, 107, 1) 0%,
            rgba(126, 186, 148, 0.8) 50%,
            transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: particle-burst var(--duration) ease-out forwards;
    box-shadow: 0 0 10px rgba(197, 165, 107, 0.8);
}

/* Sparkle effect on submit */
.submit-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(197, 165, 107, 1);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle-rise var(--duration) ease-out forwards;
    box-shadow: 0 0 6px rgba(197, 165, 107, 0.8);
}

/* =================================================================
   PREMIUM FOOTER — Slytherin Signature
   Multi-layer footer with serpent divider and atmospheric effects
   ================================================================= */

.footer {
    position: relative;

    /* Multi-layer background */
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%,
            var(--footer-radial-glow) 0%,
            transparent 60%),
        linear-gradient(180deg,
            var(--footer-gradient-start) 0%,
            var(--footer-gradient-end) 100%);

    border-top: 2px solid rgba(197, 165, 107, .35);
    padding: 4rem 2rem 2rem;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(197, 165, 107, 0.15),
        0 -20px 60px rgba(0, 0, 0, 0.7);
}

/* Ambient magical glow at top */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg,
            var(--footer-top-vignette) 0%,
            transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Floating magical particles */
.footer::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Multiple radial gradients create scattered particle effect */
    background-image:
        radial-gradient(circle at 15% 30%, rgba(197, 165, 107, 0.15) 0%, transparent 2%),
        radial-gradient(circle at 85% 60%, rgba(126, 186, 148, 0.12) 0%, transparent 2%),
        radial-gradient(circle at 45% 75%, rgba(197, 165, 107, 0.1) 0%, transparent 1.5%),
        radial-gradient(circle at 70% 20%, rgba(126, 186, 148, 0.08) 0%, transparent 1.5%),
        radial-gradient(circle at 25% 85%, rgba(197, 165, 107, 0.12) 0%, transparent 2%);

    animation: particles-float 20s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
}

/* ═══ DECORATIVE SERPENT DIVIDER ═══ */
.footer-divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0.6;
}

/* Horizontal lines on either side */
.footer-divider::before,
.footer-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(197, 165, 107, 0.4) 20%,
            rgba(197, 165, 107, 0.6) 50%,
            rgba(197, 165, 107, 0.4) 80%,
            transparent);
}

/* Central serpent icon */
.footer-serpent {
    font-size: 1.8rem;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(197, 165, 107, 0.4);
    animation: serpent-glow 3s ease-in-out infinite;
}

/* ═══ MAIN FOOTER GRID ═══ */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

/* ═══ BRAND SECTION ═══ */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    font-family: 'Cinzel', 'Old London', serif;
    font-size: 2rem;
    color: var(--gold);
    text-shadow: 0 2px 12px rgba(197, 165, 107, 0.4);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.footer-tagline {
    color: var(--silver);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.9;
}

.footer-name {
    font-family: 'Cinzel', 'Old London', serif;
    letter-spacing: 0.06em;
    color: var(--gold);
}

/* ═══ FOOTER SECTIONS ═══ */
.footer-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-link {
    color: #D7DAD7;
    text-decoration: none;
    font-size: 1rem;
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.85;
}

.footer-link:hover {
    color: var(--gold);
    opacity: 1;
    transform: translateX(4px);
    text-shadow: 0 0 8px rgba(197, 165, 107, 0.3);
}

.footer-link i {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ═══ SOCIAL SECTION ═══ */
.footer-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-social-link {
    /* Size and shape */
    width: 48px;
    height: 48px;
    border-radius: 50%;

    /* Layout */
    display: grid;
    place-items: center;

    /* Styling */
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(197, 165, 107, 0.35);
    background: radial-gradient(circle at 50% 40%,
            var(--house-radial-1) 0%,
            var(--house-radial-2) 100%);
    font-size: 1.1rem;

    /* Animation */
    transition: all var(--t-med);
    position: relative;
    overflow: hidden;
}

/* Inner glow overlay */
.footer-social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
            rgba(197, 165, 107, 0.15) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity var(--t-med);
}

.footer-social-link:hover {
    transform: translateY(-4px);
    border-color: rgba(197, 165, 107, 0.6);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 20px var(--house-accent-light);
}

.footer-social-link:hover::before {
    opacity: 1;
}

/* ═══ CONTACT INFO ═══ */
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #D7DAD7;
    font-size: 1rem;
    margin-bottom: 0.6rem;
    opacity: 0.85;
}

.footer-contact-item i {
    color: var(--gold);
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* ═══ BOTTOM BAR ═══ */
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(197, 165, 107, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--silver);
    font-size: 0.95rem;
    opacity: 0.8;
}

.footer-signoff {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.footer-signoff__primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.015em;
}

.footer-year {
    font-weight: 600;
    color: var(--gold);
}

.footer-dot {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.4);
}

.footer-signoff__crafted {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-crafted-text {
    color: rgba(255, 255, 255, 0.75);
}

/* Animated heart */
.footer-heart {
    color: var(--gold);
    animation: heart-pulse 2s ease-in-out infinite;
}

.footer-credits {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-credit-link {
    color: var(--silver);
    text-decoration: none;
    transition: color var(--t-fast);
}

.footer-credit-link:hover {
    color: var(--gold);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 1.5rem 1.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-social-links {
        justify-content: center;
    }
}