/* ============================================================
   IDK-MAIN.CSS — Idakera Studio Global Design System
   Shared tokens, cursor, atmosphere, and animation primitives.
   Zero external dependencies.
   ============================================================ */

/* ========================
   DESIGN TOKENS
======================== */
:root {
    /* Stable viewport on current Safari, with a usable iOS 14 fallback. */
    --idk-vh: 1vh;
    /* Palette */
    --idk-bg:         #f0ebe3;
    --idk-bg-section: #e8e2d8;
    --idk-bg-dark:    #0e0e0e;
    --idk-ink:        #1a1a1a;
    --idk-ink-muted:  #6b6560;
    --idk-cream:      #faf7f2;
    --idk-warm-mid:   #c4b8a8;
    --idk-accent:     #3d3530;

    /* Typography */
    --idk-font-serif:   'Cormorant Garamond', Georgia, serif;
    --idk-font-sans:    'Inter', system-ui, sans-serif;
    --idk-font-display: 'Cinzel', serif;
    --idk-font-reading: 'Crimson Pro', serif;

    /* Motion */
    --idk-ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
    --idk-ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
    --idk-ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@supports (height: 1svh) {
    :root { --idk-vh: 1svh; }
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--idk-bg);
    color: var(--idk-ink);
    font-family: var(--idk-font-sans);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
}

/* One slim gold scrollbar theme for the document and all nested scroll areas. */
:root {
    --idk-scrollbar-thumb: #bd9656;
    --idk-scrollbar-track: #21180f;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--idk-scrollbar-thumb) var(--idk-scrollbar-track);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--idk-scrollbar-track); border-radius: 4px; }
*::-webkit-scrollbar-thumb { background: var(--idk-scrollbar-thumb); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #d6b475; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: var(--idk-scrollbar-track); }
@supports selector(::-webkit-scrollbar) {
    /* Non-auto standard properties override WebKit styling in current Chromium. */
    * { scrollbar-width: auto; scrollbar-color: auto; }
}

a, button, input, textarea, select, [role="button"] {
    cursor: none;
}

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

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* The gold halo is part of this small transparent PNG, so the fixed header
   needs no live filter or animated blur while the document scrolls. */
.idk-header-logo {
    display: block;
    width: 204px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.idk-logo-wrap, .idk-comp-logo { flex-shrink: 0; }
@media (max-width: 600px) {
    .idk-header-logo { width: clamp(112px, 35vw, 156px); }
    #idk-header { padding-left: 1rem; padding-right: 1rem; gap: 0.65rem; }
    #idk-header .idk-header-right { gap: 0.5rem; }
    #idk-header .idk-lang-switcher { margin-right: 0; }
    #idk-header .idk-btn-lang { padding: 0.35rem; }
    #idk-header .idk-menu-trigger { padding: 0.5rem 0.65rem; gap: 0.5rem; }
}

/* ========================
   IDAKERA CURSOR SYSTEM
======================== */
.idk-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--idk-ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease,
                width 0.3s ease, height 0.3s ease,
                background 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

.idk-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1px solid rgba(26, 26, 26, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.4s var(--idk-ease-expo),
                height 0.4s var(--idk-ease-expo),
                border-color 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

/* Cursor expand on hover */
body.idk-cursor-hover .idk-cursor-dot {
    width: 6px; height: 6px;
    background: var(--idk-ink-muted);
}
body.idk-cursor-hover .idk-cursor-ring {
    width: 56px; height: 56px;
    border-color: rgba(26, 26, 26, 0.15);
}

/* Cursor invert on dark sections */
body.idk-cursor-dark .idk-cursor-dot {
    background: rgba(255, 255, 255, 0.9);
}
body.idk-cursor-dark .idk-cursor-ring {
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========================
   MAGNET & SPLIT-TEXT
======================== */
[data-idk-magnet] {
    display: inline-block;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.idk-split-link {
    display: inline-flex;
    overflow: hidden;
    position: relative;
    vertical-align: top;
}

.idk-char-wrap {
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* Let the mask contain the inherited line box, including descenders. */
    min-height: 1.2em;
    vertical-align: middle;
}

.idk-char {
    display: block;
    transition: transform 0.6s var(--idk-ease-expo);
    will-change: transform;
}

.idk-char.idk-char-secondary {
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 100%;
}

[data-idk-split]:hover .idk-char {
    transform: translateY(-100%);
}

/* Stagger delays for rolling text effect */
.idk-char-wrap:nth-child(2) .idk-char  { transition-delay: 0.03s; }
.idk-char-wrap:nth-child(3) .idk-char  { transition-delay: 0.06s; }
.idk-char-wrap:nth-child(4) .idk-char  { transition-delay: 0.09s; }
.idk-char-wrap:nth-child(5) .idk-char  { transition-delay: 0.12s; }
.idk-char-wrap:nth-child(6) .idk-char  { transition-delay: 0.15s; }
.idk-char-wrap:nth-child(7) .idk-char  { transition-delay: 0.18s; }
.idk-char-wrap:nth-child(8) .idk-char  { transition-delay: 0.21s; }
.idk-char-wrap:nth-child(9) .idk-char  { transition-delay: 0.24s; }
.idk-char-wrap:nth-child(10) .idk-char { transition-delay: 0.27s; }
.idk-char-wrap:nth-child(11) .idk-char { transition-delay: 0.30s; }
.idk-char-wrap:nth-child(12) .idk-char { transition-delay: 0.33s; }

/* ========================
   SCROLL REVEAL ANIMATION
======================== */
[data-idk-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--idk-ease-expo),
                transform 0.8s var(--idk-ease-expo);
}

[data-idk-reveal].idk-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-idk-delay="100"] { transition-delay: 0.1s; }
[data-idk-delay="150"] { transition-delay: 0.15s; }
[data-idk-delay="200"] { transition-delay: 0.2s; }

/* ========================
   TOUCH DEVICES (mobile-first)
   Native cursor without desktop cursor widgets or their animation loop.
======================== */
@media (hover: none), (pointer: coarse) {
    body,
    a, button, input, textarea, select, [role="button"] {
        cursor: auto;
    }

    .idk-cursor-dot,
    .idk-cursor-ring,
    #idk-trail-canvas {
        display: none !important;
    }
}

/* ========================
   LANGUAGE ENGINE
======================== */
html:not([data-lang="de"]) .idk-lang-de { display: none !important; }
html[data-lang="de"] .idk-lang-en { display: none !important; }
body:not(.idk-locale-de) .idk-lang-de { display: none !important; }
body.idk-locale-de .idk-lang-en { display: none !important; }