/* === AssessWiki Home Page CSS === */
/* Base styles are loaded via tailwind.min.css (compiled from input.css).   */
/* This file contains only homepage-specific styles for index.html.          */
a:hover {
    text-decoration: none !important;
}
/* === Appearance panel === */
.appearance-panel { background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
[data-theme="dark"] .appearance-panel { background: #242424; border-color: #374151; }

/* === Wiki gradient === */
.wiki-gradient { background: linear-gradient(135deg, #f8faff 0%, #fef3c7 50%, #ffffff 100%); }
[data-theme="dark"] .wiki-gradient { background: linear-gradient(135deg, #1e1e2e 0%, #2a2418 50%, #1a1a1a 100%); }

/* === Category pill === */
.cat-pill { transition: all 0.2s ease; }
.cat-pill:hover { transform: translateY(-1px); }

/* === Game card === */
.game-card { transition: all 0.25s ease; cursor: pointer; display: flex; flex-direction: column; }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.game-preview { border-radius: 12px 12px 0 0; min-height: 90px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; overflow: hidden; }
.game-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%); }
[data-theme="dark"] .game-card { background: #242424; border-color: #374151; }

/* === Dilemma choice === */
.dilemma-choice { transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; }
.dilemma-choice:hover { background: #f0f7ff; border-color: #93c5fd; transform: translateX(3px); }
.dilemma-bar { transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
[data-theme="dark"] .dilemma-choice:hover { background: #1e3a5f; border-color: #4b6b8f; }

/* === Fact card === */
.fact-card { transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fact-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,0.09); }

/* === Horizontal scroller === */
.scroll-x { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
[data-theme="dark"] .scroll-x::-webkit-scrollbar-thumb { background: #374151; }
@media (min-width: 1024px) { .scroll-x-flush { padding-bottom: 0; } }

/* === Intent chip === */
.intent-chip { transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; }
.intent-chip:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* === Micro-interactions: hover lift & scale === */
#trust-stats > div { transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
#trust-stats > div:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 22px rgba(0,0,0,0.09); }
.scenario-card { transition: all 0.25s ease; }
.scenario-card:hover { transform: translateY(-3px); }
.popular-search { transition: all 0.2s ease; display: inline-block; }
.popular-search:hover { transform: scale(1.08); }
.cat-header-band:hover .cat-icon-wrap { transform: rotate(-6deg) scale(1.1); }
.cat-icon-wrap { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* === Cursor blink === */
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.cursor { animation: blink 1s step-end infinite; }

/* === Assessment Map constellation === */
.map-container { position: relative; min-height: 340px; overflow: hidden; }
.map-container:not(.map-physics) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.map-container.map-physics .map-bubble { position: absolute; top: 0; left: 0; }
.map-bubble { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; will-change: transform; }
.map-container:not(.map-physics) .map-bubble { transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.map-container:not(.map-physics) .map-bubble:hover { transform: scale(1.2); box-shadow: 0 6px 20px rgba(0,0,0,0.12); z-index: 5; }
.map-container.map-physics .map-bubble { transition: filter 0.28s ease, border-color 0.28s ease; animation: map-glow 3.5s ease-in-out infinite; }
.map-container.map-physics .map-bubble:hover { filter: brightness(1.2); z-index: 10; }
.map-bubble .map-label { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.8); white-space: nowrap; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.08); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.map-bubble:hover .map-label { opacity: 1; transform: translateX(-50%) scale(1); }
[data-theme="dark"] .map-bubble .map-label { background: rgba(36,36,36,0.95); color: #e5e7eb; }
.map-bubble img, .map-bubble svg { pointer-events: none; }
@keyframes map-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--glow, transparent); } 50% { box-shadow: 0 0 10px 3px var(--glow, rgba(0,0,0,0.04)); } }

/* === Count-up animation === */
.count-up { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

/* === Category header band === */
.cat-header-band { border-radius: 12px; padding: 20px 24px; }
a.cat-header-band, a.cat-header-band:hover { text-decoration: none; color: inherit; }
.cat-header-band .portal-cta { transition: transform 0.2s ease; }
.cat-header-band:hover .portal-cta { transform: translateX(3px); }

/* === Layout differentiation === */
.layout-feature .game-card { border-width: 1px; border-color: #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.25s ease; }
.layout-feature .game-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: var(--accent, #e5e7eb); }
[data-theme="dark"] .layout-feature .game-card { border-color: #374151; }
.layout-list .game-card { border-left-width: 3px; border-left-color: transparent; transition: all 0.2s ease; }
.layout-list .game-card:hover { border-left-color: var(--accent, #e5e7eb); transform: translateX(3px); }
.layout-grid .game-card { transition: all 0.2s ease; }
.layout-grid .game-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--accent, #e5e7eb); }

/* === Zone Card Grid === */
.zone-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .zone-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zone-grid { grid-template-columns: repeat(3, 1fr); } }
.zone-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    padding: 24px; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.zone-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--zone-accent, #6b7280); transition: height 0.3s ease;
}
.zone-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); border-color: var(--zone-accent, #e5e7eb); }
.zone-card:hover::before { height: 6px; }
.zone-card-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 16px;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.zone-card:hover .zone-card-icon { transform: scale(1.1) rotate(-5deg); }
.zone-card-title { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; color: #1f2937; margin-bottom: 8px; line-height: 1.3; }
.zone-card-desc { font-size: 0.85rem; color: #6b7280; line-height: 1.6; flex: 1; margin-bottom: 18px; }
.zone-card-expert { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 12px; border-radius: 10px; background: #f9fafb; }
.zone-card-expert-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.zone-card-expert-info { min-width: 0; }
.zone-card-expert-name { font-size: 0.8rem; font-weight: 600; color: #374151; line-height: 1.2; }
.zone-card-expert-title { font-size: 0.7rem; color: #9ca3af; line-height: 1.2; }
.zone-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.zone-card-count { font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 9999px; }
.zone-card-cta { font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s ease; }
.zone-card:hover .zone-card-cta { gap: 8px; }
.zone-card-badge { position: absolute; top: 14px; right: 14px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 4px; }
.zone-cards-section.aw-in .zone-card { animation: zoneCardIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.zone-cards-section.aw-in .zone-card:nth-child(1) { animation-delay: 0.05s; }
.zone-cards-section.aw-in .zone-card:nth-child(2) { animation-delay: 0.11s; }
.zone-cards-section.aw-in .zone-card:nth-child(3) { animation-delay: 0.17s; }
.zone-cards-section.aw-in .zone-card:nth-child(4) { animation-delay: 0.23s; }
.zone-cards-section.aw-in .zone-card:nth-child(5) { animation-delay: 0.29s; }
.zone-cards-section.aw-in .zone-card:nth-child(6) { animation-delay: 0.35s; }
.zone-cards-section.aw-in .zone-card:nth-child(7) { animation-delay: 0.41s; }
.zone-cards-section.aw-in .zone-card:nth-child(8) { animation-delay: 0.47s; }
@keyframes zoneCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
[data-theme="dark"] .zone-card { background: #242424; border-color: #374151; }
[data-theme="dark"] .zone-card-title { color: #e5e7eb; }
[data-theme="dark"] .zone-card-desc { color: #9ca3af; }
[data-theme="dark"] .zone-card-footer { border-top-color: #374151; }
[data-theme="dark"] .zone-card-expert { background: #1a1a1a; }
[data-theme="dark"] .zone-card-expert-name { color: #d1d5db; }

/* === Zone Card: Per-zone visual identity (SVG patterns + gradients + hover) === */

/* 1. Career Direction — concentric target circles */
[data-zone="career"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='155' cy='45' r='65' fill='none' stroke='%23bfdbfe' stroke-width='1.5'/%3E%3Ccircle cx='155' cy='45' r='42' fill='none' stroke='%23bfdbfe' stroke-width='1.5'/%3E%3Ccircle cx='155' cy='45' r='20' fill='none' stroke='%23bfdbfe' stroke-width='1.5'/%3E%3Ccircle cx='155' cy='45' r='5' fill='%23bfdbfe'/%3E%3C/svg%3E") no-repeat top right / 180px 180px,
        linear-gradient(135deg, #eff6ff 0%, #f0f9ff 55%, #ffffff 100%);
}
[data-zone="career"]::before { background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); }
[data-zone="career"]:hover .zone-card-icon { transform: scale(1.2); }
[data-zone="career"]:hover { box-shadow: 0 16px 40px rgba(37,99,235,0.12); }

/* 2. Work Style — diagonal stripe rhythm */
[data-zone="workstyle"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M-5 45 L45 -5' stroke='%23fde68a' stroke-width='1'/%3E%3Cpath d='M-5 25 L25 -5' stroke='%23fde68a' stroke-width='1'/%3E%3Cpath d='M15 45 L45 15' stroke='%23fde68a' stroke-width='1'/%3E%3C/svg%3E") repeat,
        linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #ffffff 100%);
}
[data-zone="workstyle"]::before { background: #d97706; height: 5px; }
[data-zone="workstyle"]:hover .zone-card-icon { transform: rotate(15deg) scale(1.1); }
[data-zone="workstyle"]:hover { box-shadow: 0 16px 40px rgba(217,119,6,0.12); }

/* 3. Communication & Teams — network nodes */
[data-zone="teams"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='30' y1='30' x2='100' y2='18' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Cline x1='100' y1='18' x2='170' y2='45' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Cline x1='170' y1='45' x2='155' y2='125' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Cline x1='30' y1='30' x2='55' y2='110' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Cline x1='55' y1='110' x2='155' y2='125' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Cline x1='55' y1='110' x2='100' y2='18' stroke='%23a5f3fc' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='30' r='5' fill='%23a5f3fc'/%3E%3Ccircle cx='100' cy='18' r='4' fill='%23a5f3fc'/%3E%3Ccircle cx='170' cy='45' r='5' fill='%23a5f3fc'/%3E%3Ccircle cx='55' cy='110' r='4' fill='%23a5f3fc'/%3E%3Ccircle cx='155' cy='125' r='5' fill='%23a5f3fc'/%3E%3C/svg%3E") no-repeat top right / 190px 190px,
        linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #ffffff 100%);
}
[data-zone="teams"]::before { background: repeating-linear-gradient(90deg, #0891b2 0 8px, transparent 8px 14px); }
[data-zone="teams"]:hover .zone-card-icon { transform: scale(1.15) translateY(-2px); }
[data-zone="teams"]:hover { box-shadow: 0 16px 40px rgba(8,145,178,0.12); }

/* 4. Leadership — diamond geometric energy */
[data-zone="leadership"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M160 15 L178 40 L160 65 L142 40 Z' fill='none' stroke='%23fed7aa' stroke-width='1.5'/%3E%3Cpath d='M95 80 L115 105 L95 130 L75 105 Z' fill='none' stroke='%23fed7aa' stroke-width='1'/%3E%3Cpath d='M35 35 L50 55 L35 75 L20 55 Z' fill='none' stroke='%23fed7aa' stroke-width='0.8'/%3E%3Cpath d='M160 15 L160 0' stroke='%23fed7aa' stroke-width='1'/%3E%3Cpath d='M178 40 L195 40' stroke='%23fed7aa' stroke-width='0.5'/%3E%3Cpath d='M142 40 L125 40' stroke='%23fed7aa' stroke-width='0.5'/%3E%3C/svg%3E") no-repeat top right / 190px 190px,
        linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #ffffff 100%);
}
[data-zone="leadership"]::before { background: linear-gradient(90deg, #ea580c 0%, #fb923c 50%, #ea580c 100%); height: 5px; }
[data-zone="leadership"]:hover .zone-card-icon { transform: translateY(-4px) scale(1.1); }
[data-zone="leadership"]:hover { box-shadow: 0 16px 40px rgba(234,88,12,0.12); }

/* 5. Learning & Growth — organic ascending curves */
[data-zone="growth"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M5 185 Q55 120 100 75 T195 15' fill='none' stroke='%23ddd6fe' stroke-width='1.5'/%3E%3Cpath d='M20 195 Q50 140 80 95 T165 35' fill='none' stroke='%23ddd6fe' stroke-width='1'/%3E%3Cpath d='M40 200 Q70 150 90 105 T175 45' fill='none' stroke='%23ddd6fe' stroke-width='0.8'/%3E%3Ccircle cx='195' cy='15' r='6' fill='%23ddd6fe'/%3E%3Ccircle cx='165' cy='35' r='4' fill='%23ddd6fe'/%3E%3Ccircle cx='100' cy='75' r='3' fill='%23ddd6fe'/%3E%3C/svg%3E") no-repeat top right / 190px 190px,
        linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ffffff 100%);
}
[data-zone="growth"]::before { background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed); }
[data-zone="growth"]:hover .zone-card-icon { transform: scale(1.25) rotate(-3deg); }
[data-zone="growth"]:hover { box-shadow: 0 16px 40px rgba(124,58,237,0.12); }

/* 6. Work Stress — ECG heartbeat waveform */
[data-zone="workstress"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 95 L35 95 L43 75 L49 115 L55 55 L61 135 L67 95 L120 95 L128 80 L134 110 L140 95 L200 95' fill='none' stroke='%23fecaca' stroke-width='1.5'/%3E%3Cpath d='M0 125 L25 125 L31 115 L37 135 L43 125 L100 125 L106 117 L112 133 L118 125 L200 125' fill='none' stroke='%23fecaca' stroke-width='0.8' opacity='0.6'/%3E%3C/svg%3E") no-repeat top right / 200px 130px,
        linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #ffffff 100%);
}
[data-zone="workstress"]::before { background: #dc2626; animation: zone-bar-pulse 2s ease-in-out infinite; }
[data-zone="workstress"]:hover .zone-card-icon { animation: zone-heartbeat 0.6s ease; }
[data-zone="workstress"]:hover { box-shadow: 0 16px 40px rgba(220,38,38,0.12); }

/* 7. Coaching Question Lab — academic arch + laurel */
[data-zone="expert-coaching"] {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M25 165 Q100 30 175 165' fill='none' stroke='%2399f6e4' stroke-width='1.5'/%3E%3Cpath d='M50 165 Q100 70 150 165' fill='none' stroke='%2399f6e4' stroke-width='1'/%3E%3Ccircle cx='100' cy='40' r='9' fill='none' stroke='%2399f6e4' stroke-width='1'/%3E%3Cline x1='100' y1='49' x2='100' y2='70' stroke='%2399f6e4' stroke-width='1'/%3E%3Cpath d='M50 170 L40 152 M70 172 L63 154 M100 175 L100 157 M130 172 L137 154 M150 170 L160 152' stroke='%2399f6e4' stroke-width='0.8' fill='none'/%3E%3C/svg%3E") no-repeat top right / 190px 190px,
        linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 50%, #ffffff 100%);
}
[data-zone="expert-coaching"]::before { background: linear-gradient(90deg, #0d9488, #2dd4bf, #0d9488); height: 5px; }
[data-zone="expert-coaching"]:hover .zone-card-icon { transform: scale(1.15) rotate(5deg); }
[data-zone="expert-coaching"]:hover { box-shadow: 0 16px 40px rgba(13,148,136,0.12); }

/* Zone-specific keyframes */
@keyframes zone-bar-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes zone-heartbeat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.2); } 60% { transform: scale(0.95); } }

/* Dark theme: zone backgrounds */
[data-theme="dark"] [data-zone="career"] { background: linear-gradient(135deg, #1a1f2e 0%, #1e2433 50%, #242424 100%); }
[data-theme="dark"] [data-zone="workstyle"] { background: linear-gradient(135deg, #2a2418 0%, #2a2620 50%, #242424 100%); }
[data-theme="dark"] [data-zone="teams"] { background: linear-gradient(135deg, #182a2e 0%, #1a2830 50%, #242424 100%); }
[data-theme="dark"] [data-zone="leadership"] { background: linear-gradient(135deg, #2a2018 0%, #2a2218 50%, #242424 100%); }
[data-theme="dark"] [data-zone="growth"] { background: linear-gradient(135deg, #241e2e 0%, #26203a 50%, #242424 100%); }
[data-theme="dark"] [data-zone="workstress"] { background: linear-gradient(135deg, #2e1818 0%, #2a1818 50%, #242424 100%); }
[data-theme="dark"] [data-zone="expert-coaching"] { background: linear-gradient(135deg, #182a28 0%, #1a2a28 50%, #242424 100%); }

/* === Reduced motion: homepage overrides === */
@media (prefers-reduced-motion: reduce) { .zone-card, .zone-card::before, .zone-card-icon, .zone-card-cta { transition: none !important; } .zone-card:hover, .zone-card:hover .zone-card-icon { transform: none !important; animation: none !important; } .zone-cards-section.aw-in .zone-card { animation: none !important; opacity: 1 !important; } [data-zone="workstress"]::before { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .aw-reveal { opacity: 1 !important; animation: none !important; transform: none !important; } .map-bubble:hover, .layout-feature .game-card:hover, .layout-list .game-card:hover, .fact-card:hover, .intent-chip:hover, .dilemma-choice:hover, #trust-stats > div:hover, .scenario-card:hover, .popular-search:hover, .cat-icon-wrap, .portal-cta { transform: none !important; } .map-container.map-physics .map-bubble { animation: none !important; } }