/**
 * INTI ÑAN Karpay Initiation - Styles
 * Version: 4.3.0
 * 
 * v4.3.0 UPDATES:
 * - Shaman fire scene image (left side, 40% opacity)
 * - Save & Exit button (top right)
 * - Audio On/Off toggle (below Save & Exit)
 * - Hidden on mobile (<768px)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --karpay-bg: #000000;
    --karpay-bg-light: #12121a;
    --karpay-bg-card: #1a1a2e;
    --karpay-text: #ffffff;
    --karpay-text-body: rgba(255,255,255,0.95);
    --karpay-text-soft: rgba(255,255,255,0.9);
    --karpay-text-muted: rgba(255,255,255,0.85);
    --karpay-puma: #c9a227;
    --karpay-puma-glow: rgba(201, 162, 39, 0.4);
    --karpay-condor: #7eb8da;
    --karpay-condor-glow: rgba(126, 184, 218, 0.4);
    --karpay-serpent: #2d8a6e;
    --karpay-serpent-glow: rgba(45, 138, 110, 0.4);
    --font-primary: 'Cormorant Garamond', Georgia, serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.karpay-body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    background-color: var(--karpay-bg);
    color: var(--karpay-text-body);
    line-height: 1.7;
    min-height: 100vh;
}

.karpay-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* ============================================
   SHAMAN FIRE SCENE IMAGE
   ============================================ */
.karpay-fire-scene {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80vh;
    max-height: 700px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.karpay-fire-scene img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .karpay-fire-scene { display: none; }
}

@media (min-width: 1400px) {
    .karpay-fire-scene { max-height: 800px; }
}

/* ============================================
   SAVE & EXIT BUTTON
   ============================================ */
.karpay-exit {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: var(--karpay-text);
    font-family: var(--font-primary);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 10px 16px;
    transition: all var(--transition-fast);
}

.karpay-exit:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   AUDIO TOGGLE BUTTON
   ============================================ */
.karpay-audio-toggle {
    position: fixed;
    top: 68px;
    right: 20px;
    z-index: 200;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: var(--karpay-text);
    font-family: var(--font-primary);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 10px 16px;
    transition: all var(--transition-fast);
}

.karpay-audio-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.karpay-audio-toggle[data-audio-enabled="false"] {
    background: rgba(255, 100, 100, 0.15);
    border-color: rgba(255, 100, 100, 0.4);
}

.karpay-audio-toggle[data-audio-enabled="false"] .audio-on { display: none; }
.karpay-audio-toggle[data-audio-enabled="false"] .audio-off { display: inline; }
.karpay-audio-toggle[data-audio-enabled="true"] .audio-off { display: none; }
.karpay-audio-toggle[data-audio-enabled="true"] .audio-on { display: inline; }

/* ============================================
   SCREENS
   ============================================ */
.karpay-screen {
    display: none;
    min-height: 100vh;
    padding: var(--spacing-lg) var(--spacing-md);
    position: relative;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.karpay-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.karpay-screen--puma { background: linear-gradient(180deg, var(--karpay-bg) 0%, #1a1510 100%); }
.karpay-screen--condor { background: linear-gradient(180deg, var(--karpay-bg) 0%, #101520 100%); }
.karpay-screen--serpent { background: linear-gradient(180deg, var(--karpay-bg) 0%, #0a1510 100%); }

.karpay-content {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-md);
    position: relative;
    z-index: 10;
    text-align: center;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.karpay-title {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: var(--font-weight-medium);
    color: var(--karpay-text);
    margin: 0 0 var(--spacing-md);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.karpay-title--puma { color: var(--karpay-puma); }
.karpay-title--condor { color: var(--karpay-condor); }
.karpay-title--serpent { color: var(--karpay-serpent); }

.karpay-subtitle {
    font-family: var(--font-primary);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: var(--font-weight-normal);
    color: var(--karpay-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 var(--spacing-sm);
    text-wrap: balance;
}

.karpay-subtitle--world {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-md);
}

.karpay-text {
    font-family: var(--font-primary);
    font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
    font-weight: var(--font-weight-normal);
    color: var(--karpay-text-body);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.8;
    text-wrap: pretty;
}

.karpay-text strong { color: var(--karpay-text); }
.karpay-text--soft { color: var(--karpay-text-soft); font-size: clamp(0.9375rem, 2vw, 1.0625rem); }
.karpay-text--muted { color: var(--karpay-text-muted); }
.karpay-text--emphasis { font-style: italic; color: var(--karpay-text); }
.karpay-text--scenario { font-size: clamp(1.125rem, 3vw, 1.25rem); margin-bottom: var(--spacing-md); }
.karpay-text--prompt { font-size: clamp(1.25rem, 3vw, 1.5rem); font-style: italic; margin-bottom: var(--spacing-md); }
.karpay-text--instruction { font-size: clamp(1.125rem, 3vw, 1.25rem); font-weight: var(--font-weight-medium); color: var(--karpay-text); }

.karpay-text--resonance {
    font-size: clamp(1.0625rem, 2.5vw, 1.125rem);
    font-style: italic;
    color: var(--karpay-text-body);
    line-height: 1.9;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid var(--karpay-condor);
    text-wrap: pretty;
}

/* ============================================
   FORM FIELDS
   ============================================ */
.karpay-field { margin-bottom: var(--spacing-md); text-align: left; }

.karpay-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--karpay-text);
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

.karpay-input {
    width: 100%;
    max-width: 400px;
    margin: 0 auto var(--spacing-sm);
    display: block;
    padding: 14px 18px;
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    background: #1a1a2e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.karpay-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.karpay-input::placeholder { color: var(--karpay-text-muted); -webkit-text-fill-color: var(--karpay-text-muted); }

.karpay-input:-webkit-autofill,
.karpay-input:-webkit-autofill:hover,
.karpay-input:-webkit-autofill:focus,
.karpay-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #1a1a2e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

.karpay-textarea {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    padding: 14px 18px;
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    background: #1a1a2e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    outline: none;
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.karpay-textarea:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.karpay-textarea::placeholder { color: var(--karpay-text-muted); -webkit-text-fill-color: var(--karpay-text-muted); }

.karpay-textarea:-webkit-autofill,
.karpay-textarea:-webkit-autofill:hover,
.karpay-textarea:-webkit-autofill:focus,
.karpay-textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #1a1a2e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   EXAMPLES
   ============================================ */
.karpay-examples {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.karpay-examples-label { font-size: 0.9375rem; color: var(--karpay-text-soft); margin: 0 0 var(--spacing-xs); text-align: center; }
.karpay-examples-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.karpay-examples-list li { font-size: 0.9375rem; font-style: italic; color: var(--karpay-text-muted); margin-bottom: 6px; }
.karpay-examples-list li::before { content: "• "; color: var(--karpay-text-muted); }

/* ============================================
   BUTTONS
   ============================================ */
.karpay-btn {
    display: inline-block;
    padding: 16px 40px;
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-medium);
    color: var(--karpay-bg);
    background: var(--karpay-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--transition-fast);
    margin-top: var(--spacing-md);
}

.karpay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25); }
.karpay-btn:active { transform: translateY(0); }
.karpay-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.karpay-btn--puma { background: var(--karpay-puma); color: var(--karpay-bg); }
.karpay-btn--puma:hover { box-shadow: 0 8px 20px var(--karpay-puma-glow); }
.karpay-btn--condor { background: var(--karpay-condor); color: var(--karpay-bg); }
.karpay-btn--condor:hover { box-shadow: 0 8px 20px var(--karpay-condor-glow); }
.karpay-btn--serpent { background: var(--karpay-serpent); color: var(--karpay-bg); }
.karpay-btn--serpent:hover { box-shadow: 0 8px 20px var(--karpay-serpent-glow); }
.karpay-btn--secondary { background: transparent; color: var(--karpay-text); border: 1px solid var(--karpay-text); }
.karpay-btn--secondary:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; }

.karpay-final-buttons { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: center; margin-top: var(--spacing-lg); }
@media (min-width: 480px) { .karpay-final-buttons { flex-direction: row; justify-content: center; } }

/* ============================================
   OPTIONS
   ============================================ */
.karpay-options { display: flex; flex-direction: column; gap: var(--spacing-sm); margin: var(--spacing-md) auto; max-width: 600px; }

.karpay-option {
    display: block;
    width: 100%;
    padding: 16px 20px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--karpay-text-body);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    text-wrap: pretty;
}

.karpay-option strong { color: var(--karpay-text); }
.karpay-option:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); }
.karpay-option.selected { background: rgba(255, 255, 255, 0.15); border-color: var(--karpay-text); }

.karpay-screen--puma .karpay-option.selected { border-color: var(--karpay-puma); background: var(--karpay-puma-glow); }
.karpay-screen--condor .karpay-option.selected { border-color: var(--karpay-condor); background: var(--karpay-condor-glow); }
.karpay-screen--serpent .karpay-option.selected { border-color: var(--karpay-serpent); background: var(--karpay-serpent-glow); }

.karpay-options--tension { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: center; }
.karpay-option--tension { text-align: center; padding: var(--spacing-md); }
.karpay-option--tension strong { display: block; font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--karpay-text); margin-bottom: 6px; }
.karpay-option--tension span { display: block; font-size: 0.9375rem; color: var(--karpay-text-soft); }
.karpay-tension-or { display: block; font-size: 0.875rem; font-style: italic; color: var(--karpay-text-muted); letter-spacing: 0.1em; padding: var(--spacing-xs) 0; }

.karpay-options--callings { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); }
@media (min-width: 600px) { .karpay-options--callings { grid-template-columns: repeat(2, 1fr); } }
.karpay-option--calling { text-align: center; padding: var(--spacing-md); }
.karpay-option--calling strong { display: block; font-size: 1.0625rem; font-weight: var(--font-weight-semibold); color: var(--karpay-text); margin-bottom: 6px; }
.karpay-option--calling span { display: block; font-size: 0.875rem; color: var(--karpay-text-soft); }

.karpay-options--nature { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.karpay-option--element { text-align: center; padding: var(--spacing-md); }
.karpay-option--element strong { display: block; font-size: 1.0625rem; font-weight: var(--font-weight-semibold); color: var(--karpay-text); margin-bottom: 6px; }
.karpay-option--element span { display: block; font-size: 0.8125rem; color: var(--karpay-text-soft); }

.karpay-options--resonance { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
@media (min-width: 480px) { .karpay-options--resonance { grid-template-columns: repeat(4, 1fr); } }
.karpay-options--resonance .karpay-option { text-align: center; padding: var(--spacing-sm); font-size: 0.9375rem; }

/* ============================================
   FIGURES
   ============================================ */
.karpay-figures { display: flex; flex-direction: column; gap: var(--spacing-md); margin: var(--spacing-md) 0; }
.karpay-figure { padding: var(--spacing-md); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; text-align: left; cursor: pointer; transition: all var(--transition-fast); }
.karpay-figure:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.25); }
.karpay-figure.selected { background: var(--karpay-puma-glow); border-color: var(--karpay-puma); }
.karpay-figure-text { font-size: 0.9375rem; color: var(--karpay-text-soft); margin: 0 0 var(--spacing-xs); }
.karpay-figure-text strong { color: var(--karpay-text); }
.karpay-figure-quote { font-size: 1rem; font-style: italic; color: var(--karpay-text-body); line-height: 1.8; margin: 0; }
.karpay-fire-questions { margin-top: var(--spacing-lg); }
.karpay-field--secondary, .karpay-field--rejected { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* ============================================
   RESONANCE BOX
   ============================================ */
.karpay-resonance { margin: var(--spacing-md) 0; }

/* ============================================
   GUARDIAN IMAGES
   ============================================ */
.karpay-guardian {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    width: 300px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--transition-slow);
}

.karpay-guardian--puma { background-image: url('../images/puma.webp'); }
.karpay-guardian--condor { background-image: url('../images/condor.webp'); }
.karpay-guardian--serpent { background-image: url('../images/serpent.webp'); }

@media (max-width: 768px) { .karpay-guardian { display: none; } }

/* ============================================
   PROGRESS BAR
   ============================================ */
.karpay-progress { position: fixed; bottom: 0; left: 0; right: 0; padding: var(--spacing-sm); background: linear-gradient(to top, var(--karpay-bg) 0%, transparent 100%); z-index: 100; }
.karpay-progress-bar { width: 100%; max-width: 400px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; margin: 0 auto var(--spacing-xs); overflow: hidden; }
.karpay-progress-fill { height: 100%; width: 0%; background: var(--karpay-text); border-radius: 2px; transition: width var(--transition-normal); }
body.karpay-puma-active .karpay-progress-fill { background: var(--karpay-puma); }
body.karpay-condor-active .karpay-progress-fill { background: var(--karpay-condor); }
body.karpay-serpent-active .karpay-progress-fill { background: var(--karpay-serpent); }
.karpay-progress-text { text-align: center; font-size: 0.8125rem; color: var(--karpay-text-muted); letter-spacing: 0.05em; }

/* ============================================
   LIST STYLES
   ============================================ */
.karpay-list { list-style: none; padding: 0; margin: var(--spacing-sm) auto; max-width: 480px; text-align: left; }
.karpay-list li { position: relative; padding-left: 24px; margin-bottom: var(--spacing-xs); font-size: 1rem; color: var(--karpay-text-body); }
.karpay-list li::before { content: "•"; position: absolute; left: 8px; color: var(--karpay-text-soft); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .karpay-screen { padding: var(--spacing-md) var(--spacing-sm); }
    .karpay-content { padding: var(--spacing-sm); }
    .karpay-options--nature { grid-template-columns: 1fr; }
    .karpay-options--resonance { grid-template-columns: repeat(2, 1fr); }
    .karpay-btn { width: 100%; padding: 14px 24px; }
    .karpay-option { padding: 14px 16px; }
    .karpay-exit, .karpay-audio-toggle { padding: 8px 12px; font-size: 0.8125rem; }
    .karpay-audio-toggle { top: 58px; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.karpay-screen.active .karpay-content { animation: fadeIn 0.6s ease forwards; }
.karpay-screen.transitioning { opacity: 0; }

.karpay-loading { display: flex; align-items: center; justify-content: center; min-height: 100px; margin-top: var(--spacing-lg); }
.karpay-loading::after { content: ""; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--karpay-text); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

audio { display: none; }

@media print {
    .karpay-progress, .karpay-guardian, .karpay-fire-scene, .karpay-exit, .karpay-audio-toggle, .karpay-btn { display: none !important; }
    .karpay-screen { display: block !important; page-break-after: always; }
}

/* Hide progress bar on success screen */
.karpay-screen[data-screen="completion-success"].active ~ .karpay-progress {
    display: none;
}