/* ==========================================================================
   VAISHNAVI KHANDELWAL — CINEMATIC INDO-JAPANESE DESIGN SYSTEM
   Editorial Craft, Bold Modern Typography, Japanese Restraint (Ma),
   Indian Materiality, Bespoke Hanko Seal & Smooth Micro-Interactions
   ========================================================================== */

:root {
    /* Nocturnal Canvas */
    --obsidian: #08080a;
    --warm-black: #100f0d;
    --charcoal: #161513;
    --surface-card: rgba(18, 17, 15, 0.75);
    --surface-elevated: rgba(28, 27, 24, 0.85);
    
    /* Typography & Tone */
    --ivory: #f5f2eb;
    --ivory-muted: rgba(245, 242, 235, 0.65);
    --ivory-faint: rgba(245, 242, 235, 0.35);
    --ivory-ghost: rgba(245, 242, 235, 0.08);
    --sandstone: #d4cebe;
    --stone-500: #88867e;
    
    /* Cultural & Atmospheric Accents */
    --seal: #b23a2a;              /* Traditional Japanese Hanko / Indian Sindoor vermilion */
    --seal-glow: rgba(178, 58, 42, 0.32);
    --gold: #b99a62;              /* Antique muted gold */
    --indigo: #1b1e34;            /* Deep nocturnal indigo */
    
    /* Hairlines & Grid Lines */
    --hairline: rgba(245, 242, 235, 0.09);
    --hairline-hover: rgba(245, 242, 235, 0.26);
    --hairline-seal: rgba(178, 58, 42, 0.50);
    --hairline-gold: rgba(185, 154, 98, 0.45);
    
    /* Tokens */
    --cursor-size: 8px;
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    background-color: var(--obsidian);
    color: var(--ivory);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    background-color: var(--obsidian);
    color: var(--ivory);
    overflow-x: hidden;
    position: relative;
    cursor: default;
}

@media (pointer: fine) {
    body.has-custom-cursor {
        cursor: none;
    }
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor [role="button"],
    body.has-custom-cursor .interactive-element {
        cursor: none;
    }
}

/* Subtle Cinematic Radial Glow */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.22;
    background:
        radial-gradient(circle at 12% 18%, rgba(178, 58, 42, 0.16), transparent 32rem),
        radial-gradient(circle at 88% 28%, rgba(27, 30, 52, 0.55), transparent 38rem),
        radial-gradient(circle at 50% 80%, rgba(185, 154, 98, 0.09), transparent 34rem);
}

main {
    position: relative;
    z-index: 10;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    color: var(--obsidian);
    background: var(--seal);
}

/* ==========================================================================
   TYPOGRAPHY HIERARCHY
   ========================================================================== */

.font-sans { font-family: 'Space Grotesk', sans-serif; }
.font-serif { font-family: 'Fraunces', Georgia, serif; }
.font-jp { font-family: 'Noto Serif JP', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-hand { font-family: 'Caveat', cursive; }
.font-devanagari { font-family: 'Noto Serif Devanagari', serif; }

/* Japanese Vertical Typographic Rail */
.jp-rail {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.4em;
}

/* Masked Text Reveal */
.text-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.text-mask > * {
    display: inline-block;
    transform: translateY(115%);
    will-change: transform;
}

.alche-fade,
.fade-up {
    will-change: transform, opacity;
}

/* ==========================================================================
   INDO-JAPANESE MATERIALITY & TACTILE COMPONENTS
   ========================================================================== */

.hairline-border {
    border-color: var(--hairline);
}

/* Paper Grain Texture */
.paper-grain,
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Subtle Jaali Lattice */
.jaali-grid,
.jaali-lattice {
    background-image:
        linear-gradient(45deg, rgba(245, 242, 235, 0.035) 25%, transparent 25% 75%, rgba(245, 242, 235, 0.035) 75%),
        linear-gradient(-45deg, rgba(245, 242, 235, 0.035) 25%, transparent 25% 75%, rgba(245, 242, 235, 0.035) 75%);
    background-size: 34px 34px;
}

/* Hanko / Personal VK Monogram Seal */
.hanko,
.vk-seal {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(178, 58, 42, 0.85);
    color: var(--seal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    position: relative;
    background: rgba(178, 58, 42, 0.07);
    user-select: none;
    transition: transform 0.3s var(--transition-smooth), background 0.3s ease;
}

.hanko::after,
.vk-seal::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(178, 58, 42, 0.35);
    pointer-events: none;
}

.hanko:hover,
.vk-seal:hover {
    transform: scale(1.08) rotate(-2deg);
    background: rgba(178, 58, 42, 0.18);
}

/* Zen Ensou Circle */
.ensou {
    border-radius: 50%;
    border: 1px solid rgba(245, 242, 235, 0.12);
}

/* Architectural Corner Accents */
.arch-frame {
    position: relative;
    border: 1px solid var(--hairline);
}

.arch-frame::before,
.arch-frame::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(185, 154, 98, 0.55);
    pointer-events: none;
}

.arch-frame::before {
    left: -1px;
    top: -1px;
    border-top: 1px solid;
    border-left: 1px solid;
}

.arch-frame::after {
    right: -1px;
    bottom: -1px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

/* Frosted Glass Panel */
.glass-panel {
    background: linear-gradient(135deg, rgba(245, 242, 235, 0.05), rgba(245, 242, 235, 0.015));
    background-color: var(--surface-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--hairline);
    transition: border-color 0.3s ease, transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
}

.glass-panel:hover {
    border-color: var(--hairline-hover);
}

/* Parallax Container */
.img-parallax-container {
    overflow: hidden;
    position: relative;
}

.img-parallax {
    width: 100%;
    height: 135%;
    object-fit: cover;
    position: absolute;
    top: -18%;
    left: 0;
    will-change: transform;
}

/* Horizontal Pinned Wrapper */
.horizontal-scroll-wrapper {
    width: 300vw;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

.horizontal-panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 5vw;
}

@media (max-width: 768px) {
    .horizontal-scroll-wrapper {
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    .horizontal-panel {
        width: 100%;
        height: auto;
        min-height: 80vh;
        padding: 4rem 1.5rem;
    }
}

/* ==========================================================================
   WEBGL CANVAS & SMART CURSOR
   ========================================================================== */

#webgl-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--cursor-size);
    height: var(--cursor-size);
    background: var(--ivory);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition:
        width 0.28s var(--transition-smooth),
        height 0.28s var(--transition-smooth),
        border-color 0.25s ease,
        background 0.25s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

#custom-cursor.hovered {
    width: 72px;
    height: 72px;
    background: rgba(8, 8, 10, 0.35);
    border: 1px solid rgba(245, 242, 235, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mix-blend-mode: normal;
}

#custom-cursor .cursor-text {
    opacity: 0;
    font-size: 8px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.2em;
    color: var(--ivory);
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

#custom-cursor.hovered .cursor-text {
    opacity: 1;
}

/* ==========================================================================
   CINEMATIC LIGHTBOX MODAL
   ========================================================================== */

.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(8, 8, 10, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--transition-smooth);
}

.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 85vw;
    max-height: 75vh;
    margin: auto;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.8);
}

.lightbox-content img {
    width: auto;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

/* ==========================================================================
   LOADER & ACCESSIBILITY
   ========================================================================== */

#loader,
#loader-light {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(178, 58, 42, 0.16), transparent 24rem), var(--obsidian);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--ivory);
}

::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

a:focus-visible,
button:focus-visible,
.interactive-element:focus-visible {
    outline: 1px solid var(--seal);
    outline-offset: 6px;
}

@media (pointer: coarse) {
    #custom-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .text-mask > * { transform: none !important; }
    #custom-cursor { display: none !important; }
}