/* ============================================================
   PPUZZL.win — Sunset-warm glassmorphic puzzle experience
   Palette: sunset-warm | Aesthetic: opulent-minimal
   Typography: Playfair Display (variable) + DM Sans
   ============================================================ */

/* ==================== Google Fonts Import =================== */
/* Loaded via HTML link for Playfair Display (variable) + DM Sans */

/* ==================== CSS Custom Properties ================= */
:root {
    /* Palette — sunset-warm */
    --burnt-sienna:   #FF6B35;   /* Primary accent */
    --warm-peach:     #FFB085;   /* Secondary accent, glass tint */
    --ivory-cream:    #FFF1E6;   /* Background base */
    --espresso:       #2C1A0E;   /* Primary text, headlines */
    --rust:           #8B4A2A;   /* Secondary text, subheadings */
    --pale-apricot:   #F7CBA8;   /* Glass card bg at 15% */
    --rose-copper:    #D4845A;   /* Hover states, gradient accent */
    --near-black:     #1A0D06;   /* Footer / closing background */

    /* Gradients */
    --hero-gradient: linear-gradient(135deg, #FF6B35 0%, #FFB085 35%, #FFF1E6 65%, #F7CBA8 100%);
    --sunset-field:  linear-gradient(135deg, #FF6B35 0%, #FFB085 40%, #FFF1E6 100%);

    /* Typography */
    --font-display:  'Playfair Display', Georgia, serif;
    --font-body:     'DM Sans', system-ui, sans-serif;

    /* Spacing */
    --section-pad: clamp(5rem, 10vw, 9rem);
    --container-max: 1200px;

    /* Transitions */
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ==================== Base ================================== */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: var(--ivory-cream);
    color: var(--espresso);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
}

/* ==================== Typography ============================ */
.fluid-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    transition: font-variation-settings 0.9s var(--ease-reveal);
}

.fluid-heading.in-view {
    font-variation-settings: 'wght' 800;
}

/* ==================== Navigation ============================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
    background: rgba(255, 241, 230, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 176, 133, 0.2);
}

.nav-brand {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 700;
    color: var(--espresso);
    letter-spacing: 0.04em;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rust);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--burnt-sienna);
}

/* ==================== Glass Card Base ======================= */
.glass-card {
    background: rgba(247, 203, 168, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 176, 133, 0.3);
    border-radius: 2px;
    box-shadow:
        0 8px 48px rgba(180, 80, 40, 0.15),
        inset 0 1px 0 rgba(255, 230, 200, 0.4);
    position: relative;
    overflow: hidden;
}

/* ==================== Precision Grid ======================== */
.precision-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.grid-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 180, 120, 0.3);
}

.grid-h:nth-child(1) { top: 33%; }
.grid-h:nth-child(2) { top: 66%; }
.grid-h:nth-child(3) { top: 50%; }

.grid-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 180, 120, 0.3);
}

.grid-v:nth-child(4),
.grid-v:nth-last-child(4) { left: 25%; }

.grid-v:nth-child(5),
.grid-v:nth-last-child(3) { right: 25%; }

.corner-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.4);
    border: 1px solid rgba(255, 107, 53, 0.6);
}

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

/* ==================== Atmosphere Orbs ======================= */
.atmo-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.atmo-orb--hero {
    width: 700px;
    height: 700px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
    opacity: 0.18;
    filter: blur(80px);
}

.atmo-orb--mid {
    width: 600px;
    height: 600px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, #FFB085 0%, transparent 70%);
    opacity: 0.18;
    filter: blur(80px);
}

.atmo-orb--close {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #D4845A 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(80px);
}

/* ==================== HERO SECTION ========================= */
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sunset-field);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6rem;
}

/* Hero glass fragment — irregular polygon clip-path */
.hero-fragment {
    width: clamp(340px, 70vw, 720px);
    padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
    clip-path: polygon(
        0% 4%,
        6% 0%,
        94% 0%,
        100% 6%,
        100% 78%,
        96% 86%,
        88% 92%,
        78% 100%,
        8% 100%,
        0% 92%
    );
    /* blur-focus reveal — starts blurred */
    filter: blur(8px);
    opacity: 0.6;
    transform: translateY(24px);
    transition:
        filter 1.2s var(--ease-reveal),
        opacity 1.2s var(--ease-reveal),
        transform 1.2s var(--ease-reveal);
}

.hero-fragment.revealed {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

.hero-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 1rem;
}

.hero-title {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 9vw, 8rem);
    line-height: 1;
    color: var(--espresso);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hero-dot {
    color: var(--burnt-sienna);
}

.hero-sub {
    position: relative;
    z-index: 1;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--rust);
    max-width: 480px;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

/* Scroll cue */
.scroll-cue {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--rose-copper);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s;
}

.scroll-cue:hover {
    color: var(--burnt-sienna);
}

.scroll-cue-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--burnt-sienna), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%       { opacity: 1;   transform: scaleY(1.15); }
}

.scroll-cue-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Scattered background fragments */
.scatter-fragment {
    position: absolute;
    z-index: 1;
    background: rgba(247, 203, 168, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 176, 133, 0.2);
}

.scatter-fragment--1 {
    width: 180px;
    height: 120px;
    top: 15%;
    left: 5%;
    clip-path: polygon(0 10%, 15% 0, 100% 0, 100% 80%, 85% 100%, 0 100%);
    transform: rotate(-8deg);
    opacity: 0.6;
}

.scatter-fragment--2 {
    width: 140px;
    height: 100px;
    bottom: 20%;
    right: 8%;
    clip-path: polygon(10% 0, 100% 5%, 100% 90%, 90% 100%, 0 95%, 0 15%);
    transform: rotate(12deg);
    opacity: 0.4;
}

.scatter-fragment--3 {
    width: 90px;
    height: 65px;
    top: 60%;
    left: 3%;
    clip-path: polygon(0 0, 90% 5%, 100% 60%, 70% 100%, 5% 90%);
    transform: rotate(-4deg);
    opacity: 0.35;
}

/* ==================== PHILOSOPHY SECTION =================== */
.philosophy {
    padding: var(--section-pad) clamp(1.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
    background: var(--ivory-cream);
}

.philosophy-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.section-marker {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose-copper);
    margin-bottom: 2.5rem;
}

.pull-quote {
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    line-height: 1.3;
    color: var(--espresso);
    font-style: italic;
    font-weight: 300;
    max-width: 800px;
    margin-bottom: 3rem;
    border: none;
    padding: 0;
}

.pull-quote em {
    color: var(--rose-copper);
    font-style: normal;
}

.philosophy-body {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--rust);
    max-width: 580px;
    line-height: 1.75;
    margin-left: auto;
}

/* ==================== FEATURES SECTION ==================== */
.features {
    padding: var(--section-pad) clamp(1.5rem, 5vw, 4rem);
    background: linear-gradient(180deg, var(--ivory-cream) 0%, #FFF5EE 100%);
    position: relative;
}

.features-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    align-items: start;
}

.feature-card {
    padding: 2.5rem 2rem;
    transition: transform 0.4s var(--ease-reveal), box-shadow 0.4s ease;
}

.feature-card--1 {
    margin-top: 0;
    clip-path: polygon(0 0, 95% 0, 100% 6%, 100% 100%, 5% 100%, 0 94%);
}

.feature-card--2 {
    margin-top: 2.5rem;
    clip-path: polygon(5% 0, 100% 0, 100% 94%, 95% 100%, 0 100%, 0 6%);
}

.feature-card--3 {
    margin-top: 1.2rem;
    clip-path: polygon(0 6%, 6% 0, 100% 0, 100% 100%, 94% 100%, 0 94%);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 64px rgba(180, 80, 40, 0.2),
        inset 0 1px 0 rgba(255, 230, 200, 0.5);
}

.card-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.card-title {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    color: var(--espresso);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.card-body {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--rust);
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

/* ==================== CATEGORIES SECTION ================== */
.categories {
    padding: var(--section-pad) clamp(1.5rem, 5vw, 4rem);
    background: var(--ivory-cream);
    position: relative;
    overflow: hidden;
}

/* Puzzle watermark */
.puzzle-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: rgba(255, 107, 53, 0.06);
    clip-path: polygon(
        30% 0%, 70% 0%,
        70% 20%, 85% 10%, 100% 30%,
        80% 30%, 100% 70%, 80% 70%,
        70% 80%, 70% 100%, 30% 100%,
        30% 80%, 20% 80%, 0% 70%,
        20% 70%, 0% 30%, 15% 30%,
        30% 20%
    );
    pointer-events: none;
    z-index: 0;
}

.categories-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
    position: relative;
    z-index: 1;
}

.categories-left {
    position: relative;
}

.categories-title {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    color: var(--espresso);
    line-height: 1.2;
    margin: 1.5rem 0 1.5rem;
    max-width: 440px;
}

.categories-body {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--rust);
    line-height: 1.75;
    max-width: 420px;
    margin-bottom: 2rem;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cat-tag {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--espresso);
    border: 1px solid rgba(255, 107, 53, 0.4);
    padding: 0.3rem 0.8rem;
    border-radius: 1px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    cursor: default;
}

.cat-tag:hover {
    background: var(--burnt-sienna);
    color: var(--ivory-cream);
    border-color: var(--burnt-sienna);
}

/* Depth panel */
.depth-panel {
    aspect-ratio: 4/5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    clip-path: polygon(
        8% 0%, 92% 0%, 100% 8%,
        100% 88%, 92% 100%,
        8% 100%, 0% 92%, 0% 8%
    );
    overflow: hidden;
}

.depth-panel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(255, 107, 53, 0.25) 0%,
        rgba(255, 176, 133, 0.15) 50%,
        rgba(247, 203, 168, 0.1) 100%
    );
    z-index: 0;
}

.depth-panel-content {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
}

.depth-panel-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose-copper);
    margin-bottom: 1rem;
}

.depth-panel-headline {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 700;
    font-variation-settings: 'wght' 700;
    color: var(--espresso);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.depth-panel-sub {
    font-size: 0.85rem;
    color: var(--rust);
    line-height: 1.6;
}

/* ==================== CLOSING SECTION ===================== */
.closing {
    min-height: 60vh;
    background: var(--near-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-pad) clamp(1.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}

.closing::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rose-copper) 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(80px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.closing-inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.closing-overline {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rose-copper);
    margin-bottom: 1.5rem;
}

.closing-title {
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--warm-peach);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.closing-sub {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    color: rgba(255, 176, 133, 0.6);
    line-height: 1.75;
    font-weight: 300;
}

/* ==================== REVEAL ANIMATIONS ================== */

/* Fade-up entrance for sections */
.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
}

.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }

/* Feature card stagger */
.feature-card--1 { transition-delay: 0s; }
.feature-card--2 { transition-delay: 0.12s; }
.feature-card--3 { transition-delay: 0.24s; }

.feature-card.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== RESPONSIVE ========================= */
@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card--1,
    .feature-card--2,
    .feature-card--3 {
        margin-top: 0;
        clip-path: none;
    }

    .categories-inner {
        grid-template-columns: 1fr;
    }

    .depth-panel {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 600px) {
    .nav-links {
        display: none;
    }

    .hero-fragment {
        clip-path: none;
    }

    .scatter-fragment {
        display: none;
    }
}