/* ============================================
   Oxygen Forest — Design Tokens
   Maroon:      #7D1418  (brand primary / box bg)
   Maroon deep: #5A0F12  (shadow / hover)
   Blush:       #F1BCAC  (petal accent)
   White:       #FFFFFF  (page bg / text on maroon)
   ============================================ */

/* self-hosted fonts — no external CDN call, so the page never breaks or
   flashes unstyled if that CDN is slow/unreachable */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/sacramento-latin-400-normal.woff2') format('woff2');
}

:root {
  --maroon: #7D1418;
  --maroon-deep: #5A0F12;
  --blush: #F1BCAC;
  --white: #FFFFFF;

  --font-display: 'Cormorant Garamond', serif;
  --font-script: 'Sacramento', cursive;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: var(--white);
  font-family: var(--font-display);
}

/* ============================================
   INTRO STAGE
   ============================================ */

#intro-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 1rem;
  z-index: 100;
  overflow: hidden;
}

#intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#intro-box {
  position: relative;
  z-index: 10;
  background: var(--maroon);
  width: min(420px, 88vw, 78vh);
  aspect-ratio: 1 / 1;
  padding: min(3rem, 4vh) min(2.5rem, 4vw);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 40px 80px -20px rgba(30, 8, 10, 0.45);
  transform: translateY(-140vh);
  opacity: 0;
  container-type: inline-size;
}

#intro-icon {
  width: clamp(110px, 20vh, 175px);
  height: auto;
  margin-bottom: 1.2rem;
  transform-origin: center;
}

#intro-wordmark {
  color: var(--white);
  /* sized off the box's own rendered width (cqw), not the viewport — this
     is what keeps "OXYGEN FOREST" from ever running past the maroon
     card's edges, no matter how tall/narrow the phone screen is */
  font-size: clamp(1.25rem, 9.2cqw, 3.3rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  min-height: 1.3em;
  white-space: nowrap;
}

#intro-tagline {
  font-family: var(--font-script);
  color: var(--blush);
  font-size: clamp(1.5rem, 10cqw, 2.7rem);
  margin-top: 0.6rem;
  opacity: 0;
  transform: translateY(10px);
}

#enter-btn {
  margin-top: 2rem;
  background: var(--maroon);
  border: 1.5px solid var(--maroon);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: 0 10px 28px -8px rgba(125, 20, 24, 0.55);
  transition: background 0.3s ease, color 0.3s ease;
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #enter-btn {
    font-size: 0.8rem;
    padding: 0.75rem 1.4rem;
    white-space: normal;
  }
}

#enter-btn svg {
  transition: transform 0.3s ease;
}

#enter-btn:hover {
  background: var(--maroon-deep);
  border-color: var(--maroon-deep);
}

#enter-btn:hover svg {
  transform: translateX(4px);
}


/* ============================================
   MAP STAGE
   ============================================ */

/* ============================================
   INTRO VIDEO — globe-to-site flythrough, plays once after Enter
   ============================================ */

#intro-video-stage {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000 url(../assets/images/video-backdrop.jpg?v=3) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* source is portrait (9:16) — on phones (portrait viewports) it fills the
   entire screen edge-to-edge, since the aspect ratios naturally match. On
   wider/desktop viewports it's centered at full height with a soft vignette
   so it reads as an intentional cinematic clip rather than a stretched crop. */
#intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 10vw 2vw rgba(0, 0, 0, 0.92);
}

@media (min-width: 700px) {
  #intro-video {
    width: auto;
    height: 100%;
    max-width: 100vw;
    object-fit: contain;
  }
}

/* ============================================
   MAP STAGE
   ============================================ */

#map-stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #1c2b1a; /* deep forest green fallback, never maroon */
}

/* blurred, darkened duplicate of the map fills the whole stage behind the
   sharp contained image — any letterbox gap reads as "more forest blurred
   into the distance" instead of a flat colored bar */
#map-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#map-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  transform: scale(1.18);
  z-index: 1;
}

/* ============================================
   CLOUD OVERLAY — real fractal cloud photography, drifting + fading
   ============================================ */

#cloud-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}

.cloud-layer {
  position: absolute;
  inset: -25%;
  background-image: url(../assets/images/clouds-overlay.png);
  background-repeat: repeat;
}

.cloud-layer-1 {
  background-size: 900px 900px;
  opacity: 0.92;
  animation: cloud-drift-1 55s linear infinite;
}

.cloud-layer-2 {
  background-size: 1300px 1300px;
  opacity: 0.7;
  animation: cloud-drift-2 80s linear infinite reverse;
}

@keyframes cloud-drift-1 {
  from { background-position: 0 0; }
  to   { background-position: 1800px 500px; }
}

@keyframes cloud-drift-2 {
  from { background-position: 0 0; }
  to   { background-position: -1500px 700px; }
}

/* ============================================
   HOTSPOT MARKERS — dynamically sized/positioned in JS to exactly match
   the rendered image content box (handles object-fit:contain letterboxing)
   ============================================ */

/* ============================================
   MAP BRAND MARK — small persistent logo, bottom-right of the map
   ============================================ */

#map-brand {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

#map-brand img:first-child {
  width: clamp(28px, 5vw, 44px);
  height: auto;
}

#map-brand img:last-child {
  width: clamp(70px, 12vw, 110px);
  height: auto;
}

#hotspots {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

#hotspots.visible {
  pointer-events: auto;
}

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.hotspot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(241, 188, 172, 0.55);
  animation: hotspot-pulse 2.2s ease-out infinite;
}

.hotspot-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--maroon);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@keyframes hotspot-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70%, 100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.hotspot:hover .hotspot-dot {
  background: var(--blush);
}

/* point name — a real DOM element, always visible, in a fixed exact
   direction from its own dot per direct instruction: no automatic/smart
   repositioning, no conditional hiding. Each point gets one of the
   .hotspot-label-dir-* classes below specifying exactly which side it
   sits on. */
.hotspot-label {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(122, 15, 25, 0.88);
  color: var(--white);
  font-family: var(--font-script);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.14rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  opacity: 0.88;
  pointer-events: none;
  transition: font-size 0.2s ease, padding 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  z-index: 10;
}

/* straight above the dot */
.hotspot-label-dir-above {
  transform: translate(-50%, calc(-100% - 20px));
}

/* straight above the dot, but closer in — used where "above"'s usual gap
   reads as floating too far away from its own dot */
.hotspot-label-dir-above-near {
  transform: translate(-50%, calc(-100% - 10px));
}

/* straight above the dot, pulled in even tighter — Horse Riding specifically */
.hotspot-label-dir-above-nearer {
  transform: translate(-50%, calc(-100% - 4px));
}

/* straight below the dot */
.hotspot-label-dir-below {
  transform: translate(-50%, 32px);
}

/* directly to the left of the dot */
.hotspot-label-dir-left {
  transform: translate(calc(-100% - 20px), -50%);
}

/* directly to the left of the dot, but closer in — used where "left"'s
   usual gap reads as floating too far away from its own dot (or, for
   Sundowner Spot, was drifting far enough left to overlap the fixed
   Aranya launcher button in the corner) */
.hotspot-label-dir-left-near {
  transform: translate(calc(-100% - 10px), -50%);
}

/* directly to the left of the dot, pulled in even tighter — Sundowner
   Spot specifically */
.hotspot-label-dir-left-nearer {
  transform: translate(calc(-100% - 4px), -50%);
}

/* directly to the right of the dot */
.hotspot-label-dir-right {
  transform: translate(32px, -50%);
}

/* diagonally up and to the right of the dot */
.hotspot-label-dir-above-right {
  transform: translate(16px, calc(-100% - 16px));
}

/* diagonally up and to the right of the dot, pulled in closer — Model
   Unit specifically, was reading as closer to Horse Riding than itself */
.hotspot-label-dir-above-right-near {
  transform: translate(8px, calc(-100% - 6px));
}

/* diagonally down and to the right of the dot */
.hotspot-label-dir-below-right {
  transform: translate(26px, 26px);
}

.hotspot:hover .hotspot-label,
.hotspot:active .hotspot-label,
.hotspot:focus-visible .hotspot-label {
  font-size: 1.3rem;
  padding: 0.4rem 1rem;
  background: var(--maroon);
  opacity: 1;
}

/* labels read a touch large on phone screens with markers this close
   together — scale both the resting caption and the enlarged tap state
   down a step so neighboring points stay legible instead of colliding */
@media (max-width: 700px) {
  .hotspot-label {
    font-size: 0.58rem;
    padding: 0.1rem 0.42rem;
  }

  .hotspot:hover .hotspot-label,
  .hotspot:active .hotspot-label,
  .hotspot:focus-visible .hotspot-label {
    font-size: 1rem;
    padding: 0.32rem 0.8rem;
  }
}

/* ============================================
   HOTSPOT VIEWER — fullscreen video or image-placeholder shown on click
   ============================================ */

#hotspot-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

#hotspot-viewer.active {
  pointer-events: auto;
}

#hotspot-video,
#hotspot-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#hotspot-viewer-label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: 4.5rem;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4vw, 2rem);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#hotspot-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

#hotspot-close:hover {
  background: rgba(0, 0, 0, 0.6);
}

#hotspot-replay {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease, transform 0.3s ease;
}

#hotspot-replay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#hotspot-replay:hover {
  background: rgba(0, 0, 0, 0.75);
}

#hotspot-replay svg {
  fill: var(--white);
}

/* ============================================
   ARANYA CHATBOT
   ============================================ */

:root {
  --forest-green: #3f6b46;
  --forest-green-dark: #2c4d31;
  --bark-brown: #6b4a2f;
}

#aranya-widget {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  font-family: var(--font-display);
}

#aranya-widget.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- launcher (closed state) ---------- */

#aranya-launcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#aranya-toggle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--blush);
  background: radial-gradient(circle at 35% 30%, #8f1d21, var(--maroon-deep));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(241, 188, 172, 0.15);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#aranya-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(241, 188, 172, 0.22);
}

#aranya-launcher-label {
  background: var(--maroon);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* ---------- tree logo mascot ---------- */

.aranya-face {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aranya-face img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform-origin: center 65%;
  animation: aranya-sway 4.5s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.aranya-face-small img {
  width: 100%;
  height: 100%;
}

@keyframes aranya-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* ---------- chat panel ---------- */

#aranya-panel {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: min(340px, 88vw);
  height: min(440px, 62vh);
  background: #fdfbf7;
  border-radius: 20px;
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transform-origin: bottom left;
}

#aranya-header {
  background: var(--maroon);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  flex-shrink: 0;
}

.aranya-face-small {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

#aranya-header-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  flex: 1;
}

#aranya-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

#aranya-close:hover {
  opacity: 1;
}

#aranya-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scroll-behavior: smooth;
}

.aranya-bubble {
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  font-family: var(--font-script);
  font-size: 1.25rem;
  line-height: 1.35;
  white-space: pre-line;
}

.aranya-bubble-bot {
  background: #f1e9df;
  color: #3a2f28;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.aranya-bubble-user {
  background: var(--maroon);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.aranya-typing {
  align-self: flex-start;
  background: #f1e9df;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 0.7rem 1rem;
  display: flex;
  gap: 5px;
}

.aranya-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a7a6c;
  animation: aranya-bounce 1.1s ease-in-out infinite;
}

.aranya-typing span:nth-child(2) { animation-delay: 0.15s; }
.aranya-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes aranya-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.aranya-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-self: stretch;
  transition: opacity 0.25s ease;
}

/* once the user has moved on to a new message, the row of buttons they
   already answered from stays visible for context but is dimmed and
   inert — matches how real chat/WhatsApp bots present history */
.aranya-buttons-spent {
  opacity: 0.5;
  pointer-events: none;
}

.aranya-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border: 1.3px solid var(--maroon);
  color: var(--maroon);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.aranya-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.aranya-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--maroon);
  stroke: var(--maroon);
  stroke-width: 1.4;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.aranya-btn:hover .aranya-icon svg {
  fill: var(--white);
  stroke: var(--white);
}

.aranya-btn:hover {
  background: var(--maroon);
  color: var(--white);
}

.aranya-btn-back {
  border-style: dashed;
  opacity: 0.85;
}

@media (max-width: 480px) {
  #aranya-panel {
    width: 92vw;
    height: 68vh;
    left: -8px;
  }
}

/* ============================================
   ROTATE HINT
   ============================================ */
#rotate-hint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--maroon);
  color: var(--white);
  padding: 0.7rem 1rem;
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-110%);
  transition: transform 0.4s ease;
}

#rotate-hint.visible {
  transform: translateY(0);
}

#rotate-hint svg {
  flex-shrink: 0;
  animation: rotate-hint-nudge 1.6s ease-in-out infinite;
}

@keyframes rotate-hint-nudge {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

#rotate-hint span {
  flex: 1;
  line-height: 1.3;
}

#rotate-hint-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}

/* only relevant on touch/phone-sized viewports */
@media (min-width: 700px) {
  #rotate-hint {
    display: none !important;
  }
}