/* gallery.css — Art gallery shell (index.html only).
   Wraps the standalone portfolio (portfolio.html) inside a gilt frame
   embedded in an <iframe>. Scrolling drives a CSS transform that scales
   the framed iframe up from a small artwork to fullscreen, at which
   point the portfolio is interactive at natural 1:1 size. */

/* ──────────────────────────────────────────────
   Gallery design tokens
   ────────────────────────────────────────────── */
:root {
  --color-bg-primary: #191414;
  --gallery-wall: #17150f;
  --gallery-wall-light: #241f16;
  --gallery-gilt-dark: #6b522a;
  --gallery-gilt: #a8854a;
  --gallery-gilt-light: #e3c98a;
  --gallery-cream: #b3a78f;
  --gallery-cream-light: #ece5d6;
  --gallery-font-display: 'Instrument Serif', serif;
}

/* ──────────────────────────────────────────────
   Body / track / stage
   ────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--gallery-wall);
  color: var(--gallery-cream-light);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

/* Scroll track — provides the 320vh of scroll space that drives the zoom. */
#gallery-track {
  position: relative;
  height: 320vh;
}

/* Stage — sticks to the top of the viewport while the user is inside
   #gallery-track. Once the user scrolls past the track, the stage
   naturally moves with the page (but there's nothing past the track,
   so it just stays at maximum scroll). */
#gallery-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--gallery-wall);
}

/* ──────────────────────────────────────────────
   Wall texture (plaster gradient + grain)
   ────────────────────────────────────────────── */
.gallery-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--gallery-wall-light) 0%,
      var(--gallery-wall) 58%,
      #0d0b08 78%,
      #070605 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-blend-mode: normal, overlay;
}

/* ──────────────────────────────────────────────
   Scene — centers the framed iframe, applies the zoom transform.
   The transform is set by gallery.js per scroll progress.
   ────────────────────────────────────────────── */
#gallery-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform-origin: center center;
  /* Initial scale set by JS so the frame fits comfortably in the wall.
     Defaults here just in case JS hasn't run yet — they get overridden. */
  transform: scale(0.42);
}

/* ──────────────────────────────────────────────
   Frame wrapper — wraps the gilt frame and acts as the
   positioning context for the placard + reflection.
   ────────────────────────────────────────────── */
#frame-wrapper {
  position: relative;
  display: inline-block;
}

/* ──────────────────────────────────────────────
   Gilt float frame
   ────────────────────────────────────────────── */
.art-frame {
  position: relative;
  padding: 22px;
  background:
    linear-gradient(145deg,
      var(--gallery-gilt-light) 0%,
      var(--gallery-gilt) 22%,
      var(--gallery-gilt-dark) 50%,
      var(--gallery-gilt) 78%,
      var(--gallery-gilt-light) 100%);
  border-radius: 2px;
  box-shadow:
    0 30px 80px -10px rgba(0, 0, 0, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 245, 220, 0.55),
    inset 0 -1px 1px rgba(0, 0, 0, 0.45);
}

/* Float-mount gap between the gilt frame and the artwork */
.art-frame-inner {
  padding: 10px;
  background: #0a0908;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9);
  display: block;
  font-size: 0; /* eliminate inline-block whitespace under iframe */
}

/* ──────────────────────────────────────────────
   The iframe — full viewport size at intrinsic scale 1.
   CSS transform on #gallery-scene scales it visually.
   At progress 0: scale ~0.42 → framed artwork floats in the wall.
   At progress 1: scale ~1.06 (overscan) → iframe fills viewport,
                   frame edges pushed off-screen.
   ────────────────────────────────────────────── */
#portfolio-iframe {
  display: block;
  width: 100vw;
  height: 100vh;
  border: 0;
  background: var(--color-bg-primary);
  /* During gallery zoom the iframe is not interactive — outer scroll
     drives the zoom. gallery.js flips this to 'auto' once zoom completes. */
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   Glass sheen overlaid on the artwork
   ────────────────────────────────────────────── */
#gallery-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.015) 28%,
    transparent 45%
  );
  z-index: 2;
}

/* ──────────────────────────────────────────────
   Floor reflection (anchored to bottom of frame)
   ────────────────────────────────────────────── */
.art-reflection {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 38%;
  margin-top: 24px;
  background: linear-gradient(to bottom, rgba(168, 133, 74, 0.10), transparent 70%);
  filter: blur(10px);
  transform: scaleY(-0.85);
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   Museum placard (anchored to bottom-right of frame)

   Sized generously in CSS pixels because the gallery view renders
   everything at ~0.42× — at smaller dimensions the text was illegible.
   ────────────────────────────────────────────── */
.gallery-placard {
  position: absolute;
  left: calc(100% + 56px);
  bottom: 0;
  width: 340px;
  padding: 22px 26px;
  background: linear-gradient(165deg, #f4eee1, #e6ddc9);
  border-radius: 2px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: left;
  font-size: 0; /* reset, children set their own size */
}

.gallery-placard-title {
  font-family: var(--gallery-font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1.25;
  color: #1c1a17;
  margin: 0;
}

.gallery-placard-details {
  font-size: 16px;
  margin: 12px 0 0;
  color: #5d574e;
  line-height: 1.55;
}

.gallery-placard-collection {
  color: #8a8175;
}

@media (max-width: 900px) {
  .gallery-placard {
    left: 50%;
    bottom: auto;
    top: calc(100% + 24px);
    transform: translateX(-50%);
    text-align: center;
  }
}

/* ──────────────────────────────────────────────
   Spotlight + vignette (ambiance, fades during zoom)
   ────────────────────────────────────────────── */
#gallery-ambiance {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.gallery-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 62% 56% at 50% 30%,
    rgba(255, 241, 214, 0.16) 0%,
    rgba(255, 241, 214, 0.07) 38%,
    transparent 70%
  );
}

.gallery-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 100% at 50% 45%,
    transparent 45%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ──────────────────────────────────────────────
   Exhibition header (top of stage)
   ────────────────────────────────────────────── */
#gallery-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vh, 40px) 24px 0;
}

/* Note: no CSS entry animations on header/scroll-hint. They would set
   a keyframe-driven opacity that overrides the inline opacity gallery.js
   uses to fade them out during the zoom. The fade-in feel comes for
   free from the gallery shell loading instantly. */
.gallery-header-label {
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gallery-cream);
  margin: 0;
}

.gallery-header-title {
  font-family: var(--gallery-font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--gallery-cream-light);
  margin: 8px 0 0;
  letter-spacing: -0.5px;
}

/* ──────────────────────────────────────────────
   Scroll hint — now nested INSIDE #gallery-header so it sits directly
   below "A Working Retrospective" in the column flow (above the frame).
   ────────────────────────────────────────────── */
#gallery-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2.5vh, 28px);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gallery-cream);
}

.gallery-scroll-line {
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(179, 167, 143, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

/* ──────────────────────────────────────────────
   Return-to-gallery chip (appears once zoom completes)
   ────────────────────────────────────────────── */
#gallery-return-chip {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gallery-cream-light);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.2s ease;
}

#gallery-return-chip:hover {
  transform: scale(1.03);
}

/* ──────────────────────────────────────────────
   Animations
   ────────────────────────────────────────────── */
@keyframes gallery-fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-header-label,
  .gallery-header-title,
  #gallery-scroll-hint {
    animation: none;
    opacity: 1;
  }
}