/* ================================================================
   PROTO STEAM — custom styles
   Tailwind handles layout/spacing; this file handles:
   - GSAP animation prerequisites
   - Journey horizontal scroll mechanics
   - Scrollbar styling
   - Hover states not easily expressed in Tailwind
================================================================ */

/* ----------------------------------------------------------------
   Base
---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #1a0e05;
}

::-webkit-scrollbar-thumb {
  background: #f5b800;
  border-radius: 2px;
}


/* ----------------------------------------------------------------
   HERO — rotated bar highlights (heading + buttons)
---------------------------------------------------------------- */

/* Brown bar behind "Inventive storytelling" and "challenges" */
.bar-highlight {
  display: inline-block;
  background-color: #3d1f0a;
  color: #F6B13E;
  padding: 0em 0.15em 0.01em;
  line-height: inherit;
  transform-origin: left center;
}

.bar-darker {
  background-color: #1a0e05 !important;
}

.bar-gold {
  background-color: #F6B13E;
  padding: 3em;
}

.bar-neg {
  transform: rotate(-1deg);
}

.bar-pos {
  transform: rotate(1deg);
}

/* Block-level bar: fills its grid cell, used for stat items */
.stat-bar {
  display: block;
  background-color: #3d1f0a;
  padding: 0.5em 0.85em 0.6em;
  transform-origin: center center;
}

/* Rotated bar buttons */
.btn-bar--neg {
  transform: rotate(-1deg);
}

.btn-bar--pos {
  transform: rotate(1deg);
}

/* Hover state must not change the rotation */
.btn-bar--neg:hover,
.btn-bar--pos:hover {
  transform: rotate(-1deg);
}

.btn-bar--pos:hover {
  transform: rotate(1deg);
}


.museum-card{
  position: relative;
}

/* ----------------------------------------------------------------
   1. HERO PARALLAX
   The .hero-bg div is translated by GSAP; overflow:hidden on the
   section clips it so nothing bleeds outside.
---------------------------------------------------------------- */
.hero-section {
  overflow: hidden;
}

.hero-bg {
  /* Scale up so parallax movement doesn't reveal gaps */
  transform: scale(1.15) translateY(0);
  transform-origin: center center;
  will-change: transform;
  /* Slight extra height so bottom gap is never visible */
  top: -7.5%;
  height: 115%;
}


/* ----------------------------------------------------------------
   2. JOURNEY — horizontal scroll
---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Journey card width = 1/3 of container content area.
   Container: max-w-7xl (80rem) with px-14 (3.5rem) each side = 7rem total.
   Two gaps between 3 cards: 2 × 1.5rem (gap-6) = 3rem.
   card = (min(100vw, 80rem) - 7rem - 3rem) / 3
        = (min(100vw, 80rem) - 10rem) / 3
---------------------------------------------------------------- */
.journey-card {
  width: calc((100vw - 10rem) / 3);
  /* mobile fallback */
}

/* Desktop: section is exactly viewport-height; GSAP pins it */
@media (min-width: 1024px) {
  .journey-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .journey-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .journey-track-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .journey-track {
    height: 100%;
    align-items: flex-start;
    will-change: transform;
    /* Left edge aligns with container content; right bleeds out */
    padding-left: max(3.5rem, calc((100vw - 80rem) / 2 + 3.5rem));
  }

  .journey-card {
    width: calc((min(100vw, 80rem) - 10rem) / 3);
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .journey-card img {
    flex-shrink: 0;
  }
}

/* Mobile: horizontal swipe scroll */
@media (max-width: 1023px) {
  .journey-track-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .journey-track-wrapper::-webkit-scrollbar {
    display: none;
  }

  .journey-track {
    padding-left: 1.5rem;
  }

  .journey-card {
    width: 280px;
  }
}


/* ----------------------------------------------------------------
   3. MUSEUMS wrapper — background color transition via GSAP
   Initial state: cream with texture visible.
   GSAP animates background-color → #ffffff and texture opacity → 0.
---------------------------------------------------------------- */
#museums-wrapper {
  background-color: #f5e8c8;
}

#museums-texture {
  /* GSAP will tween opacity from 1 to 0 as the section scrolls in */
  will-change: opacity;
}

/* The sticky image column */
.museums-sticky-image {
  /* CSS sticky — sticks within the parent grid cell */
  will-change: transform;
}


/* ----------------------------------------------------------------
   IMAGE FRAME — two offset shadow planes + amber border
   Two variants:
     .img-frame--tr  →  shadow A top-right (-1°), shadow B bottom-left (+1°)
     .img-frame--tl  →  shadow A top-left  (+1°), shadow B bottom-right (-1°)

   Wrap the parent with padding (e.g. p-5) to give the shadows
   visual breathing room outside the image bounds.
---------------------------------------------------------------- */
.img-frame {
  position: relative;
  display: block;
}

.img-shadow-a,
.img-shadow-b {
  position: absolute;
  inset: 0;
  background-color: #1a0e05;
  pointer-events: none;
}

.img-shadow-gold{
  background-color: #F6B13E !important;
}

/* Top-right & bottom-left */
.img-frame--tr .img-shadow-a {
  transform: translate(18px, -18px) rotate(-1deg);
}

.img-frame--tr .img-shadow-b {
  transform: translate(-18px, 18px) rotate(1deg);
}

/* Top-left & bottom-right */
.img-frame--tl .img-shadow-a {
  transform: translate(-18px, -18px) rotate(1deg);
}

.img-frame--tl .img-shadow-b {
  transform: translate(18px, 18px) rotate(-1deg);
}

/* Image on top with amber border */
.img-frame>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #E0A138;
}


/* ----------------------------------------------------------------
   4. Character cards — hover lift
---------------------------------------------------------------- */
.character-card {
  transition: transform 0.3s ease;
}

.character-card:hover {
  transform: translateY(-6px);
}


/* ----------------------------------------------------------------
   5. Download cards — hover lift
---------------------------------------------------------------- */
.download-card {
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.download-card:hover {
  transform: translateY(-5px);
}


/* ----------------------------------------------------------------
   6. Journey card hover
---------------------------------------------------------------- */
.journey-card {
  transition: transform 0.25s ease;
}

@media (min-width: 1024px) {

  /* Disable hover lift when GSAP is controlling position */
  .journey-card:hover {
    transform: none;
  }
}