/* ============================================
   CRYPTIQUES VINTAGE — Haunted Mansion Site
   Vintage Halloween palette
   ============================================ */

:root {
  --night: #1a1026;          /* deepest purple-black */
  --night-2: #2a1a3e;        /* deep purple */
  --purple: #4a2a6a;         /* mid purple */
  --purple-bright: #7b4fa6;  /* bright violet */
  --orange: #f28c28;         /* JOL orange */
  --orange-deep: #d96a12;    /* burnt pumpkin */
  --green: #8fd14f;          /* poison green */
  --green-dim: #5a8a3a;      /* mossy green */
  --cream: #f2e8c9;          /* aged paper */
  --cream-dim: #cfc3a0;
  --ink: #14101c;            /* near black */
  --glow: #ffce6b;           /* window glow */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--cream);
  font-family: "IM Fell English", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--orange); }

h1, h2, h3, .display {
  font-family: "Rye", "IM Fell English SC", serif;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.label {
  font-family: "Special Elite", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ---------- Page fade transitions ---------- */
body { animation: pageIn 0.9s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.leaving { opacity: 0; transition: opacity 0.6s ease; }

/* ============================================
   HOME — Mansion exterior
   ============================================ */

.scene-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* track mobile browser chrome as it shows/hides */
  overflow: hidden;
  background: var(--night);
}

.scene-wrap svg.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.site-title {
  position: absolute;
  top: 4vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.site-title h1 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  color: var(--cream);
  text-shadow:
    0 0 18px rgba(143, 209, 79, 0.35),
    3px 3px 0 var(--ink);
}

.site-title h1 .accent { color: var(--orange); }

.site-title .tagline {
  margin-top: 0.4rem;
  color: var(--green);
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  text-shadow: 2px 2px 0 var(--ink);
}

.enter-hint {
  position: absolute;
  bottom: 5vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  color: var(--cream-dim);
  font-size: 0.85rem;
  animation: hintPulse 2.6s ease-in-out infinite;
  text-shadow: 2px 2px 0 var(--ink);
}
@keyframes hintPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.mansion-link { cursor: pointer; }
.mansion-link:focus { outline: none; }
.mansion-link:focus .door-glow, .mansion-link:hover .door-glow { opacity: 1; }

/* window flicker */
.win { animation: flicker 6s ease-in-out infinite; }
.win:nth-child(2n) { animation-delay: 1.3s; animation-duration: 7.5s; }
.win:nth-child(3n) { animation-delay: 2.8s; animation-duration: 5.2s; }
.win:nth-child(5n) { animation-delay: 4.1s; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 1; }
  45% { opacity: 0.55; }
  48% { opacity: 1; }
  71% { opacity: 0.85; }
  74% { opacity: 1; }
}

.door-glow { opacity: 0.5; transition: opacity 0.5s ease; }

/* bats drift across the sky */
.bat { animation: batfly 18s linear infinite; }
.bat.b2 { animation-duration: 24s; animation-delay: -8s; }
.bat.b3 { animation-duration: 15s; animation-delay: -4s; }
.bat.b4 { animation-duration: 28s; animation-delay: -15s; }
@keyframes batfly {
  from { transform: translate(-8%, 0); }
  25%  { transform: translate(22%, -3%); }
  50%  { transform: translate(52%, 1%); }
  75%  { transform: translate(80%, -4%); }
  to   { transform: translate(112%, -1%); }
}

/* fog drift */
.fog { animation: fogdrift 26s ease-in-out infinite alternate; }
.fog.f2 { animation-duration: 34s; animation-delay: -12s; }
@keyframes fogdrift {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}

/* moon halo breathing */
.moon-halo { animation: moonbreathe 9s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes moonbreathe { from { opacity: 0.5; } to { opacity: 0.9; } }

/* ============================================
   INTERIOR PAGES
   ============================================ */

/* cinematic overlay: vignette + film grain (matches the exterior) */
body.textured::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(ellipse at 50% 32%, transparent 52%, rgba(5, 3, 12, 0.5) 100%);
}

body.textured::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 61;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.basement.textured::before {
  background: radial-gradient(ellipse at 50% 32%, transparent 45%, rgba(2, 6, 3, 0.62) 100%);
}

.interior {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* --- floor navigation (elevator panel style) --- */
.floor-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(var(--night) 82%, transparent);
  padding: 1rem 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.floor-nav a {
  font-family: "Special Elite", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  border: 1px solid var(--purple);
  background: var(--night-2);
  padding: 0.5rem 0.95rem;
  border-radius: 3px;
  transition: all 0.25s ease;
  box-shadow: 0 3px 0 var(--ink);
}

.floor-nav a:hover {
  color: var(--night);
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-2px);
}

.floor-nav a.current {
  color: var(--night);
  background: var(--green);
  border-color: var(--green);
  cursor: default;
}

.floor-nav a.exit { border-color: var(--orange-deep); color: var(--orange); }
.floor-nav a.exit:hover { background: var(--orange-deep); color: var(--cream); }

/* --- room banner --- */
.room-banner {
  position: relative;
  border: 3px solid var(--purple);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2.2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  background: var(--night-2);
}

.room-banner svg { display: block; width: 100%; height: auto; }

.room-heading {
  text-align: center;
  margin: 2.4rem 0 0.6rem;
}

.room-heading .floor-label {
  color: var(--green);
  display: block;
  margin-bottom: 0.5rem;
}

.room-heading h1 {
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--ink), 0 0 24px rgba(242, 140, 40, 0.25);
}

.room-heading .room-desc {
  max-width: 620px;
  margin: 0.9rem auto 2rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* --- ornate divider --- */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.8rem;
  color: var(--purple-bright);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple));
}
.divider::after { background: linear-gradient(90deg, var(--purple), transparent); }

/* --- product grid --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
}

.product-card {
  background: linear-gradient(180deg, var(--night-2), #241533);
  border: 1px solid var(--purple);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 0 1px var(--orange);
}

.product-art {
  background: radial-gradient(circle at 50% 42%, #3a2455 0%, var(--night-2) 78%);
  border-bottom: 1px solid var(--purple);
  padding: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-art svg { width: 100%; max-width: 150px; height: auto; }

/* photo cards (live Etsy listings) */
a.product-card { text-decoration: none; color: inherit; }
.product-art.photo { padding: 0; }
.product-art.photo img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.latest-title {
  text-align: center;
  color: var(--orange);
  font-size: 0.85rem;
  margin: 0 0 1.4rem;
  text-shadow: 2px 2px 0 var(--ink);
}
.etsy-card .btn { pointer-events: none; }

.product-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.product-body h3 {
  font-family: "IM Fell English SC", serif;
  font-size: 1.05rem;
  color: var(--cream);
  line-height: 1.3;
}

.product-body .price {
  color: var(--green);
  font-family: "Special Elite", monospace;
  font-size: 0.85rem;
}

.product-body .blurb {
  font-size: 0.88rem;
  color: var(--cream-dim);
  font-style: italic;
  flex: 1;
}

.btn {
  display: inline-block;
  margin-top: 0.6rem;
  text-align: center;
  text-decoration: none;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--orange);
  border: none;
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 3px 0 var(--orange-deep);
  transition: all 0.2s ease;
}

.btn:hover { background: var(--glow); transform: translateY(-1px); box-shadow: 0 4px 0 var(--orange-deep); }

.btn.ghost {
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--orange); color: var(--night); }

/* --- shop-all banner --- */
.shop-all {
  margin-top: 3rem;
  text-align: center;
  border: 1px dashed var(--purple-bright);
  border-radius: 6px;
  padding: 2rem 1.5rem;
  background: rgba(74, 42, 106, 0.15);
}
.shop-all p { color: var(--cream-dim); margin-bottom: 1rem; font-style: italic; }

/* --- footer --- */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  color: var(--cream-dim);
  font-size: 0.8rem;
  border-top: 1px solid var(--night-2);
  margin-top: 2rem;
}
.site-footer .label { color: var(--purple-bright); }

/* ============================================
   BASEMENT overrides — colder, danker
   ============================================ */

body.basement {
  background: #0d1410;
  --night-2: #16211a;
  --purple: #2d4436;
  --purple-bright: #4c7257;
}

body.basement .room-heading h1 {
  color: #cfe3c2;
  text-shadow: 3px 3px 0 #000, 0 0 26px rgba(143, 209, 79, 0.3);
}

body.basement .product-card { background: linear-gradient(180deg, #16211a, #101a14); }
body.basement .product-art { background: radial-gradient(circle at 50% 42%, #22352a 0%, #16211a 78%); }
body.basement .floor-nav { background: linear-gradient(#0d1410 82%, transparent); }

.warning-tape {
  text-align: center;
  margin: 0 0 1.6rem;
}
.warning-tape span {
  display: inline-block;
  font-family: "Special Elite", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: repeating-linear-gradient(45deg, var(--green), var(--green) 14px, #6ea63a 14px, #6ea63a 28px);
  padding: 0.45rem 1.4rem;
  transform: rotate(-1.6deg);
  border-radius: 2px;
}

/* candle flicker for basement banner */
.candle-flame { animation: candleflick 1.8s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }
.candle-flame.c2 { animation-delay: 0.6s; animation-duration: 2.3s; }
@keyframes candleflick {
  0%, 100% { transform: scaleY(1) skewX(0deg); opacity: 1; }
  30% { transform: scaleY(0.88) skewX(3deg); opacity: 0.85; }
  55% { transform: scaleY(1.06) skewX(-2deg); }
  75% { transform: scaleY(0.94) skewX(2deg); opacity: 0.9; }
}

/* chandelier sway for foyer */
.chandelier { animation: sway 7s ease-in-out infinite alternate; transform-origin: top center; transform-box: fill-box; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* ============================================
   HOME — door-entry zoom sequence
   ============================================ */

.zoom-layer {
  position: absolute;
  inset: 0;
  transition: transform 1.7s cubic-bezier(0.6, 0.02, 0.9, 0.4);
  transform-origin: 50% 66%;
  will-change: transform;
}

.scene-wrap.zooming .zoom-layer { transform: scale(16); }

.door-leaf {
  transition: transform 0.8s ease-in 0.2s;
  transform-box: fill-box;
}
.door-l { transform-origin: left center; }
.door-r { transform-origin: right center; }
.scene-wrap.zooming .door-l { transform: scaleX(0.1) skewY(7deg); }
.scene-wrap.zooming .door-r { transform: scaleX(0.1) skewY(-7deg); }

.door-inner { opacity: 0; transition: opacity 0.7s ease 0.25s; }
.scene-wrap.zooming .door-inner { opacity: 1; }

.enter-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 62%, #f7e9c8 0%, #e8c98f 55%, #6b4a1e 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease 1.05s;
  z-index: 9;
}
.scene-wrap.zooming .enter-flash { opacity: 1; }

.scene-wrap.zooming .enter-hint, .scene-wrap.zooming .site-title {
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: none;
}

/* slow cloud drift */
.cloud-drift { animation: clouddrift 60s ease-in-out infinite alternate; }
.cloud-drift.c2 { animation-duration: 80s; animation-delay: -30s; }
@keyframes clouddrift {
  from { transform: translateX(-1.5%); }
  to   { transform: translateX(1.5%); }
}

/* lantern sway */
.lantern { animation: lanternsway 5s ease-in-out infinite alternate; transform-origin: top center; transform-box: fill-box; }
.lantern.l2 { animation-delay: -2.4s; animation-duration: 6s; }
@keyframes lanternsway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* ---------- responsive ---------- */
/* (portrait framing of the exterior scene is handled by fitScene() in
   index.html, which swaps the SVG viewBox for a door-centered crop) */
@media (max-width: 640px) {
  .site-title { top: 3vh; }
  .enter-hint {
    font-size: 0.75rem;
    padding: 0 1.2rem;
    bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
  }

  .floor-nav { gap: 0.45rem; padding: 0.7rem 0.5rem 1rem; }
  .floor-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* comfortable tap target */
    padding: 0.4rem 0.85rem;
  }
  .floor-nav .nav-floor { display: none; } /* “Second Floor ·” → just the category */

  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
  .product-body h3 { font-size: 0.95rem; }
  .interior { padding: 0 1rem 3rem; }
}

/* short landscape screens (phone on its side): keep the scene clear */
@media (max-height: 480px) and (orientation: landscape) {
  .site-title { top: 2vh; }
  .site-title h1 { font-size: 1.7rem; }
  .site-title .tagline { display: none; }
  .enter-hint { font-size: 0.7rem; bottom: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bat, .fog, .win, .moon-halo, .chandelier, .candle-flame, .enter-hint,
  .cloud-drift, .lantern { animation: none !important; }
  .zoom-layer, .door-leaf, .door-inner, .enter-flash { transition: none !important; }
  .scene-wrap.zooming .zoom-layer { transform: none; }
}