/* algoha.com - Dark Academia Interrogation Chamber */
:root {
--bg-primary: #0a1628;
--bg-secondary: #132240;
--bg-tertiary: #1a3052;
--accent-copper: #c47832;
--accent-brass: #d4a256;
--text-primary: #e8e0d4;
--text-secondary: #9a9486;
--warning-ember: #b83c2b;
--metallic-steel: #7a8ca4;
}

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 16px;
scroll-behavior: auto;
}

body {
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
color: var(--text-primary);
background: var(--bg-primary);
overflow: hidden;
line-height: 1.75;
}

/* Scroll Container with Snap */
#scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 0;
}
/* Panel Base */
.panel {
position: relative;
width: 100%;
height: 100vh;
scroll-snap-align: start;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.mesh-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.panel-content {
position: relative;
z-index: 2;
max-width: 55%;
opacity: 0;
transform: scale(0.97);
transition: opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1), transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.panel.active .panel-content {
opacity: 1;
transform: scale(1);
}

.content-left {
margin-right: auto;
margin-left: 15%;
}

.content-right {
margin-left: auto;
margin-right: 15%;
}

.content-center {
text-align: center;
margin: 0 auto;
}
/* Gradient Mesh Backgrounds */
.mesh-hero {
background:
  radial-gradient(ellipse at 20% 30%, #1a3052 0%, transparent 50%),
  radial-gradient(ellipse at 75% 60%, #132240 0%, transparent 45%),
  radial-gradient(ellipse at 50% 85%, #1a3052 0%, transparent 55%),
  #0a1628;
animation: meshShift 60s ease-in-out infinite alternate;
}

.mesh-warm-1 {
background:
  radial-gradient(ellipse at 30% 40%, #1a3052 0%, transparent 50%),
  radial-gradient(ellipse at 80% 30%, rgba(196,120,50,0.05) 0%, transparent 40%),
  radial-gradient(ellipse at 60% 80%, #132240 0%, transparent 55%),
  #0a1628;
animation: meshShift2 60s ease-in-out infinite alternate;
}

.mesh-warm-2 {
background:
  radial-gradient(ellipse at 70% 25%, #1a3052 0%, transparent 45%),
  radial-gradient(ellipse at 20% 70%, rgba(196,120,50,0.06) 0%, transparent 45%),
  radial-gradient(ellipse at 50% 50%, #132240 0%, transparent 60%),
  #0a1628;
animation: meshShift 55s ease-in-out infinite alternate;
}

.mesh-warm-3 {
background:
  radial-gradient(ellipse at 40% 60%, #1a3052 0%, transparent 50%),
  radial-gradient(ellipse at 85% 20%, rgba(196,120,50,0.07) 0%, transparent 40%),
  radial-gradient(ellipse at 15% 85%, rgba(212,162,86,0.04) 0%, transparent 50%),
  radial-gradient(ellipse at 60% 40%, #132240 0%, transparent 55%),
  #0a1628;
animation: meshShift2 65s ease-in-out infinite alternate;
}

.mesh-warm-4 {
background:
  radial-gradient(ellipse at 25% 35%, rgba(196,120,50,0.08) 0%, transparent 45%),
  radial-gradient(ellipse at 75% 75%, #1a3052 0%, transparent 50%),
  radial-gradient(ellipse at 50% 20%, rgba(212,162,86,0.05) 0%, transparent 50%),
  radial-gradient(ellipse at 40% 70%, #132240 0%, transparent 55%),
  #0a1628;
animation: meshShift 58s ease-in-out infinite alternate;
}

.mesh-reckoning {
background: #e8e0d4;
}
@keyframes meshShift {
0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
50% { background-position: 5% 3%, -3% 5%, 2% -4%; }
100% { background-position: -3% -5%, 5% -3%, -4% 6%; }
}

@keyframes meshShift2 {
0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
50% { background-position: -4% 5%, 3% -3%, -2% 4%; }
100% { background-position: 3% -4%, -5% 4%, 5% -3%; }
}

/* Typography */
.headline-korean {
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
font-size: clamp(3rem, 7vw, 6rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-copper);
line-height: 1.1;
margin-bottom: 1.5rem;
}

.headline-korean .letter {
opacity: 0;
display: inline-block;
transition: opacity 0.3s ease;
}

.headline-korean.revealed .letter {
opacity: 1;
}

.subtitle {
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-size: clamp(1rem, 2vw, 1.4rem);
color: var(--text-secondary);
opacity: 0;
transition: opacity 0.8s ease 0.2s;
}

.panel.active .subtitle {
opacity: 1;
}

.panel-headline {
font-family: "Josefin Sans", sans-serif;
font-weight: 600;
font-size: clamp(1.6rem, 3.5vw, 2.8rem);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-copper);
margin-bottom: 1.5rem;
line-height: 1.2;
}

.panel-text {
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.75;
color: var(--text-primary);
margin-bottom: 1.2rem;
max-width: 580px;
}

.panel-text.emphasis {
font-weight: 600;
color: var(--accent-brass);
font-size: 1.05rem;
border-left: 3px solid var(--accent-copper);
padding-left: 1rem;
margin-top: 0.5rem;
}
/* Bubble Zones */
.bubble-zone {
position: absolute;
top: 0;
height: 100%;
width: 35%;
z-index: 1;
overflow: hidden;
pointer-events: none;
}

.bubble-zone-right {
right: 5%;
}

.bubble-zone-left {
left: 5%;
}

/* Data Bubbles */
.data-bubble {
position: absolute;
width: var(--size, 120px);
height: var(--size, 120px);
border-radius: 50%;
border: 1px solid rgba(196, 120, 50, 0.3);
background: radial-gradient(circle at center, rgba(19, 34, 64, 0.6) 0%, rgba(10, 22, 40, 0.2) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: default;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
}

.data-bubble:hover {
transform: scale(1.15) !important;
border-color: rgba(196, 120, 50, 0.8);
}

.bubble-data {
font-family: "Space Mono", monospace;
font-weight: 400;
font-size: 0.85rem;
letter-spacing: 0.03em;
color: var(--accent-brass);
text-align: center;
padding: 0 10px;
}

.bubble-tooltip {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
width: 200px;
font-family: "Nunito Sans", sans-serif;
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
line-height: 1.4;
}

.data-bubble:hover .bubble-tooltip {
opacity: 1;
}

/* Bubble Drift Animation */
.bubble-drift {
animation: bubbleDrift var(--drift-duration, 20s) ease-in-out infinite;
animation-delay: var(--drift-delay, 0s);
bottom: -200px;
left: calc(50% - var(--size, 120px) / 2);
}

@keyframes bubbleDrift {
0% {
  transform: translateY(0) translateX(0);
  opacity: 0;
}
10% {
  opacity: 0.8;
}
80% {
  opacity: 0.8;
}
100% {
  transform: translateY(calc(-100vh - 200px)) translateX(var(--drift-x, 0px));
  opacity: 0;
}
}
/* Confront Shake Animation */
@keyframes confrontShake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.shake {
animation: confrontShake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.shake-border {
box-shadow: inset 0 0 0 2px var(--warning-ember);
transition: box-shadow 0.3s ease;
}

/* Reckoning Panel (Inverted) */
.panel-reckoning {
background: var(--text-primary);
}

.reckoning-headline {
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
font-size: clamp(2.5rem, 6vw, 5rem);
letter-spacing: 0.06em;
color: var(--bg-primary);
margin-bottom: 1rem;
line-height: 1.1;
}

.reckoning-subtitle {
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-size: clamp(1rem, 2vw, 1.4rem);
color: var(--bg-secondary);
opacity: 0;
transition: opacity 1s ease 0.5s;
}

.panel-reckoning.active .reckoning-subtitle {
opacity: 1;
}

.convergence-orb {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(from 0deg, #c47832, #132240, #d4a256, #0a1628, #c47832);
margin: 3rem auto 0;
opacity: 0;
transform: scale(0.3);
transition: opacity 1.2s ease 0.8s, transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s;
animation: orbSpin 20s linear infinite;
box-shadow: 0 0 60px rgba(196, 120, 50, 0.3);
}

.panel-reckoning.active .convergence-orb {
opacity: 1;
transform: scale(1);
}

@keyframes orbSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Navigation Orb */
.nav-orb {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
}

.orb-core {
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 10;
transition: transform 0.3s ease;
box-shadow: 0 0 30px rgba(196, 120, 50, 0.2);
}

.orb-core:hover {
transform: scale(1.1);
}

.orb-gradient {
width: 100%;
height: 100%;
border-radius: 50%;
background: conic-gradient(from 0deg, #c47832, #132240, #d4a256, #0a1628, #c47832);
animation: orbSpin 20s linear infinite;
}

.orb-menu {
position: absolute;
bottom: 0;
right: 0;
width: 56px;
height: 56px;
pointer-events: none;
transition: width 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-orb.expanded .orb-menu {
width: 280px;
height: 280px;
pointer-events: auto;
}

.orb-node {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-secondary);
border: 1px solid rgba(196, 120, 50, 0.5);
color: var(--text-primary);
font-family: "Nunito Sans", sans-serif;
font-size: 0;
cursor: pointer;
opacity: 0;
transform: scale(0);
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}

.nav-orb.expanded .orb-node {
opacity: 1;
transform: scale(1);
width: auto;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}

.nav-orb.expanded .orb-node:nth-child(1) {
bottom: 100%;
right: 80%;
transition-delay: 0ms;
}
.nav-orb.expanded .orb-node:nth-child(2) {
bottom: 85%;
right: 40%;
transition-delay: 80ms;
}
.nav-orb.expanded .orb-node:nth-child(3) {
bottom: 55%;
right: 10%;
transition-delay: 160ms;
}
.nav-orb.expanded .orb-node:nth-child(4) {
bottom: 20%;
right: 0;
transition-delay: 240ms;
}

.orb-node:hover {
background: var(--accent-copper);
border-color: var(--accent-brass);
}
/* Panel Indicators */
.panel-indicators {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 999;
display: flex;
flex-direction: column;
gap: 12px;
}

.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--metallic-steel);
opacity: 0.4;
transition: all 0.3s ease;
cursor: pointer;
}

.indicator.active {
background: var(--accent-copper);
opacity: 1;
box-shadow: 0 0 8px rgba(196, 120, 50, 0.5);
transform: scale(1.3);
}

/* Responsive */
@media (max-width: 768px) {
.panel-content {
  max-width: 85%;
  margin: 0 auto !important;
}

.bubble-zone {
  width: 100%;
  left: 0 !important;
  right: 0 !important;
  opacity: 0.4;
}

.orb-core {
  width: 44px;
  height: 44px;
}

.headline-korean {
  font-size: clamp(2rem, 8vw, 3.5rem);
}

.panel-indicators {
  right: 0.8rem;
}

.nav-orb {
  bottom: 1rem;
  right: 1rem;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
.panel-content {
  max-width: 65%;
}

.content-left {
  margin-left: 10%;
}

.content-right {
  margin-right: 10%;
}
}