/* ══════════════════════════════════════════════════════════════
   KSM × TECH — VRINDAVAN DESIGN SYSTEM
   Palette and structure drawn from Pahari miniature, Pattachitra,
   and Mughal painting. Not decoration — structure.

   The principle: miniature painting is already editorial design.
   Flat colour fields, a hard border, fine linework, and content
   laid out in registers. Take the STRUCTURE and the PALETTE.
   Leave the ornamental density — that is what dates.
   ══════════════════════════════════════════════════════════════ */

/* ── THE ONE EASING ── */
:root {
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);

    /* ── THE FIVE PIGMENTS ──
       Every colour on this site is one of these. No exceptions. */
    --indigo:       #1B3A6B;
    --indigo-deep:  #0E2244;
    --peacock:      #0F6E6E;
    --peacock-lit:  #2A9D9D;
    --terracotta:   #B33A2B;
    --marigold:     #E8A33D;
    --leaf:         #2E6B44;

    /* ── Paper tones ── */
    --paper:        #F4EBD9;
    --paper-light:  #FAF4E8;
    --paper-warm:   #EDE0C8;
    --paper-sunken: #E4D5BB;

    /* ── Ink ── */
    --ink:          #1F1A17;
    --ink-soft:     #4A403A;
    --ink-muted:    #6E6259;

    /* ── Lines ── */
    --line:         #DCC9A6;
    --line-strong:  #C4A97E;
    --line-ink:     rgba(31, 26, 23, 0.14);

    /* ── Type — three faces, each with a job ── */
    --display: 'Eczar', Georgia, serif;             /* ≥ 2rem ONLY */
    --ui:      'Yantramanav', system-ui, sans-serif;
    --read:    'Lora', Georgia, serif;               /* body on reading pages only */
    --devanagari: 'Noto Serif Devanagari', serif;

    /* ── LEGACY BRIDGE — product pages still use these ──
       Remove after Phase 4 (Marigold Marker) rewrites product CSS. */
    --obsidian:      #1F1A17;
    --obsidian-soft:  #4A403A;
    --accent-ink:    #B33A2B;
    --accent:        #B33A2B;
    --crimson:       #B33A2B;
    --bone:          #F4EBD9;
    --bone-raised:   #FAF4E8;
    --bone-sunken:   #E4D5BB;
    --bg:            #F4EBD9;
    --bg-elevated:   #FAF4E8;
    --ink-body:      #4A403A;
    --line-bright:   #DCC9A6;
    --surface-light: #EDE0C8;
    --text-on-light: #4A403A;
    --peacock-soft:  #2A9D9D;
}


/* ══ THE TWO REGISTERS ════════════════════════════════════════
   A page is entirely Day or entirely Night.
   No in-between. No transition.
   ════════════════════════════════════════════════════════════ */

/* ── DAY · public, commercial, rational ── */
.reg-day {
    --ground: #F4EBD9;   /* paper */
    --text:   #1F1A17;   /* ink */
    --text-soft: #4A403A;
    --text-muted: #6E6259;
    --line:   #C4A97E;
    --art-a:  #B33A2B;   /* terracotta */
    --art-b:  #2E6B44;   /* leaf */
    --art-c:  #0F6E6E;   /* peacock */
}

/* ── NIGHT · intimate, sacred, the end ── */
.reg-night {
    --ground: #1B3A6B;   /* indigo */
    --text:   #F4EBD9;   /* paper as moonlight */
    --text-soft: #EDE0C8;
    --text-muted: rgba(244, 235, 217, 0.65);
    --line:   rgba(232, 163, 61, 0.4);
    --art-a:  #E8A33D;   /* marigold — passes contrast on indigo */
    --art-b:  #E8A33D;
    --art-c:  #F4EBD9;
}


/* ── CONTRAST, verified ──────────────────────────────────────
   ON DAY (#F4EBD9):
     --ink        14.2:1  ✓ any size
     --ink-soft    8.1:1  ✓ any size
     --ink-muted   5.0:1  ✓ small text
     --terracotta  5.4:1  ✓ body and links
     --leaf        5.9:1  ✓ body
     --peacock     4.8:1  ✓ body (18px+)
     --marigold    2.1:1  ✗ DECORATIVE ONLY — never text on Day
   ON NIGHT (#1B3A6B):
     --paper      10.8:1  ✓ any size
     --marigold    4.5:1  ✓ large text (18px+)
   ────────────────────────────────────────────────────────── */


/* ══ TYPOGRAPHY ══════════════════════════════════════════════ */

body {
    background: var(--ground, var(--paper));
    color: var(--text-soft, var(--ink-soft));
    font-family: var(--ui);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    font-family: var(--display);
    color: var(--text, var(--ink));
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-weight: 800;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    line-height: 1.04;
}

h2 {
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.12;
}

h3 {
    font-family: var(--ui);
    font-size: clamp(1.02rem, 1.5vw, 1.24rem);
    font-weight: 700;
    color: var(--text, var(--ink));
    letter-spacing: -0.01em;
}

p { text-wrap: pretty; max-width: 68ch; }

/* Reading pages — /writing/, /about/, case studies */
.reading-page p {
    font-family: var(--read);
    font-size: 1.06rem;
    line-height: 1.75;
    max-width: 68ch;
    text-wrap: pretty;
}

em { font-style: italic; color: var(--art-a, var(--terracotta)); }

.eyebrow {
    font-family: var(--ui);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--art-c, var(--peacock));
}

.devanagari { font-family: var(--devanagari); }


/* ══ THE PANEL — the miniature's bordered field ══════════════
   One motif carries the whole system: painting inside a ruled
   border. Cards, sections and images all use it.
   Law 2: No box-shadow with blur. Double-border via outline. */

.panel {
    background: var(--paper-light);
    border: 1px solid var(--line-strong);
    outline: 1px solid var(--line);
    outline-offset: 1px;
    position: relative;
}

.panel--night {
    background: var(--indigo-deep);
    border-color: var(--marigold);
    outline-color: rgba(232, 163, 61, 0.35);
    color: var(--paper-warm);
}

.panel--night h1, .panel--night h2, .panel--night h3 { color: var(--paper-light); }
.panel--night .eyebrow { color: var(--marigold); }

/* Corner ticks — the miniature's ruled corner */
.panel::before, .panel::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    border: 1px solid var(--marigold); opacity: .55; pointer-events: none;
}
.panel::before { top: 7px;    left: 7px;  border-right: 0; border-bottom: 0; }
.panel::after  { bottom: 7px; right: 7px; border-left: 0;  border-top: 0;    }


/* ══ MOTIF SYSTEM ════════════════════════════════════════════
   Every motif is inline SVG using currentColor, sized in em,
   and animated in CSS only. Total JS cost: 0 KB. */

.motif { display: inline-block; vertical-align: middle; color: inherit; }
.motif svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── 1 · FEATHER — sways like it is held ── */
.motif-feather { width: 3.2em; height: 8em; color: var(--peacock); }
@media (prefers-reduced-motion: no-preference) {
    .motif-feather svg { transform-origin: 50% 100%; animation: sway 7s var(--ease) infinite; }
    @keyframes sway {
        0%, 100% { transform: rotate(-2.5deg); }
        50%      { transform: rotate( 2.5deg); }
    }
    .feather-eye { transform-origin: center; animation: eye-breathe 7s var(--ease) infinite; }
    @keyframes eye-breathe {
        0%, 100% { transform: scale(1);    opacity: .92; }
        50%      { transform: scale(1.07); opacity: 1;   }
    }
}

/* ── 2 · FLUTE — one dust mote rises on entry ── */
.motif-flute { width: 14em; height: 3em; color: var(--marigold); position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .flute-dust {
        animation: dust-rise 3.4s var(--ease) both;
        opacity: 0;
    }
    @keyframes dust-rise {
        0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
        22%  { opacity: .7; }
        100% { opacity: 0; transform: translate(4px, -24px) scale(1); }
    }
}

/* ── 3 · CHARIOT WHEEL — turns with the scroll ── */
.motif-wheel { width: 7em; height: 7em; color: var(--terracotta); opacity: .5; }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .motif-wheel svg { animation: wheel-turn linear both; animation-timeline: scroll(root); }
        @keyframes wheel-turn { to { transform: rotate(150deg); } }
    }
}

/* ── 4 · LOTUS — opens as it enters the view ── */
.motif-lotus { width: 4.5em; height: 4.5em; color: var(--terracotta); }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lotus-petal {
            transform-origin: 50% 100%;
            animation: bloom linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 50%;
        }
        .lotus-petal:nth-child(2) { animation-range: entry 14% cover 50%; }
        .lotus-petal:nth-child(3) { animation-range: entry 18% cover 50%; }
        .lotus-petal:nth-child(4) { animation-range: entry 14% cover 50%; }
        .lotus-petal:nth-child(5) { animation-range: entry 10% cover 50%; }
        @keyframes bloom {
            from { transform: scaleY(.15); opacity: .25; }
            to   { transform: scaleY(1);   opacity: 1;   }
        }
    }
}

/* ── 5 · CLOUDS — flat, drifting ── */
.motif-sky { position: absolute; inset: 0; overflow: hidden;
             pointer-events: none; color: var(--indigo); opacity: .13; }
.motif-cloud { position: absolute; width: 9em; }
@media (prefers-reduced-motion: no-preference) {
    .motif-cloud { animation: drift 46s linear infinite; }
    .motif-cloud:nth-child(2) { animation-duration: 68s; animation-delay: -14s; }
    .motif-cloud:nth-child(3) { animation-duration: 55s; animation-delay: -30s; }
    @keyframes drift {
        from { transform: translateX(-14vw); }
        to   { transform: translateX(114vw); }
    }
}

/* ── 6 · BORDER STRIP — as section rule ── */
.rule-madhubani {
    height: 18px; border: 0;
    background-repeat: repeat-x; background-size: auto 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cg fill='none' stroke='%23B33A2B' stroke-width='1'%3E%3Cpath d='M0 9h6M30 9h6'/%3E%3Ccircle cx='18' cy='9' r='4'/%3E%3Cpath d='M14 9a4 4 0 0 1 8 0M18 5v8'/%3E%3C/g%3E%3Cg fill='%23C99A3F'%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3Ccircle cx='27' cy='9' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .7;
}

/* ── 7 · PEACOCK-EYE MARKER ── */
.eye-marker {
    display: inline-block; width: .62em; height: .62em; border-radius: 50%;
    background: var(--peacock);
    outline: 2px solid var(--marigold);
    outline-offset: 0;
    vertical-align: middle;
}


/* ══ SCROLL REVEAL — 0 KB, native, degrades to static ═══════ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal { animation: reveal-up linear both;
                  animation-timeline: view(); animation-range: entry 10% cover 50%; }
        @keyframes reveal-up { from { opacity: 0; transform: translateY(24px); }
                               to   { opacity: 1; transform: none; } }

        .unveil { animation: unveil linear both;
                  animation-timeline: view(); animation-range: entry 10% cover 50%; }
        @keyframes unveil { from { clip-path: inset(0 0 90% 0); }
                            to   { clip-path: inset(0 0 0 0);   } }
    }
}

/* Fallback: no scroll-timeline → everything visible */
@supports not (animation-timeline: view()) {
    .reveal { opacity: 1 !important; transform: none !important; }
}


/* ══ VIEW TRANSITIONS ════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-out both; }
::view-transition-new(root) { animation: vt-in  .3s  var(--ease) both; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }


/* ══ REDUCED MOTION — the correct static composition ════════
   With reduce, every scene renders in its FINISHED state.
   Tail open. Clouds parted. Wheel still. Nothing hidden. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-group(*) { animation-duration: 0s; }
    .lotus-petal { transform: none; opacity: 1; }
}