/* style.css */

/* ---------- Base ---------- */

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #120b06;
}

body {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
}

button {
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
}

.page {
  display: none;
  position: fixed;
  inset: 0;
  background: #120b06;
}

.page.active {
  display: block;
}


/* ---------- Capm Mac Office ---------- */
/* ---------- Office Motion: Coffee Steam ---------- */

.steam-wrap {
  position: absolute;
  left: 72%;
  top: 30%;
  width: 90px;
  height: 150px;
  pointer-events: none;
  z-index: 20;
}

.steam {
  position: absolute;
  bottom: 0;
  width: 22px;
  height: 150px;
  border-left: 4px solid rgba(255, 245, 215, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: steam-rise 4.5s infinite ease-in-out;
}

.steam-one { left: 18px; animation-delay: 0s; }
.steam-two { left: 38px; animation-delay: 1.2s; }
.steam-three { left: 58px; animation-delay: 2.4s; }

@keyframes steam-rise {
  0% { transform: translateY(40px) scale(0.6) rotate(8deg); opacity: 0; }
  20% { opacity: 0.65; }
  65% { opacity: 0.32; }
  100% { transform: translateY(-85px) scale(1.3) rotate(-12deg); opacity: 0; }
}

.office-stage {
  position: absolute;
  inset: 0;
  background: #120b06;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.office-frame {
  position: relative;
  line-height: 0;
}

.office-base {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  user-select: none;
}

.office-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: visible;
}

.office-hotspots a {
  pointer-events: auto;
}

.office-hit {
  fill: rgba(255, 255, 255, 0);
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

.office-outline {
  fill: none;
  stroke: rgba(255, 220, 120, 0);
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  filter: none;
}

/* Office hotspot rule:
   no visible outline/glow over the artwork. */
.office-hotspots a:hover .office-outline,
.office-hotspots a:focus .office-outline,
.office-hotspots a:focus-visible .office-outline {
  stroke: rgba(255, 220, 120, 0);
  filter: none;
}

.office-hotspots a:focus {
  outline: none;
}

.adventure-board-outline {
  animation: none;
  stroke: rgba(255, 220, 120, 0);
  filter: none;
}


/* ---------- Discovery Juice Ad ---------- */

.ad-page {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(245, 225, 180, 0.10), rgba(18, 11, 6, 0.98)),
    #120b06;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}

.discovery-ad {
  display: block;
  max-width: min(92vw, 980px);
  max-height: calc(100vh - 70px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.62);
  border-radius: 4px;
}


/* ---------- Adventure Board ---------- */

.board-stage {
  position: absolute;
  inset: 0;
  background: #120b06;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}

.board-frame {
  position: relative;
  line-height: 0;
}

.board-image {
  display: block;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  width: auto;
  height: auto;
  box-shadow: 0 18px 65px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.pin {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  z-index: 10;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

/* Adventure Board interaction rule:
   no borders, rings, circles, boxes, or generic UI frames.
   The artwork itself wakes up subtly on hover. */
.pin:hover,
.pin:focus {
  outline: none;
  box-shadow: none;
  filter: saturate(1.18) brightness(1.08) contrast(1.04);
  transform: translateY(-1px);
}

/* Keyboard accessibility: subtle, non-boxy focus cue. */
.pin:focus-visible {
  outline: none;
  box-shadow: none;
  filter:
    saturate(1.2)
    brightness(1.1)
    contrast(1.05)
    drop-shadow(0 0 8px rgba(255, 220, 120, 0.45));
}

.carnival { left: 6%; top: 4%; width: 39%; height: 15%; }
.haunted  { left: 45%; top: 4%; width: 30%; height: 15%; }
.hell     { left: 6%; top: 19%; width: 33%; height: 18%; }
.alien    { left: 78%; top: 10%; width: 18%; height: 34%; }
.ascent   { left: 38%; top: 20%; width: 31%; height: 23%; }
.boli     { left: 6%; top: 42%; width: 36%; height: 18%; }
.mall     { left: 42%; top: 42%; width: 45%; height: 24%; }
.mystery  { left: 5%; top: 61%; width: 32%; height: 31%; }
.pirate   { left: 32%; top: 67%; width: 16%; height: 14%; }
.profit   { left: 43%; top: 67%; width: 45%; height: 25%; }

.small-nav {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  padding: 9px 14px;
  font-size: 15px;
  background: rgba(245, 225, 180, 0.92);
  color: #2a170b;
  border: 2px solid #3b2413;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}


/* ---------- Map Viewer ---------- */

.map-viewport {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: #080604;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 24px 190px 24px;
  box-sizing: border-box;
}

.map-image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 210px);
  object-fit: contain;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.55);
}

.map-image.zoomed {
  max-width: none;
  max-height: none;
}

.map-title {
  display: none;
}

.zoom-controls {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  gap: 6px;
}

.zoom-controls button {
  min-width: 38px;
  height: 34px;
  background: rgba(245, 225, 180, 0.94);
  color: #2a170b;
  border: 1px solid #3b2413;
  border-radius: 6px;
  font-size: 15px;
}


/* ---------- Compass Navigation ---------- */

.compass-nav-image {
  position: fixed;
  right: 54px;
  bottom: 28px;
  z-index: 70;
  width: 170px;
  height: 190px;
}

.compass-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
  pointer-events: none;
  user-select: none;
}

.nav-hit {
  position: absolute;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.nav-hit:focus-visible {
  outline: 2px solid rgba(255, 230, 170, 0.95);
  outline-offset: 2px;
}

.nav-hit.north { top: 6px; left: 66px; }
.nav-hit.east  { top: 76px; right: 0; }
.nav-hit.south { bottom: 6px; left: 66px; }
.nav-hit.west  { top: 76px; left: 0; }

.nav-hit::after {
  content: attr(data-label);
  position: absolute;
  display: none;
  white-space: nowrap;
  background: rgba(245, 225, 180, 0.97);
  color: #2a170b;
  border: 1px solid #3b2413;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.nav-hit:hover::after,
.nav-hit:focus::after {
  display: block;
}

.nav-hit.north::after {
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-hit.south::after {
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-hit.east::after {
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
}

.nav-hit.west::after {
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
}



/* ---------- Company / Contact Page ---------- */

.company-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(620px, calc(100vw - 40px));
  transform: translate(-50%, -50%);
  padding: 30px 34px;
  box-sizing: border-box;
  background: rgba(245, 225, 180, 0.95);
  color: #2a170b;
  border: 3px solid #3b2413;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.58);
  text-align: center;
}

.company-card h1 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.1;
}

.company-tagline {
  margin: 0 0 20px;
  font-style: italic;
  font-size: 17px;
}

.company-card p {
  font-size: 18px;
  line-height: 1.45;
}

.email-link {
  display: inline-block;
  margin: 14px 0 8px;
  padding: 12px 18px;
  background: #2a170b;
  color: #f5e1b4;
  border: 2px solid #3b2413;
  border-radius: 7px;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  z-index: 80;
  cursor: pointer;
}

.email-link:hover,
.email-link:focus {
  background: #3b2413;
  box-shadow:
    0 0 8px rgba(255, 220, 120, 0.55),
    0 0 22px rgba(255, 180, 50, 0.35);
}
.email-address {
  margin: 8px 0 0;
  font-size: 15px;
  opacity: 0.86;
}


/* ---------- Placeholder Page ---------- */

.placeholder-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(540px, calc(100vw - 40px));
  transform: translate(-50%, -50%);
  padding: 28px 30px;
  box-sizing: border-box;
  background: rgba(245, 225, 180, 0.94);
  color: #2a170b;
  border: 3px solid #3b2413;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  text-align: center;
}

.placeholder-card h1 {
  margin: 0 0 12px;
  font-size: 34px;
}

.placeholder-card p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.45;
}

#placeholderBack {
  padding: 10px 16px;
  font-size: 15px;
  background: #2a170b;
  color: #f5e1b4;
  border: 2px solid #3b2413;
  border-radius: 6px;
}


/* Extra protection so company/contact links are clickable */
.company-card {
  z-index: 90;
}

.email-link {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}


/* ---------- Office Motion: Random Shooting Star ---------- */

.window-sky {
  position: absolute;
  left: 39%;
  top: 20%;
  width: 13%;
  height: 18%;
  overflow: hidden;
  pointer-events: none;
  z-index: 21;
}

.shooting-star {
  position: absolute;
  width: var(--star-width, 80px);
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,220,0.95),
    transparent
  );
  opacity: 0;
  transform: translate(var(--star-start-x), var(--star-start-y)) rotate(var(--star-angle));
}

.shooting-star.fly {
  animation: star-pass var(--star-speed, 1.4s) ease-out forwards;
}

@keyframes star-pass {
  0% {
    opacity: 0;
    transform: translate(var(--star-start-x), var(--star-start-y)) rotate(var(--star-angle));
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--star-end-x), var(--star-end-y)) rotate(var(--star-angle));
  }
}
/* ---------- Field Notes Stamp Navigation ---------- */

.field-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border: 2px solid rgba(120, 35, 25, 0.86);
  color: rgba(120, 35, 25, 0.96);
  background: rgba(255, 238, 196, 0.28);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(-0.5deg);
  box-shadow: none;
  transition:
    filter 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.field-stamp:hover,
.field-stamp:focus {
  outline: none;
  filter: saturate(1.18) brightness(1.05);
  background: rgba(255, 238, 196, 0.45);
  transform: rotate(0deg) translateY(-1px);
}

.field-stamp:active {
  transform: rotate(0deg) translateY(1px);
}

.field-stamp:focus-visible {
  outline: 2px dashed rgba(120, 35, 25, 0.55);
  outline-offset: 3px;
}

.field-notes-tabs,
.book-tabs,
.side-tabs {
  display: none;
}




/* ---------- Dandelion Falls / Field Notes ---------- */

.df-stage {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(18, 11, 6, 0.10), rgba(18, 11, 6, 0.25)),
    url("dandelion/backgrounds/dandelion-bg.webp") center center / cover no-repeat,
    #120b06;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}

.df-frame {
  position: relative;
  line-height: 0;
}

.df-map-picture {
  display: block;
}

.df-map {
  display: block;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  width: auto;
  height: auto;
  box-shadow: 0 18px 65px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.df-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  overflow: visible;
}

.df-hotspots a { pointer-events: auto; }

.df-hit {
  fill: rgba(255,255,255,0);
  stroke: none;
  pointer-events: all;
  cursor: zoom-in;
}

.df-secret-house-hit {
  cursor: zoom-in;
}

.df-hotspots a:focus { outline: none; }

.df-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}

.df-modal.active {
  display: block;
}

.df-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(8, 6, 4, 0.58), rgba(8, 6, 4, 0.70)),
    url("dandelion/backgrounds/dandelion-bg.webp") center center / cover no-repeat,
    rgba(8, 6, 4, 0.88);
}

.df-modal-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.df-picture {
  display: block;
  max-width: min(92vw, 980px);
  max-height: calc(100vh - 90px);
}

.df-modal-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 90px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.62);
  border-radius: 4px;
}

.df-close {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 130;
  padding: 9px 14px;
  font-size: 15px;
  background: rgba(245, 225, 180, 0.92);
  color: #2a170b;
  border: 2px solid #3b2413;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
/* ---------- Dandelion Falls: Town Crawl Pass ---------- */

.town-crawl-pass {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 135;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 8px 10px;
  box-sizing: border-box;
  background: rgba(245, 225, 180, 0.94);
  color: #2a170b;
  border: 2px solid #3b2413;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.32);
}

.town-crawl-title {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.town-crawl-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.town-crawl-actions button {
  padding: 7px 10px;
  font-size: 13px;
  background: #2a170b;
  color: #f5e1b4;
  border: 1px solid #3b2413;
  border-radius: 6px;
}

.town-crawl-actions button:hover,
.town-crawl-actions button:focus {
  background: #3b2413;
}

@media (max-width: 760px) {
  .town-crawl-pass {
    flex-direction: column;
    align-items: stretch;
    bottom: 12px;
  }

  .town-crawl-title {
    text-align: center;
  }

  .town-crawl-actions button {
    flex: 1 1 45%;
  }
}

/* ---------- Dandelion Falls: Compass Popup Navigation ---------- */

/* The Town Crawl Pass worked, but the compass keeps navigation consistent
   with the rest of the site. */
.town-crawl-pass {
  display: none;
}

.df-close {
  display: none;
}

.df-compass-nav-image {
  position: fixed;
  right: 42px;
  bottom: 24px;
  z-index: 136;
  width: 150px;
  height: 168px;
}

.df-compass-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
  pointer-events: none;
  user-select: none;
}

.df-nav-hit {
  position: absolute;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.df-nav-hit:focus-visible {
  outline: 2px solid rgba(255, 230, 170, 0.95);
  outline-offset: 2px;
}

.df-nav-hit.north { top: 4px; left: 57px; }
.df-nav-hit.east  { top: 66px; right: 0; }
.df-nav-hit.south { bottom: 4px; left: 57px; }
.df-nav-hit.west  { top: 66px; left: 0; }

.df-nav-hit::after {
  content: attr(data-label);
  position: absolute;
  display: none;
  white-space: nowrap;
  background: rgba(245, 225, 180, 0.97);
  color: #2a170b;
  border: 1px solid #3b2413;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.df-nav-hit:hover::after,
.df-nav-hit:focus::after {
  display: block;
}

.df-nav-hit.north::after {
  bottom: 43px;
  left: 50%;
  transform: translateX(-50%);
}

.df-nav-hit.south::after {
  top: 43px;
  left: 50%;
  transform: translateX(-50%);
}

.df-nav-hit.east::after {
  right: 43px;
  top: 50%;
  transform: translateY(-50%);
}

.df-nav-hit.west::after {
  left: 43px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  .df-compass-nav-image {
    right: 14px;
    bottom: 14px;
    width: 120px;
    height: 135px;
  }

  .df-nav-hit {
    width: 32px;
    height: 32px;
  }

  .df-nav-hit.north { top: 2px; left: 44px; }
  .df-nav-hit.east  { top: 52px; right: 0; }
  .df-nav-hit.south { bottom: 2px; left: 44px; }
  .df-nav-hit.west  { top: 52px; left: 0; }
}


/* ---------- Dandelion Falls: Production Hotspot Rule ---------- */
/* Keep clickable town-map hotspots invisible. */
.df-hotspots a:hover .df-hit,
.df-hotspots a:focus .df-hit,
.df-hotspots a:focus-visible .df-hit,
.df-hotspots a:hover .df-return-hit,
.df-hotspots a:focus .df-return-hit,
.df-hotspots a:focus-visible .df-return-hit {
  fill: rgba(255,255,255,0);
  stroke: none;
  filter: none;
}


/* ---------- Archive Bag Page ---------- */

.archive-bag-stage {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(245, 225, 180, 0.10), rgba(18, 11, 6, 0.98)),
    #120b06;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}

.archive-bag-picture {
  display: block;
  line-height: 0;
}

.archive-bag-image {
  display: block;
  max-width: min(92vw, 980px);
  max-height: calc(100vh - 70px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  user-select: none;
}


/* ---------- Dandelion Falls: Secret Story Entrance ---------- */
/* Invisible hotspot for the old house by the school. The discovery is the point. */
.df-secret-house-hit {
  fill: rgba(255,255,255,0);
  stroke: none;
  pointer-events: all;
}

.df-hotspots a:hover .df-secret-house-hit,
.df-hotspots a:focus .df-secret-house-hit,
.df-hotspots a:focus-visible .df-secret-house-hit {
  fill: rgba(255,255,255,0);
  stroke: none;
  filter: none;
}