/* ==========================================================================
   LILY PAD WORKSHOP — styles.css
   
   Architecture:
   
   Layer 0 (z:1):   The workshop background — Ted's room at night,
                     fixed to viewport, permanent for the life of the visit.
   
   Layer 1 (z:5):   The file cabinet — overlaid on the left side,
                     standing in the workshop's shadow.
   
   Layer 2 (z:10):  The page content — title, lede, chevron.
                     Appears gently over the workshop.
   
   Layer 3 (z:20):  The discovery layer — clickable hotspots and
                     formation cards over workshop objects.
   
   Layer 4 (z:1000): The door — entry gesture overlay.
   ========================================================================== */


/* 1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  --color-ink: #2a1f14;
  --color-umber: #5c3a1e;
  --color-ochre: #b48a4a;
  --color-amber: #d89f5a;
  --color-honey: #e8b66a;
  --color-cream: #f4e9d3;
  --color-dust: #d8cdb8;
  --color-warm-black: #0a0605;
  --color-door-light: #e8c477;

  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-composition: Georgia, 'Times New Roman', serif;

  --ease-breath: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-settle: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}


/* 2. BASE RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-cream);
  background-color: var(--color-warm-black);
  overflow-x: hidden;
  overflow-y: hidden;
}

body.threshold-complete {
  overflow-y: auto;
}


/* 3. THE DOOR
   --------------------------------------------------------------------------
   The painted entrance — a cedar Dutch door with the top half open,
   warm light spilling out, stone walls, metal-stamped sign.
   Click to enter. The image fades and you're in the workshop.
   -------------------------------------------------------------------------- */
.door {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #050302;
  cursor: pointer;
  transition: opacity 2s var(--ease-breath);
}

.door.opening {
  cursor: default;
}

.door.departed {
  opacity: 0;
  pointer-events: none;
}

/* The door painting — fills the viewport, centered. */
.door-image {
  max-width: 100vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0.9);
  transition: filter 0.8s var(--ease-breath);
}

.door.opening .door-image {
  filter: brightness(1.2);
}

/* "Step inside." — breathing text below the door painting. */
.door-instruction {
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-dust);
  letter-spacing: 0.04em;
  animation: instruction-breathing 3.5s ease-in-out infinite;
}

.door.opening .door-instruction {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@keyframes instruction-breathing {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.75; }
}

/* Skip button — for return visitors. */
.door-skip {
  position: absolute;
  bottom: 3vh;
  right: 4vw;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  color: var(--color-dust);
  opacity: 0.5;
  cursor: pointer;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  transition: opacity 0.3s ease;
}

.door-skip:hover {
  opacity: 0.85;
}

.door.opening .door-skip {
  opacity: 0;
  pointer-events: none;
}


/* 4. THE WORKSHOP BACKGROUND
   --------------------------------------------------------------------------
   Ted's room at night. Fixed to the viewport. The image uses
   object-fit: cover to fill the viewport, same as background-size: cover.
   Starts dim and warms to full brightness during the threshold.
   -------------------------------------------------------------------------- */
.workshop-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.workshop-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;

  /* Starts dim — the room before your eyes adjust. */
  filter: brightness(0.15) saturate(0.5);
  transition: filter 4s var(--ease-breath);
}

.workshop-bg.warmed .workshop-image {
  filter: brightness(0.85) saturate(1.05);
}


/* 5. THE PAGE CONTENT
   --------------------------------------------------------------------------
   Title and lede positioned over the workshop. Not sliding — just
   fading into visibility like words noticed on a wall.
   -------------------------------------------------------------------------- */
.page-content {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s var(--ease-breath);
}

.page-content.visible {
  opacity: 1;
}

body.threshold-complete .page-content {
  /* Keep pointer-events: none on the container so clicks pass
     through to the cabinet (z:5) and discovery layer (z:20).
     Only the text elements themselves are non-interactive anyway. */
  pointer-events: none;
}

/* The title block — centered in the viewport,
   positioned to sit in the darker upper portion of the workshop. */
.hero-inner {
  text-align: center;
  padding: 2rem 3rem;
  position: relative;
  margin-top: -12vh;
}

/* Atmospheric wash behind the title text. 
   A soft darkening so the light text reads against any background. */
.hero-inner::before {
  content: '';
  position: absolute;
  inset: -2rem;
  z-index: -1;
  background: radial-gradient(
    ellipse 75% 70% at center,
    rgba(10, 6, 5, 0.50) 0%,
    rgba(10, 6, 5, 0.30) 50%,
    transparent 85%
  );
  filter: blur(10px);
  pointer-events: none;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--color-cream);
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.6),
    0 3px 24px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--color-dust);
  letter-spacing: 0.1em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.5);
}

/* The lede line — positioned below the title. */
.workshop-lede {
  font-family: var(--font-composition);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-style: italic;
  color: var(--color-dust);
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-align: center;
  max-width: 36rem;
  margin-top: 2rem;
  padding: 0 2rem;
  opacity: 0.85;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.5);
}


/* 6. THE FILE CABINET IMAGE
   --------------------------------------------------------------------------
   The painterly cabinet image, positioned on the left side of the
   workshop. Clickable — opens the cabinet menu overlay.
   -------------------------------------------------------------------------- */
.file-cabinet {
  position: fixed;
  left: 2vw;
  bottom: 4vh;
  z-index: 15;
  cursor: pointer;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 2.5s var(--ease-breath),
              transform 2.5s var(--ease-breath);
  pointer-events: none;
}

body.threshold-complete .file-cabinet {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cabinet-image {
  display: block;
  height: min(55vh, 420px);
  width: auto;
  filter: drop-shadow(4px 6px 16px rgba(0, 0, 0, 0.5));
  transition: filter 0.3s ease, transform 0.2s ease;
}

.file-cabinet:hover .cabinet-image {
  filter: drop-shadow(4px 6px 20px rgba(0, 0, 0, 0.6))
          brightness(1.08);
  transform: scale(1.01);
}


/* 7. THE DISCOVERY LAYER
   -------------------------------------------------------------------------- */
.discovery-layer {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 1;
}


/* 8. FOOTER ATTRIBUTION
   --------------------------------------------------------------------------
   Copyright on the left, radio credits on the right. Both near the bottom.
   -------------------------------------------------------------------------- */
.footer-left,
.footer-right {
  position: fixed;
  bottom: 1vh;
  z-index: 10;
  opacity: 0;
  transition: opacity 2s var(--ease-breath);
  pointer-events: none;
}

.footer-left {
  left: 2vw;
  text-align: left;
}

.footer-right {
  right: 2vw;
  text-align: right;
}

body.threshold-complete .footer-left,
body.threshold-complete .footer-right {
  opacity: 1;
  pointer-events: auto;
}

.footer-left p,
.footer-right p {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--color-dust);
  opacity: 0.6;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.footer-left p:first-child {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.footer-attribution p:first-child {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 0.15rem;
}


/* 9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .workshop-bg {
    background-position: 40% center;
  }

  .hero-inner {
    margin-top: -8vh;
    padding: 1.5rem 2rem;
  }

  .file-cabinet {
    left: 1vw;
    bottom: 2vh;
  }

  .cabinet-image {
    height: min(45vh, 320px);
  }

  .footer-attribution {
    right: 2vw;
    bottom: 0.8vh;
  }
}

@media (max-width: 480px) {
  .cabinet-image {
    height: min(35vh, 260px);
  }
}


/* 10. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.3s !important;
  }

  .page-content {
    opacity: 1;
  }

  .workshop-bg {
    filter: brightness(0.85) saturate(1.05);
  }

  .door {
    display: none;
  }
}