/* ==========================================================================
   STRATA — Cinema Layer Mechanics & Multi-Plane Architecture
   ========================================================================== */

/* Main Stage Container */
.depth-stage {
  position: relative;
  width: 100%;
}

/* Layer Stack Wrapper — Natural vertical document flow */
.strata-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Individual Full-Bleed Cinema Section — Natural Page Scrolling */
.strata-layer {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100lvh; /* stable: doesn't resize when the mobile toolbar shows/hides */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Multi-Plane Sub-Layers
   -------------------------------------------------------------------------- */

/* 1. Background Media Plane (Extends to screen edges) */
.plane-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  overflow: hidden;
  transform-origin: center center;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              filter var(--duration-medium) ease;
}

.plane-media img,
.plane-media video,
.plane-media canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out-expo), filter 0.8s ease;
  will-change: transform;
}



/* 2. Ambient Procedural / Vector Plane */
.plane-mesh {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  opacity: 0.55;
}



/* 4. Foreground Content Plane — DIRECTLY ON BACKGROUND (NO WINDOWS) */
.plane-content {
  position: relative;
  z-index: var(--z-fg);
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  min-height: 100lvh; /* stable: doesn't resize when the mobile toolbar shows/hides */
  margin: 0 auto;
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

/* Pure Text Shadows for Maximum Contrast on Background */
.cinematic-text {
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 6px 30px rgba(0, 0, 0, 0.9),
    0 12px 60px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   3D FILM STRATA DEPTH MODE (Isometric Layer Separation)
   -------------------------------------------------------------------------- */
body.depth-mode-active {
  overflow-y: scroll;
  background-color: #030405;
}

body.depth-mode-active .depth-stage {
  transform: scale(0.85);
  margin-top: 60px;
  margin-bottom: 60px;
}

body.depth-mode-active .strata-layer {
  position: relative;
  margin-bottom: 140px;
  border-radius: 12px;
  border: 1px solid rgba(229, 193, 139, 0.35);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9);
  transform: rotateX(24deg) rotateY(-18deg) rotateZ(3deg) translate3d(0, 0, 0);
  background-color: rgba(5, 6, 8, 0.98);
}

/* Explode the cinema planes along Z axis */
body.depth-mode-active .strata-layer .plane-media {
  transform: translateZ(-160px) scale(0.92);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body.depth-mode-active .strata-layer .plane-mesh {
  transform: translateZ(-50px);
}

body.depth-mode-active .strata-layer .plane-mid {
  transform: translateZ(40px);
}

body.depth-mode-active .strata-layer .plane-content {
  transform: translateZ(160px);
}

/* Exploded 3D Plane Labels */
.depth-plane-label {
  display: none;
  position: absolute;
  font-family: var(--font-tech);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-label);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--text-accent);
  color: var(--text-accent);
  border-radius: 4px;
  pointer-events: none;
  z-index: 100;
  animation: vibrantBorderShift 16s linear infinite, vibrantColorShift 16s linear infinite;
}

body.depth-mode-active .depth-plane-label {
  display: block;
}

.depth-label-bg {
  top: 20px;
  left: 20px;
  transform: translateZ(-140px);
}

.depth-label-fg {
  bottom: 24px;
  right: 24px;
  transform: translateZ(180px);
}

/* --------------------------------------------------------------------------
   TV Stage Layer — Retro Broadcast CRT Monitor on Studio Tabletop
   -------------------------------------------------------------------------- */
.tv-stage-layer {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100lvh; /* stable: doesn't resize when the mobile toolbar shows/hides */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.tv-stage-layer .plane-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.tv-composite-stage {
  position: relative;
  z-index: var(--z-content, 10);
  width: 100%;
  max-width: 1540px;
  min-height: 100vh;
  min-height: 100lvh; /* stable: doesn't resize when the mobile toolbar shows/hides */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(15px, 2.8vh, 32px);
  pointer-events: none;
}

.tv-unit-wrapper {
  position: relative;
  width: min(94vw, 940px);
  max-height: 88vh;
  aspect-ratio: 1 / 1;
  pointer-events: auto;
  transform-style: preserve-3d;
}

/* Realistic Table Contact Ambient Shadow */
.tv-contact-shadow {
  position: absolute;
  bottom: 7.2%;
  left: 8%;
  width: 84%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* Middle Screen Aperture */
.tv-screen-container {
  position: absolute;
  top: 20.8%;
  left: 16.5%;
  width: 67%;
  height: 49.2%;
  overflow: hidden;
  border-radius: 4% / 5%;
  background-color: #050505;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.tv-screen-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* CRT Screen Glare & Scanline Texture */
.tv-screen-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 60%);
  mix-blend-mode: screen;
}

/* Foreground Frame Overlay */
.tv-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

/* 3D Depth Mode for TV Stage */
body.depth-mode-active .tv-stage-layer .tv-screen-container {
  transform: translateZ(40px);
  box-shadow: 0 0 35px rgba(229, 193, 139, 0.3);
}

body.depth-mode-active .tv-stage-layer .tv-frame-overlay {
  transform: translateZ(160px);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.85));
}

/* Foreground Typography in TV Layer (Elegantly Above TV Stage) */
.tv-stage-layer .plane-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: auto;
  padding-top: clamp(48px, 7.5vh, 96px);
  z-index: 10;
  pointer-events: none;
}

.tv-stage-layer .statement-text {
  font-size: clamp(2rem, 4.4vw, 4rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 6px 30px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .plane-content {
    padding: var(--space-xl) var(--space-md);
  }
  .tv-unit-wrapper {
    width: min(94vw, 680px);
    max-height: 82vh;
  }
}

@media (max-width: 600px) {
  .strata-layer {
    width: 100%;
    max-width: 100vw;
  }
  .plane-content {
    padding: var(--space-lg) var(--space-sm);
  }
  .tv-composite-stage {
    transform: translateY(0);
  }
  .tv-unit-wrapper {
    width: min(96vw, 480px);
    max-height: 76vh;
  }
}


/* --------------------------------------------------------------------------
   Layer: Lord of the Rings edit — frame on Scotch, crop out the title text.
   Source is 2560x1685; Scotch is upper-left (~x 22–33%, head ~y 9%),
   the "Lord of the Rings" title starts ~y 79%.
   Anchoring to the top + zooming 1.3x from the upper-left keeps the head in
   frame and pushes the title below the bottom edge on all aspect ratios
   (16:9 shows y 1–66%, 16:10 y 1–74%, phones y 1–78%).
   -------------------------------------------------------------------------- */
#layer-lotr .plane-media img {
  object-position: 25% 0%;
  transform: scale(1.3);
  transform-origin: 20% 3%;
}

/* LOTR layer: "Let's make cool things" artwork, pushed to the right.
   The h2 keeps the real text for screen readers/SEO but is visually hidden. */
#layer-lotr .statement-wrap {
  max-width: none;
  align-items: flex-end;
  padding-right: clamp(24px, 6vw, 120px);
}
#layer-lotr .statement-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#layer-lotr .lotr-title-art {
  display: block;
  width: clamp(240px, 36vw, 560px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}
@media (max-width: 640px) {
  #layer-lotr .statement-wrap { align-items: center; padding-right: 0; }
  #layer-lotr .lotr-title-art { width: 78vw; }
}

/* --------------------------------------------------------------------------
   Layer: CineStill portrait — headline always sits in the space right of
   Scotch's face, at every window shape.

   The photo (2560x1927, 4:3) has Scotch's face at ~18–38% across and
   ~33–58% down. To make that position predictable:
     • wide windows (≥ 4:3): photo fills the width (cover crops top/bottom only)
     • narrow / vertical windows (< 4:3): photo is shown full-width (contain);
       its own black film borders blend into the black background.
   Either way, photo width == window width and it's vertically centred, so
   the face is always at 18–38% across and the headline can be placed by %.
   -------------------------------------------------------------------------- */
#layer-portrait .plane-media {
  background: #000;
}

#layer-portrait .plane-media img {
  object-position: center center;
  transform: none;
}

@media (max-aspect-ratio: 4/3) {
  #layer-portrait .plane-media img {
    object-fit: contain;
  }
}

/* Let the headline position against the full-width layer, not the 1440px content column */
#layer-portrait .plane-content {
  position: static;
}

#layer-portrait .statement-wrap {
  position: absolute;
  z-index: var(--z-fg);
  left: 47%;   /* just past the face (ends ~38%) */
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  max-width: none;
  align-items: flex-start;
}

#layer-portrait .statement-text {
  text-align: left;
  padding: 0;
  /* Global title size, but never wider than the column allows */
  font-size: min(clamp(var(--title-font-min, 3rem), var(--title-font-vw, 6.8vw), var(--title-font-size, 6.2rem)), 5vw);
}

/* Layer 2: the sentence is plain white; only the big "Scotch" keeps the chromatic drop shadow */
#layer-portrait .statement-text {
  animation: none;
  text-shadow: none;
}

#layer-portrait .statement-big {
  text-shadow: none;
}

/* Phones (portrait): fill the whole screen with the photo, cropped around the
   face, and drop the headline to the bottom over a soft dark fade. */
@media (max-width: 760px) and (orientation: portrait) {
  #layer-portrait .plane-media img {
    object-fit: cover;
    object-position: 27% center;
    /* the jpg has black margins above/below the film frame — zoom past them */
    transform: scale(1.62);
    transform-origin: 27% 50%;
  }
  #layer-portrait .plane-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 45%);
    pointer-events: none;
  }
  #layer-portrait .statement-wrap {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 12%;
    transform: none;
  }
  #layer-portrait .statement-text {
    font-size: 8.5vw;
  }
}

/* --------------------------------------------------------------------------
   Work layers — one full-bleed layer per film (generated by build_work_pages.py).
   The whole layer is a link to work/<key>.html; the title sits in a
   translucent "liquid glass" pill in the top-right corner.
   -------------------------------------------------------------------------- */
.work-anchor { height: 0; }

/* Light top-right vignette so the pill reads on bright thumbnails */
.work-layer .plane-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 38%);
  pointer-events: none;
}

.work-layer-link {
  position: absolute;
  inset: 0;
  z-index: 8;
  cursor: pointer;
}

/* Liquid glass pill */
.work-pill {
  position: absolute;
  top: 22px;   /* level with the fixed SCOTCH logo */
  right: 32px;
  z-index: 9;
  pointer-events: none; /* clicks fall through to .work-layer-link */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 64px);
  padding: 12px 22px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.14) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),   /* top specular edge */
    inset 0 -1px 2px rgba(255, 255, 255, 0.12);  /* bottom refraction (no drop shadow) */
  transition: background 0.35s ease;
}


.work-pill-title {
  font-family: var(--font-text);
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  font-weight: 400; 
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  text-transform: none; /* sentence case: shows exactly as typed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Hover: image eases in, pill brightens */
.work-layer:hover .plane-media img { transform: scale(1.08); }
.work-layer:hover .work-pill { background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.2) 100%); }
.work-layer-link:focus-visible { outline: 3px solid #fff; outline-offset: -12px; }

/* Phones: films become stacked 16:9 cards showing the whole frame (several fit
   on screen at once); the pill shrinks into the card's top-right corner. */
@media (max-width: 760px) {
  .work-layer {
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin-top: 6px;
  }
  .work-layer .plane-media img { transform: none; }
  .work-layer:hover .plane-media img { transform: none; }
  .work-pill {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 12px;
  }
  .work-pill-title { font-size: 0.8rem; }
  .work-preview--yt iframe {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* Hover preview (js/work-layers.js): film plays over the thumbnail */
.work-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  overflow: hidden;
}
.work-preview.is-visible { opacity: 1; }
/* YouTube preview: scale the 16:9 iframe to cover the whole layer */
.work-preview--yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%) scale(1.02);
  border: 0;
}

/* Back-to-top button (bottom right) — same liquid glass as the pills */
.back-to-top {
  position: fixed;
  bottom: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 36px);
  z-index: 1000;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.14) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(255, 255, 255, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.22) 100%); }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.back-to-top svg { width: 20px; height: 20px; }

/* LOTR layer: asterisk on the title art + "*No AI" footnote */
#layer-lotr .lotr-art-wrap {
  position: relative;
  display: inline-block;
}
#layer-lotr .lotr-asterisk {
  position: absolute;
  top: 0.7em;
  right: 0.15em;
  font-family: var(--font-text);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
  color: #ffffff;
}
#layer-lotr .lotr-footnote {
  position: absolute;
  left: 32px;              /* aligned with the SCOTCH logo */
  bottom: 28px;
  z-index: var(--z-fg);
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-label);
  color: #ffffff;
}
#layer-lotr .lotr-footnote span { margin-right: 2px; }