/* ===================================
   AHALANE - The 12 Themes Master Hub
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    --bg-dark: #0a0a0a;
    --gold: #b88a5a;
    --sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    
    --scroll: 0;
    --mouse-x: 0.5;
    --mouse-y: 0.5;
}

* { box-sizing: border-box; margin: 0; padding: 0; cursor: none; /* Hub uses custom cursor too */ }

html { background: var(--bg-dark); }

body {
    font-family: 'Inter', sans-serif;
    color: #dfdfdf;
    background: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, .serif { font-family: 'Cormorant Garamond', serif; font-weight: 300; }

/* HUB CUSTOM CURSOR */
.hub-cursor {
    position: fixed; top: 0; left: 0;
    width: 20px; height: 20px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: translate(calc(var(--mouse-x) * 100vw - 10px), calc(var(--mouse-y) * 100vh - 10px));
    pointer-events: none; z-index: 9999;
    mix-blend-mode: difference;
    transition: width 0.3s var(--sine), height 0.3s var(--sine), background 0.3s var(--sine);
}

.hub-cursor.hovering {
    width: 60px; height: 60px;
    background: #fff;
    transform: translate(calc(var(--mouse-x) * 100vw - 30px), calc(var(--mouse-y) * 100vh - 30px));
}

.nav {
    position: fixed; top: 0; left: 0; right: 0; padding: 2rem; z-index: 999999;
    display: flex; justify-content: space-between;
}
.nav a { mix-blend-mode: difference; }

.nav a { color: #fff; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; }

.hero {
    height: 120vh; display: flex; align-items: center; justify-content: center; text-align: center;
    position: relative; overflow: hidden;
}

.hero-bg {
    position: absolute; inset: -5%;
    background: radial-gradient(circle at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), rgba(40, 40, 40, 0.4), transparent 50%);
    z-index: 0;
}

.hero-content {
    position: relative; z-index: 1;
    transform: translateY(calc(var(--scroll) * 0.4px));
    opacity: calc(1 - (var(--scroll) / 800));
}

.hero-subtitle { font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; }
.hero-title { font-size: clamp(3rem, 8vw, 7rem); line-height: 1; }

/* THEMES GRID */
.themes-container { position: relative; padding: 10vh 0; z-index: 10; }

.panel {
    min-height: 140vh; display: flex; align-items: center; justify-content: center; position: relative;
    --progress: 0; --center-progress: 0;
}

.panel-container {
    width: 100%; max-width: 1200px; padding: 0 4rem; display: grid; gap: 8vw; align-items: center; grid-template-columns: 1fr 1fr;
}
.panel:nth-child(even) .panel-container { grid-template-columns: 1fr 1fr; }
.panel:nth-child(even) .panel-content { order: -1; }

.panel-image-wrap {
    aspect-ratio: 3/4; overflow: hidden; position: relative;
    transform: translateY(calc((var(--progress) - 0.5) * -150px));
}

.panel-image {
    width: 100%; height: 160%; object-fit: cover; position: absolute; top: -30%; left: 0;
    transform: translateY(calc((var(--progress) - 0.5) * 450px)) scale(calc(1 + (1 - var(--center-progress)) * 0.15));
    opacity: calc(var(--center-progress) * 1.5);
    filter: blur(calc((1 - var(--center-progress)) * 12px)) brightness(calc(0.4 + var(--center-progress)*0.6));
}

.panel-content { transform: translateY(calc((1 - var(--center-progress)) * 60px)); opacity: calc(var(--center-progress) * 1.5); }

.panel-no { font-size: 0.8rem; letter-spacing: 0.2rem; color: var(--gold); margin-bottom: 1rem; display: block; }
.panel-title { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.1; margin-bottom: 1.5rem; color: #fff; }
.panel-desc { font-size: 1.1rem; line-height: 1.8; color: #a0a0a0; margin-bottom: 2rem; }

.btn {
    display: inline-block; padding: 1rem 2rem; border: 1px solid rgba(255,255,255,0.4); color: #fff; text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; transition: background 0.4s ease;
}
.btn:hover { background: #fff; color: #000; }