/* ============================================
   persopass.io - Dark Academia / Diagonal Sections
   Palette: Translucent Frost
   Typography: Serif Revival
   ============================================ */

/* --- Color Reference ---
   Deep Umber:        #1a1410
   Charred Oak:       #2a221a
   Aged Parchment:    #e8dcc8
   Muted Stone:       #a89b8c
   Amber Filament:    #c4a882
   Frost Whisper:     #8fa8b8
   Circuit Ember:     #7a5c3a
*/

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #1a1410;
    color: #a89b8c;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- SVG Defs (hidden) --- */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Scroll Progress Indicator --- */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 24px;
    width: 2px;
    height: 0%;
    background-color: #c4a882;
    z-index: 1000;
    transition: height 0.1s linear;
}

/* --- Hexadecimal Rain --- */
.hex-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hex-column {
    position: absolute;
    top: -100%;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.6rem;
    color: #2a221a;
    letter-spacing: 0.08em;
    line-height: 1.8;
    white-space: nowrap;
    animation: hexFall 120s linear infinite;
    user-select: none;
}

@keyframes hexFall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* --- Via Point Pulse Animation --- */
@keyframes viaPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.35; }
}

/* --- Diagonal Sections --- */
.diagonal-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    z-index: 1;
}

/* --- Section 1: Entry Vestibule --- */
.section-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1a1410;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
}

/* --- Section 2: Cipher Corridor Panel 1 --- */
.section-cipher-1 {
    background-color: #2a221a;
    clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 calc(100% - 5vw));
    margin-top: -70px;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

/* --- Section 3: Cipher Corridor Panel 2 (Frost) --- */
.section-cipher-2 {
    background-color: #1a1410;
    clip-path: polygon(0 0, 100% 5vw, 100% calc(100% - 4vw), 0 100%);
    margin-top: -70px;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.section-cipher-2.frost-panel {
    background: rgba(232, 220, 200, 0.06);
    -webkit-backdrop-filter: blur(0px) saturate(1.2);
    backdrop-filter: blur(0px) saturate(1.2);
    transition: -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease;
}

.section-cipher-2.frost-panel.frost-active {
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

/* --- Section 4: Cipher Corridor Panel 3 --- */
.section-cipher-3 {
    background-color: #2a221a;
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 calc(100% - 3vw));
    margin-top: -70px;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

/* --- Section 5: Frost Panel 2 --- */
.section-cipher-4 {
    background-color: #1a1410;
    clip-path: polygon(0 0, 100% 3vw, 100% calc(100% - 5vw), 0 100%);
    margin-top: -70px;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.section-cipher-4.frost-panel {
    background: rgba(232, 220, 200, 0.06);
    -webkit-backdrop-filter: blur(0px) saturate(1.2);
    backdrop-filter: blur(0px) saturate(1.2);
    transition: -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease;
}

.section-cipher-4.frost-panel.frost-active {
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

/* --- Section 6: Inner Sanctum --- */
.section-sanctum {
    background-color: #e8dcc8;
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
    margin-top: -70px;
    padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-sanctum .section-heading {
    color: #1a1410;
}

.section-sanctum .section-body {
    color: #2a221a;
}

.sanctum-heading {
    font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 2rem !important;
}

.sanctum-body {
    max-width: 600px;
}

/* --- Section Content --- */
.section-content {
    position: relative;
    z-index: 5;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem);
}

.entry-content {
    text-align: center;
    padding-top: 0;
}

/* --- Gradient Mesh Backgrounds --- */
.gradient-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.gradient-mesh-1 {
    background:
        radial-gradient(ellipse 60% 50% at 30% 70%, rgba(42, 34, 26, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 70% 40%, rgba(196, 168, 130, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 50% 50%, #1a1410 0%, #1a1410 100%);
}

.gradient-mesh-2 {
    background:
        radial-gradient(ellipse 50% 60% at 60% 30%, rgba(196, 168, 130, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 25% 60%, rgba(26, 20, 16, 0.5) 0%, transparent 60%);
}

.gradient-mesh-3 {
    background:
        radial-gradient(ellipse 55% 55% at 40% 50%, rgba(196, 168, 130, 0.03) 0%, transparent 65%),
        radial-gradient(ellipse 60% 70% at 70% 30%, rgba(42, 34, 26, 0.4) 0%, transparent 60%);
}

.gradient-mesh-4 {
    background:
        radial-gradient(ellipse 45% 50% at 55% 55%, rgba(196, 168, 130, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 30% 40%, rgba(26, 20, 16, 0.6) 0%, transparent 70%);
}

.gradient-mesh-5 {
    background:
        radial-gradient(ellipse 50% 45% at 35% 65%, rgba(196, 168, 130, 0.03) 0%, transparent 65%),
        radial-gradient(ellipse 65% 55% at 65% 35%, rgba(42, 34, 26, 0.3) 0%, transparent 55%);
}

.gradient-mesh-6 {
    background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232, 220, 200, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 80% 80% at 50% 50%, #e8dcc8 0%, #e8dcc8 100%);
}

/* --- Circuit Overlay --- */
.circuit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M10,10 Q10,40 40,40 L80,40 Q100,40 100,60 L100,100 Q100,120 120,120 L160,120 Q180,120 180,150 L180,190' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M50,0 L50,20 Q50,35 65,35 L110,35 Q130,35 130,55 L130,90' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.12'/%3E%3Cpath d='M150,10 L150,50 Q150,70 170,70 L200,70' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.14'/%3E%3Cpath d='M0,80 L30,80 Q50,80 50,100 L50,140 Q50,160 70,160 L120,160 Q140,160 140,180 L140,200' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.16'/%3E%3Cpath d='M170,0 L170,30 Q170,45 185,45 L200,45' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.13'/%3E%3Cpath d='M0,150 L25,150 Q40,150 40,165 L40,200' fill='none' stroke='%237a5c3a' stroke-width='0.5' opacity='0.18'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='100' cy='60' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='120' cy='120' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='130' cy='55' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='100' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='170' cy='70' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='140' cy='180' r='1.5' fill='%23c4a882' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' begin='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") repeat;
}

/* Circuit draw animation via stroke-dashoffset concept — applied via clip reveal */
.circuit-draw {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2s ease-out;
}

.circuit-draw.circuit-visible {
    clip-path: inset(0 0 0 0);
}

/* --- Typography --- */
.hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #e8dcc8;
    position: relative;
    z-index: 5;
    opacity: 0;
}

.hero-title .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hero-title.animate-in .char {
    opacity: 1;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.75;
    color: #a89b8c;
    margin-top: 1.5rem;
    position: relative;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-subtitle.animate-in {
    opacity: 1;
}

.section-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #e8dcc8;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-heading.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.section-body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.75;
    color: #a89b8c;
    opacity: 0;
    transition: opacity 0.6s ease;
    transition-delay: 0.2s;
}

.section-body.animate-in {
    opacity: 1;
}

.emphasis {
    font-weight: 600;
    color: #c4a882;
}

/* --- Monospace Accent --- */
.seam-hex {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa8b8;
    opacity: 0.6;
}

/* --- Diagonal Seam Decorations --- */
.diagonal-seam {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 10;
    pointer-events: none;
}

.diagonal-seam::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(196, 168, 130, 0.3) 20%, rgba(196, 168, 130, 0.3) 80%, transparent 100%);
    transform-origin: left center;
}

.seam-1::before { transform: rotate(-0.5deg); }
.seam-2::before { transform: rotate(0.3deg); }
.seam-3::before { transform: rotate(-0.4deg); }
.seam-4::before { transform: rotate(0.5deg); }
.seam-5::before { transform: rotate(-0.3deg); }

.seam-decoration {
    position: absolute;
    bottom: 8px;
}

.seam-1 .seam-lock { left: 15%; }
.seam-1 .seam-hex { left: 40%; }
.seam-1 .seam-key { left: 72%; }

.seam-2 .seam-hex { left: 25%; }
.seam-2 .seam-lock { left: 60%; }

.seam-3 .seam-key { left: 30%; }
.seam-3 .seam-hex { left: 65%; }

.seam-4 .seam-lock { left: 18%; }
.seam-4 .seam-hex { left: 48%; }
.seam-4 .seam-key { left: 78%; }

.seam-5 .seam-hex { left: 45%; }

/* Typewriter effect for seam hex labels */
.seam-typewriter {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    transition: none;
}

.seam-typewriter.typewriter-active {
    animation: typewriterReveal 0.3s steps(8) forwards;
}

@keyframes typewriterReveal {
    from { width: 0; }
    to { width: auto; }
}

/* --- Fade Reveal Pattern --- */
.fade-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .fade-reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .hero-title,
    .hero-title .char,
    .hero-subtitle,
    .section-heading,
    .section-body {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hex-column {
        animation: none;
    }

    .circuit-draw {
        clip-path: none;
        transition: none;
    }

    .seam-typewriter {
        width: auto;
        animation: none;
    }

    .frost-panel {
        -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
        backdrop-filter: blur(12px) saturate(1.2) !important;
        transition: none !important;
    }
}