/* ==========================================================================
   Atemtherapie Practice – Core CSS & Resilient Layout System
   ========================================================================== */

/* Base Resets & Constraints */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--theme-bg, #FAF8F5);
    color: var(--theme-text-main, #1E293B);
    font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Media Elements & SVG Constraints */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Specific SVG Icon sizing fallbacks */
svg.w-3\.5 { width: 0.875rem; height: 0.875rem; }
svg.w-4 { width: 1rem; height: 1rem; }
svg.w-5 { width: 1.25rem; height: 1.25rem; }
svg.w-6 { width: 1.5rem; height: 1.5rem; }
svg.w-8 { width: 2rem; height: 2rem; }
svg.w-10 { width: 2.5rem; height: 2.5rem; }
svg.w-12 { width: 3rem; height: 3rem; }

/* Cloak & HTMX states */
[x-cloak] {
    display: none !important;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Typography Headings */
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading, 'Lora', Georgia, serif);
    font-weight: 700;
    line-height: 1.25;
    color: var(--theme-text-main, #1E293B);
    margin-top: 0;
}

/* Dynamic Theme Utilities */
.bg-theme-main {
    background-color: var(--theme-bg, #FAF8F5);
}

.bg-theme-surface,
.bg-theme-card {
    background-color: var(--theme-surface, #FFFFFF);
}

.bg-theme-muted {
    background-color: var(--theme-surface-muted, #F3EFE8);
}

.text-theme-primary {
    color: var(--theme-primary, #4A6C50);
}

.text-theme-text-main {
    color: var(--theme-text-main, #1E293B);
}

.text-theme-text-muted {
    color: var(--theme-text-muted, #64748B);
}

.bg-theme-primary {
    background-color: var(--theme-primary, #4A6C50);
}

.bg-theme-secondary {
    background-color: var(--theme-secondary, #CEDECF);
}

.border-theme {
    border-color: var(--theme-border, #E6DED1);
}

.shape-organic {
    border-radius: var(--theme-shape-radius, 42% 58% 70% 30% / 45% 45% 55% 55%);
    transition: border-radius 0.6s ease;
}

/* Honeypot field of the contact form – invisible for humans, filled by naive bots */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dandelion ambient effects (TDR-0002) – moved out of inline <style> for the CSP */
@keyframes seedBreathFloat1 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
    40% { transform: translate3d(18px, -28px, 0) rotate(8deg); }
    70% { transform: translate3d(-10px, -14px, 0) rotate(-8deg); }
}
@keyframes seedBreathFloat2 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(6deg); }
    45% { transform: translate3d(-20px, -32px, 0) rotate(-10deg); }
    80% { transform: translate3d(12px, -12px, 0) rotate(7deg); }
}
@keyframes seedBreathFloat3 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
    35% { transform: translate3d(24px, -22px, 0) rotate(12deg); }
    65% { transform: translate3d(10px, 16px, 0) rotate(-3deg); }
}
@keyframes pngWhisperFloat {
    0% { opacity: 0.85; transform: translate3d(0, 0, 0) scale(0.85); }
    100% { opacity: 0; transform: translate3d(10px, -35px, 0) scale(1.1); }
}
.whisper-seed { animation: pngWhisperFloat 1.2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
    .ambient-png-seed, .whisper-seed { animation: none !important; }
}

/* Rich-text content blocks (presentation/rich_text.py): paragraphs, lists, underline */
.rich-text > * + * { margin-top: 0.5rem; }
.rich-text ul { list-style: disc; padding-left: 1.25rem; }
.rich-text li + li { margin-top: 0.25rem; }
.rich-text strong { font-weight: 600; color: var(--theme-text-main, #1E293B); }
.rich-text u { text-underline-offset: 2px; }

/* «Atmende Blume» for children (components/kids_flower_player.html, js/components/kids-flower.js) */
.kids-petal {
    fill: var(--theme-secondary, #CEDECF);
    stroke: var(--theme-primary, #4A6C50);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scale(0.35, 0.4);
    transition: transform 4s ease-in-out;
}
.kids-flower.is-open .kids-petal { transform: scale(1); }
.kids-flower.is-inhale .kids-petal { transition-duration: 3s; transition-timing-function: ease-out; }
.kids-flower-center { fill: var(--theme-accent, #7FA485); }

/* Each flower moves like its exercise (kids-flower.js → flowerClass) */
.kids-flower { transition: transform 4s ease-in-out; transform-origin: 50% 50%; }
.kids-flower.is-inhale { transition-duration: 3s; transition-timing-function: ease-out; }
/* 1 Knospe: only the fingertips part – petals open halfway */
.kids-flower.v1.is-open .kids-petal { transform: scale(0.62, 0.68); }
/* 3 Grosse Blume: arms far out – the blossom grows and turns a little */
.kids-flower.v3.is-open { transform: scale(1.14) rotate(14deg); }
/* 4 Blumenwiese: hands up over the head – the blossom rises while opening */
.kids-flower.v4.is-open { transform: translateY(-9%) scale(1.05); }

/* Real photos of the exercise, cross-fading subtly behind the flower */
.kids-photos {
    position: absolute; inset: 0; overflow: hidden; border-radius: 1.25rem;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.kids-photo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 4s ease-in-out;
}
.kids-photo.is-inhale { transition-duration: 3s; }
/* Opacity is set in the Design Studio (slider «Foto-Deckkraft», via /theme.css) */
.kids-photo.is-visible { opacity: var(--kids-photo-opacity, 0.3); }

.kids-dandelion { transition: transform 3s ease-out; }
.kids-dandelion.is-growing { transform: scale(1.12); }
.kids-dandelion-stem {
    position: absolute; left: 50%; top: 50%; width: 3px; height: 50%;
    margin-left: -1.5px; border-radius: 2px; background: var(--theme-primary, #4A6C50); opacity: 0.6;
}
.kids-dandelion-center {
    position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border-radius: 9999px; background: var(--theme-accent, #7FA485);
}
.kids-seed-anchor {
    position: absolute; left: 50%; top: 50%; width: 40px; margin: -30px 0 0 -20px;
    transform-origin: 50% 100%;
}
/* The seed PNG is white – a soft outline keeps it visible on light cards */
.kids-seed {
    width: 100%; height: auto; transition: opacity 0.3s;
    filter: drop-shadow(0 0 1px rgba(60, 50, 30, 0.55)) drop-shadow(0 1px 2px rgba(60, 50, 30, 0.25));
}
.kids-seed.is-flying { animation: kidsSeedFly 1.6s ease-out forwards; }
.kids-seed.is-gone { opacity: 0; }
.kids-seed-float { animation: seedBreathFloat1 6s ease-in-out infinite; }
@keyframes kidsSeedFly {
    0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(18px, -120px, 0) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
    .kids-petal, .kids-dandelion, .kids-flower, .kids-photo { transition: none; }
    .kids-flower.v3.is-open, .kids-flower.v4.is-open { transform: none; }
    .kids-seed.is-flying { animation: none; opacity: 0; }
    .kids-seed-float { animation: none; }
}

/* Printable exercise card (pages/kids_card.html) */
.kids-card { page: kidscard; }
@page kidscard { size: A5; margin: 12mm; }
@media print {
    .kids-card { box-shadow: none !important; border: none !important; padding: 0 !important; }
}

/* Variant card currently guided by the «Atmende Blume» player */
.kids-variant-card { transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease; }
.kids-variant-card.kids-card-active {
    border-color: var(--theme-primary, #4A6C50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #4A6C50) 25%, transparent);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .kids-variant-card { transition: none; } .kids-variant-card.kids-card-active { transform: none; } }