/* ============================================================
   kalptengunler.com — Premium Davetiye Paylaşılan Stiller
   Hedef: Romantik / Lux / Sinema temalarının ortak alt katmanı.
   Yaklaşım: CSS @layer (cascade kontrolü), CSS variables (theme override),
   prefers-reduced-motion fallback, mobile-first sıkı performans.
   ============================================================ */

@layer kg-base, kg-theme, kg-premium-fx;

/* ============================================================
   KG-BASE — paylaşılan typography + helper utilities
   ============================================================ */
@layer kg-base {

    .kg-prem-wrap {
        --kg-content-max: 720px;
        --kg-section-py: clamp(56px, 8vw, 96px);
        --kg-color-text: #2c1810;
        --kg-color-mute: rgba(44, 24, 16, 0.55);
        --kg-color-line: rgba(0, 0, 0, 0.08);
        --kg-easing: cubic-bezier(.4, 0, .2, 1);
        --kg-stagger: 0.08s;
    }

    .kg-prem-section {
        padding: var(--kg-section-py) clamp(16px, 5vw, 24px);
        position: relative;
        overflow: hidden;
    }
    .kg-prem-section-inner {
        max-width: var(--kg-content-max);
        margin: 0 auto;
        text-align: center;
    }
    .kg-prem-eyebrow {
        display: inline-block;
        font-family: "Cormorant SC", "Cormorant Garamond", serif;
        font-size: 12px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--kg-color-mute);
        margin-bottom: 18px;
    }
    .kg-prem-title {
        font-family: var(--kg-theme-display, "Cormorant Garamond"), serif;
        font-weight: 300;
        font-size: clamp(36px, 6vw, 64px);
        line-height: 1.05;
        color: var(--kg-color-text);
        letter-spacing: -0.015em;
        margin: 0 0 22px;
    }
    .kg-prem-title em {
        font-style: italic;
        color: var(--kg-color-accent, #c43b3b);
    }
    .kg-prem-desc {
        font-family: var(--kg-theme-body, "Lora"), serif;
        font-size: clamp(15px, 1.6vw, 17px);
        line-height: 1.75;
        color: var(--kg-color-mute);
        margin: 0 auto 28px;
        max-width: 600px;
    }
    .kg-prem-divider {
        width: 64px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--kg-color-line), transparent);
        margin: 32px auto;
    }

    /* Smooth scroll behavior (modern browsers) */
    .kg-prem-html { scroll-behavior: smooth; }

    /* Performance: prevent FOUC */
    .kg-prem-wrap [data-kg-cloak] { opacity: 0; }
}

/* ============================================================
   KG-THEME — tema-spesifik token slot'ları (override için)
   ============================================================ */
@layer kg-theme {

    .kg-prem-wrap {
        /* Default — temalar bu değişkenleri override eder */
        --kg-theme-display: "Cormorant Garamond";
        --kg-theme-body: "Lora";
        --kg-theme-script: "Pinyon Script";
        --kg-theme-mono: "IBM Plex Mono";

        --kg-color-primary: #c43b3b;
        --kg-color-accent: #d4a574;
        --kg-color-bg: #f5ebe0;
        --kg-color-deco: rgba(196, 59, 59, 0.18);
    }

    /* Hero parallax wrapper */
    .kg-parallax-hero {
        position: relative;
        height: clamp(560px, 90vh, 820px);
        overflow: hidden;
        background: var(--kg-color-bg);
    }
    .kg-parallax-layer {
        position: absolute;
        inset: -10% 0;
        will-change: transform;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    .kg-parallax-layer img,
    .kg-parallax-layer svg {
        width: 100%;
        height: 110%;
        object-fit: cover;
        max-width: none;
    }
    .kg-parallax-content {
        position: relative;
        z-index: 5;
        text-align: center;
        padding: 0 24px;
    }

    /* Hero couple names (premium signature) */
    .kg-hero-script {
        font-family: var(--kg-theme-script), cursive;
        font-size: clamp(56px, 11vw, 124px);
        line-height: 0.95;
        color: var(--kg-color-primary);
        letter-spacing: -0.01em;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    }
    .kg-hero-amp {
        font-family: var(--kg-theme-script), cursive;
        font-size: 0.6em;
        color: var(--kg-color-accent);
        margin: 0 0.2em;
        opacity: 0.85;
    }
    .kg-hero-date {
        margin-top: 24px;
        font-family: var(--kg-theme-body), serif;
        font-style: italic;
        font-size: clamp(15px, 2vw, 18px);
        letter-spacing: 0.04em;
        color: var(--kg-color-text);
    }

    /* Particle canvas — fixed overlay (non-blocking) */
    canvas[data-kg-particles] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }
}

/* ============================================================
   KG-PREMIUM-FX — premium tier'e özel görsel efektler
   ============================================================ */
@layer kg-premium-fx {

    /* Gold foil shimmer (Lux H1, Romantik couple names) */
    .kg-fx-shimmer {
        background: linear-gradient(
            110deg,
            var(--kg-color-primary) 0%,
            var(--kg-shimmer-light, #f9e8b4) 30%,
            var(--kg-shimmer-bright, #ffd700) 50%,
            var(--kg-shimmer-light, #f9e8b4) 70%,
            var(--kg-color-primary) 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: kgShimmer 3.5s linear infinite;
    }
    @keyframes kgShimmer {
        0%   { background-position: -200% center; }
        100% { background-position: 200% center; }
    }

    /* Editorial split-screen (Lux story) */
    .kg-fx-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(24px, 5vw, 64px);
        align-items: start;
    }
    .kg-fx-split-photo {
        position: sticky;
        top: 96px;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 24px 80px -32px rgba(0, 0, 0, 0.35);
    }
    .kg-fx-split-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .kg-fx-split-body {
        padding: 16px 0 96px;
    }
    @media (max-width: 768px) {
        .kg-fx-split { grid-template-columns: 1fr; gap: 32px; }
        .kg-fx-split-photo { position: relative; top: 0; aspect-ratio: 4 / 3; }
    }

    /* Line-art portrait stroke-draw */
    .kg-fx-line-art {
        display: block;
        width: clamp(160px, 24vw, 280px);
        height: auto;
        margin: 0 auto 24px;
    }
    .kg-fx-line-art path {
        fill: none;
        stroke: var(--kg-color-primary);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: kgStrokeDraw 3.5s ease-out forwards;
    }
    @keyframes kgStrokeDraw {
        to { stroke-dashoffset: 0; }
    }

    /* Section "scene-cut" transition (Sinema) */
    .kg-fx-scene-cut {
        position: fixed;
        inset: 0;
        background: #000;
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
        transition: opacity 0.3s ease;
    }
    .kg-fx-scene-cut.kg-cut-active {
        opacity: 1;
    }

    /* Anamorphic lens flare (Sinema hero transition) */
    .kg-fx-lens-flare {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.7) 50%, transparent 100%);
        transform: translateY(-50%) scaleX(0);
        transform-origin: center;
        pointer-events: none;
        opacity: 0;
    }
    .kg-fx-lens-flare.kg-flare-fire {
        animation: kgFlare 1.5s ease-out forwards;
    }
    @keyframes kgFlare {
        0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
        20%  { transform: translateY(-50%) scaleX(1); opacity: 1; }
        100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
    }

    /* Film grain overlay (Sinema sticky) */
    .kg-fx-grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9998;
        opacity: 0.05;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
        background-size: 200px;
    }

    /* Letterbox bars (Sinema cinema mode) */
    .kg-fx-letterbox::before,
    .kg-fx-letterbox::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        height: 6vh;
        background: #000;
        z-index: 9997;
        pointer-events: none;
        transition: transform 0.5s var(--kg-easing);
    }
    .kg-fx-letterbox::before { top: 0; transform: translateY(-100%); }
    .kg-fx-letterbox::after  { bottom: 0; transform: translateY(100%); }
    .kg-fx-letterbox.kg-cinema-on::before,
    .kg-fx-letterbox.kg-cinema-on::after { transform: translateY(0); }

    /* Decorative side frames (Türk klasik tezhip) */
    .kg-fx-side-frame {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 64px;
        pointer-events: none;
        opacity: 0.5;
        z-index: 100;
    }
    .kg-fx-side-frame--left  { left: 0; }
    .kg-fx-side-frame--right { right: 0; transform: scaleX(-1); }
    @media (max-width: 1024px) {
        .kg-fx-side-frame { display: none; }
    }

    /* Confetti burst (RSVP submit kutlama) */
    .kg-fx-confetti-stage {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9996;
        overflow: hidden;
    }
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion fallback
   TÜM premium FX disabled. Sadece statik render.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .kg-fx-shimmer { animation: none !important; background-position: 0 center; }
    .kg-fx-line-art path { stroke-dashoffset: 0 !important; animation: none !important; }
    .kg-fx-lens-flare { display: none !important; }
    .kg-fx-grain { display: none !important; }
    .kg-fx-scene-cut { display: none !important; }
    .kg-fx-confetti-stage { display: none !important; }
    canvas[data-kg-particles] { display: none !important; }
    .kg-parallax-layer { transform: none !important; }
    .kg-prem-wrap *,
    .kg-prem-wrap *::before,
    .kg-prem-wrap *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}