/* MAYON RAJAN — ink, haze, and Ra's gold */

:root {
  --gold: #e8b84b;
  --gold-soft: #f2d789;
  --ink: #0a0d14;
  --glass: rgba(10, 13, 20, 0.55);
  --line: rgba(232, 184, 75, 0.35);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e8e4da;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- loading veil -------------------------------------------------------- */

#veil {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at 50% 60%, #141a28 0%, #07090f 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  transition: opacity 1.4s ease, visibility 1.4s;
}
body.loaded #veil { opacity: 0; visibility: hidden; }

.ra-disc {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe9ad, var(--gold) 55%, #b07c1e);
  box-shadow:
    0 0 40px rgba(232, 184, 75, 0.55),
    0 0 120px rgba(232, 184, 75, 0.25);
  animation: ra-breathe 2.6s ease-in-out infinite;
}
@keyframes ra-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(232,184,75,.55), 0 0 120px rgba(232,184,75,.25); }
  50% { transform: scale(1.07); box-shadow: 0 0 60px rgba(232,184,75,.75), 0 0 160px rgba(232,184,75,.35); }
}

.veil-title {
  font-size: 28px; letter-spacing: 0.55em; text-indent: 0.55em;
  color: var(--gold-soft); font-weight: 300;
}
.veil-sub { font-size: 12px; letter-spacing: 0.3em; color: #8a8577; }

/* ---- title --------------------------------------------------------------- */

#title {
  position: fixed; top: max(22px, env(safe-area-inset-top)); left: 30px; z-index: 10;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 1.6s ease 0.6s, transform 1.6s ease 0.6s;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
body.intro-done #title, body.loaded #title { opacity: 1; transform: none; }

#title h1 {
  font-weight: 250; font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.42em; color: #f5efdf; line-height: 1.05;
}
#title h1 span { display: block; color: var(--gold); font-weight: 500; }
#title p {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.28em;
  color: rgba(240, 234, 216, 0.75); text-transform: uppercase;
}

/* ---- intro helpers ------------------------------------------------------- */

#skip {
  position: fixed; right: 26px; top: max(24px, env(safe-area-inset-top)); z-index: 20;
  background: none; border: 1px solid var(--line); color: var(--gold-soft);
  font-size: 12px; letter-spacing: 0.2em; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; transition: opacity 0.6s, background 0.2s;
}
#skip:hover { background: rgba(232, 184, 75, 0.12); }
body.intro-done #skip { opacity: 0; pointer-events: none; }

#hint {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 10; font-size: 11px; letter-spacing: 0.24em; color: rgba(240,234,216,0.55);
  opacity: 0; transition: opacity 1.2s ease;
  pointer-events: none; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
body.intro-done #hint { opacity: 1; animation: hint-fade 6s forwards 5s; }
@keyframes hint-fade { to { opacity: 0; } }

#era-caption {
  position: fixed; left: 50%; top: 15%; transform: translateX(-50%);
  z-index: 10; max-width: min(560px, 86vw); text-align: center;
  font-size: 14px; line-height: 1.6; color: #f0e8d2;
  background: var(--glass); border: 1px solid var(--line);
  padding: 12px 20px; border-radius: 12px; backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.8s ease;
}
#era-caption.show { opacity: 1; }

#inside-caption {
  position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 10;
  max-width: min(520px, 84vw); text-align: center; font-size: 10px; line-height: 1.55;
  letter-spacing: 0.11em; color: #f1d7ad; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
#inside-caption.show { opacity: 1; }

#hazard-panel { position:fixed; left:24px; bottom:94px; z-index:14; width:min(330px,82vw); padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:var(--glass); backdrop-filter:blur(12px); opacity:0; transform:translateY(10px); pointer-events:none; transition:.35s; font-size:11px; line-height:1.5; color:#ddd5c0; }
#hazard-panel.show { opacity:1; transform:none; pointer-events:auto; }
#hazard-panel b,#hazard-panel span,#hazard-panel small { display:block; }
#hazard-panel b { color:#ffd08a; letter-spacing:.12em; font-size:10px; }
#hazard-panel span { margin:5px 0 10px; color:#f0e3c9; }
#hazard-panel small { margin-top:9px; color:#aaa18e; }
.hazard-kind { margin:0 5px 7px 0; }
#hazard-intensity { vertical-align:middle; margin-left:6px; width:135px; }
#hazard-wind { vertical-align:middle; margin-left:6px; width:135px; }
#hazard-readout { margin:8px 0 0; color:#f0dfbd; font-size:11px; }

#story-panel { position:fixed; left:30px; top:50%; z-index:31; width:min(360px,84vw); padding:26px 28px; border:1px solid var(--line); border-radius:16px; background:rgba(10,13,20,.86); backdrop-filter:blur(16px); opacity:0; pointer-events:none; transform:translateY(-46%) translateX(-12px); transition:.45s; }
#story-panel.show { opacity:1; pointer-events:auto; transform:translateY(-50%); }
#story-count { color:var(--gold); font-size:10px; letter-spacing:.2em; margin-bottom:10px; }
#story-panel h2 { color:#f1dfae; font-weight:400; font-size:22px; letter-spacing:.08em; margin-bottom:12px; }
#story-copy { color:#d9d1bf; font-size:14px; line-height:1.7; }
.story-actions { display:flex; gap:8px; margin-top:20px; }
#story-close { position:absolute; right:12px; top:7px; color:#a59d87; background:none; border:0; font-size:25px; cursor:pointer; }

#field-trip-panel { position:fixed; right:30px; top:50%; z-index:31; width:min(390px,84vw); padding:26px 28px; border:1px solid var(--line); border-radius:16px; background:rgba(10,13,20,.9); backdrop-filter:blur(16px); opacity:0; pointer-events:none; transform:translateY(-46%) translateX(12px); transition:.45s; }
#field-trip-panel.show { opacity:1; pointer-events:auto; transform:translateY(-50%); }
.field-trip-kicker { color:var(--gold); font-size:10px; letter-spacing:.19em; margin-bottom:10px; }
#field-trip-panel h2 { color:#f1dfae; font-weight:400; font-size:22px; letter-spacing:.05em; margin-bottom:12px; }
#field-trip-panel p, #field-trip-panel li { color:#d9d1bf; font-size:13px; line-height:1.65; }
#field-trip-panel ol { margin:14px 0 18px 20px; }
#field-trip-panel small { display:block; margin-top:14px; color:#aaa18e; font-size:10px; line-height:1.5; }
#field-trip-close { position:absolute; right:12px; top:7px; color:#a59d87; background:none; border:0; font-size:25px; cursor:pointer; }
.field-trip-download { text-decoration:none; }

/* ---- control bar --------------------------------------------------------- */

#bar {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 15; display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; border-radius: 16px;
  background: var(--glass); border: 1px solid rgba(232, 184, 75, 0.22);
  backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 1s ease 0.4s;
  max-width: 96vw; flex-wrap: wrap; justify-content: center;
}
body.intro-done #bar { opacity: 1; }

.cluster { display: flex; align-items: center; gap: 8px; }
.time-cluster { gap: 10px; }

.ra-mini { color: var(--gold); font-size: 17px; text-shadow: 0 0 10px rgba(232,184,75,.8); }

#time {
  -webkit-appearance: none; appearance: none;
  width: clamp(120px, 18vw, 220px); height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #232c44 0%, #d98a2b 30%, #ffe9ad 50%, #d98a2b 72%, #232c44 100%);
  outline: none; cursor: pointer;
}
#time::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--gold));
  box-shadow: 0 0 12px rgba(232, 184, 75, 0.9); cursor: grab;
}
#time::-moz-range-thumb {
  width: 16px; height: 16px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--gold));
  box-shadow: 0 0 12px rgba(232, 184, 75, 0.9); cursor: grab;
}
#time-label {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--gold-soft);
  letter-spacing: 0.1em; min-width: 42px;
}

.chip {
  background: none; border: 1px solid rgba(232, 184, 75, 0.28);
  color: #ddd5c0; font-size: 12px; letter-spacing: 0.08em;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s ease;
}
.chip:hover { border-color: var(--gold); color: var(--gold-soft); }
.chip.on {
  background: rgba(232, 184, 75, 0.16); border-color: var(--gold);
  color: var(--gold-soft); box-shadow: 0 0 14px rgba(232, 184, 75, 0.25);
}
#bar a.chip { text-decoration:none; }
body.embed-mode #title, body.embed-mode #skip, body.embed-mode #hint, body.embed-mode #credits { display:none; }
body.embed-mode #bar { transform:translateX(-50%) scale(.9); transform-origin:bottom center; }

/* ---- photo compare ------------------------------------------------------- */

#photo-panel {
  position: fixed; right: 24px; bottom: 96px; z-index: 14;
  width: min(380px, 82vw);
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#photo-panel.show { opacity: 1; transform: none; pointer-events: auto; }
#photo-panel img { width: 100%; display: block; }
#photo-panel p { font-size: 12px; line-height: 1.55; padding: 10px 14px; color: #cfc8b4; }

/* ---- about --------------------------------------------------------------- */

#about-panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.98);
  z-index: 30; width: min(560px, 90vw); max-height: 80vh; overflow-y: auto;
  background: rgba(10, 13, 20, 0.88); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 38px; backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#about-panel.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

#about-panel h2 {
  font-weight: 300; letter-spacing: 0.4em; color: var(--gold);
  font-size: 20px; margin-bottom: 16px;
}
#about-panel .lede { font-size: 14px; line-height: 1.7; color: #efe8d4; margin-bottom: 18px; }
#about-panel ul { list-style: none; }
#about-panel li {
  font-size: 13px; line-height: 1.65; color: #cfc8b4;
  padding: 9px 0 9px 22px; position: relative;
  border-top: 1px solid rgba(232, 184, 75, 0.12);
}
#about-panel li::before {
  content: '△'; position: absolute; left: 0; color: var(--gold); font-size: 11px; top: 12px;
}
#about-panel b { color: #f0e6c8; }
#about-panel .foot { margin-top: 18px; font-size: 11px; color: #857f6d; letter-spacing: 0.05em; }

#about-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #a59d87; font-size: 26px; cursor: pointer;
}
#about-close:hover { color: var(--gold); }

/* ---- credits ------------------------------------------------------------- */

#credits {
  position: fixed; right: 10px; bottom: 4px; z-index: 9;
  font-size: 9px; letter-spacing: 0.04em; color: rgba(240, 234, 216, 0.4);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ---- small screens ------------------------------------------------------- */

@media (max-width: 720px) {
  #title { left: 18px; }
  #bar { gap: 10px; padding: 8px 12px; border-radius: 14px; }
  #hint { bottom: 132px; font-size: 10px; }
  .chip { padding: 6px 11px; font-size: 11px; }
}