/* ===== WW2 Tunnels Portfolio — Custom CSS ===== */
/* Dark teal palette: body #0d2b30, alt-a #132d32, alt-b #0a2226 */


/* ===== DARK TEAL PALETTE: ALTERNATING SECTION BACKGROUNDS ===== */

/* Alternating section backgrounds for depth between sections */
.pf-overview       { background: var(--ww2-bg-alt-a); }
.pf-showcase        { background: var(--ww2-bg-alt-b); }
.pf-scope           { background: var(--ww2-bg-alt-a); }
.pf-wanted          { background: var(--ww2-bg-alt-b); }
.pf-process-intro   { background: var(--ww2-bg-alt-a); }
.pf-phase           { background: var(--ww2-bg-alt-a); }
.pf-design-scroll   { background: var(--ww2-bg-alt-b); }
.pf-animations      { background: var(--ww2-bg-alt-a); }
.pf-devbreak        { background: var(--ww2-bg-alt-b); }
.pf-unique          { background: var(--ww2-bg-alt-a); }
.pf-stats           { background: var(--ww2-bg-alt-b); }

/* Teal-tinted surface for cards, browser chrome, cells */
.pf-showcase__browser-bar { background: #163035; }
.pf-showcase__browser-url { background: #1c3a3f; color: rgba(255,255,255,0.45); }
.pf-showcase__browser-content { background: var(--pf-surface); }
.pf-animations__cell { background: var(--pf-surface); }
.pf-devbreak__cell   { background: var(--pf-surface); }

/* Teal-accented borders on scope pills */
.pf-scope__item {
  border-color: rgba(var(--ww2-teal-rgb), 0.5);
  background: rgba(var(--ww2-teal-rgb), 0.08);
}

.pf-scope__item:hover {
  border-color: rgba(var(--ww2-teal-rgb), 0.8);
  background: rgba(var(--ww2-teal-rgb), 0.15);
  box-shadow: 0 0 25px rgba(var(--ww2-teal-rgb), 0.2);
}

.pf-scope__item::before {
  background: linear-gradient(90deg, transparent, rgba(var(--ww2-teal-rgb), 0.12), transparent);
}

/* Meta pills — teal borders instead of gold */
.pf-meta-pill {
  border-color: rgba(var(--ww2-teal-rgb), 0.4);
  background: rgba(var(--ww2-teal-rgb), 0.08);
}

/* Overview link — teal border with gold text on hover */
.pf-overview__link {
  border-color: var(--ww2-teal);
  background: rgba(var(--ww2-teal-rgb), 0.12);
}

.pf-overview__link:hover {
  background: rgba(var(--ww2-teal-rgb), 0.25);
}

/* Stats cards — teal border, gold numbers */
.pf-stats__card {
  border-color: rgba(var(--ww2-teal-rgb), 0.3);
  background: rgba(var(--ww2-teal-rgb), 0.08);
}

/* Wanted section — subtle teal radial glow */
.pf-wanted::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(var(--ww2-teal-rgb), 0.12) 0%, transparent 60%);
}

/* Showcase browser — teal shadow glow */
.pf-showcase__browser {
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--ww2-teal-rgb), 0.08);
}

/* ===== TESTIMONIALS: Dark teal palette ===== */
.portfolio-testimonials {
  background: var(--ww2-bg-alt-b);
  --pt-bg: var(--ww2-bg-alt-b);
}

.portfolio-testimonials .pt-scard {
  background: rgba(var(--ww2-teal-rgb), 0.12);
  border: 1px solid rgba(var(--ww2-teal-rgb), 0.2);
}

.portfolio-testimonials .pt-scard:hover {
  border-color: rgba(var(--ww2-teal-rgb), 0.35);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--ww2-teal-rgb), 0.08);
}

.portfolio-testimonials .pt-stats {
  border-top-color: rgba(var(--ww2-teal-rgb), 0.2);
}

.portfolio-testimonials .pt-stats-pill {
  background: rgba(var(--ww2-teal-rgb), 0.08);
  border-color: rgba(var(--ww2-teal-rgb), 0.2);
}

.portfolio-testimonials .pt-dot {
  background: rgba(var(--ww2-teal-rgb), 0.25);
}

.portfolio-testimonials .pt-dot:hover,
.portfolio-testimonials .pt-dot.active {
  background: var(--ww2-gold);
}

.portfolio-testimonials .pt-arrow {
  border-color: rgba(var(--ww2-teal-rgb), 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.portfolio-testimonials .pt-arrow:hover:not(:disabled) {
  border-color: var(--ww2-gold);
  background: rgba(243, 175, 61, 0.1);
  color: var(--ww2-gold);
}


/* ===== HERO: SPOTLIGHT REVEAL ===== */

.ww2-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  min-height: 600px;
  background: #091e22;
  overflow: hidden;
  z-index: 1;
  cursor: none;
}

.ww2-hero__layer {
  position: absolute;
  inset: 0;
}

.ww2-hero__layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* B&W layer — always visible, greyscale filter */
.ww2-hero__layer--bw {
  z-index: 1;
}

.ww2-hero__layer--bw video {
  filter: grayscale(1) contrast(1.1);
}

/* Colour layer — clipped to circle, sits on top, teal tint */
.ww2-hero__layer--colour {
  z-index: 2;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
  pointer-events: none;
}

.ww2-hero__layer--colour::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(243, 175, 61);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Hero content overlay */
.ww2-hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.ww2-hero__logo {
  width: clamp(200px, 30vw, 400px);
  height: auto;
  filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.6));
}

.ww2-hero__heading {
  font-family: 'Matter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
}

/* Scroll indicator */
.ww2-hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.85;
}

.ww2-hero__scroll span {
  font-family: 'Matter', sans-serif;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ww2-hero__scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ww2-gold);
  animation: ww2ScrollBounce 2s ease-in-out infinite;
}

@keyframes ww2ScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}

/* Custom cursor dot */
.ww2-hero__cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ww2-gold);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: difference;
}


/* ===== NEW BUILD PILL ===== */

.ww2-new-build-pill {
  background: rgba(243, 175, 61, 0.12);
  border-color: rgba(243, 175, 61, 0.4);
}

.ww2-new-build-pill .pf-meta-pill__value {
  color: var(--ww2-gold);
  font-weight: 700;
  letter-spacing: 0.06em;
}


/* ===== UNIQUE SECTION: SPOTLIGHT REVEAL (photo + teal tint) ===== */

.ww2-unique {
  position: relative;
  overflow: hidden;
  cursor: none;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ww2-unique__layer {
  position: absolute;
  inset: 0;
}

.ww2-unique__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ww2-unique__layer--bw {
  z-index: 1;
}

.ww2-unique__layer--bw img {
  filter: grayscale(1) contrast(1.1) brightness(0.5);
}

.ww2-unique__layer--colour {
  z-index: 2;
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
  pointer-events: none;
}

/* Teal colour layer — matches ww2tunnels.com .bg-blue */
.ww2-unique__layer--colour::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(34, 106, 118);
  mix-blend-mode: multiply;
  z-index: 1;
}

.ww2-unique--spotlight .pf-unique__layer {
  z-index: 10;
  position: relative;
}

/* Text backdrop for legibility — z-index above spotlight layers */
.ww2-unique__text-box {
  background: rgba(10, 34, 38, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: clamp(2rem, 4vw, 3.5rem);
  max-width: 720px;
  text-align: center;
  border: 1px solid rgba(34, 106, 118, 0.3);
  position: relative;
  z-index: 20;
  pointer-events: none;
}


/* ===== COLOUR OVERRIDES — GOLD/TEAL ACCENTS ===== */

/* Phase numbers */
.pf-phase__num {
  color: var(--ww2-gold);
}

/* Stats numbers */
.pf-stats__num {
  color: var(--ww2-gold);
}

/* Overview heading accent - the <strong> in "Over<strong>view</strong>" */
.pf-overview__heading strong {
  color: var(--ww2-gold);
}

/* Scope heading */
.pf-scope__heading {
  color: var(--ww2-gold);
}

/* Design heading */
.pf-design__heading {
  color: var(--ww2-gold);
}

/* Design font SVGs — force white fill */
.pf-design__fonts svg path {
  fill: #fff;
}

/* Design type sample heading */
.pf-design__type-sample--heading {
  color: var(--ww2-gold);
}

/* Unique heading em */
.pf-unique__heading em {
  color: var(--ww2-gold);
}

/* Animations heading */
.pf-animations__heading {
  color: var(--ww2-gold);
}

/* "What We Did" heading */
.pf-process-intro__heading {
  color: var(--ww2-gold);
}

/* Wanted heading */
.pf-wanted__heading {
  color: var(--ww2-gold);
}

/* Teal horizontal rule between major sections */
.pf-scope::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--ww2-teal);
  margin-bottom: 2rem;
  opacity: 0.6;
}


/* ===== CTA: DRAMATIC FOOTER VISUAL ===== */

.ww2-cta {
  min-height: 600px;
  background: #0e3a40;
}

/* Kill boilerplate radial glow — we have the teal overlay */
.ww2-cta::before {
  display: none;
}

/* Full-bleed historical photo */
.ww2-cta__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ww2-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Teal colour overlay on the photo */
.ww2-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(34, 106, 118, 0.65);
  mix-blend-mode: multiply;
}

/* Giant "THE TUNNELS" typography */
.ww2-cta__typography {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 0.85;
  gap: 0;
}

.ww2-cta__typography span {
  font-family: 'field-gothic', 'Impact', 'Arial Narrow', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
  font-size: clamp(6rem, 18vw, 16rem);
  letter-spacing: 0.06em;
  line-height: 0.9;
  user-select: none;
}

/* CTA content sits on top of everything */
.ww2-cta .pf-cta__content {
  z-index: 3;
}

.ww2-cta .pf-cta__heading {
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

/* CTA button — dark teal text on gold background */
.pf-cta__button {
  background: linear-gradient(135deg, var(--ww2-gold), #d89a2e);
  color: #0d2b30;
}

.pf-cta__button:hover {
  box-shadow: 0 8px 40px rgba(243, 175, 61, 0.5);
}


/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .ww2-hero {
    min-height: 500px;
    cursor: auto;
  }

  /* On mobile, skip B&W — show colour video directly */
  .ww2-hero__layer--bw {
    display: none;
  }

  .ww2-hero__layer--colour {
    position: relative;
    clip-path: none;
    pointer-events: auto;
  }

  /* Hide custom cursor on mobile */
  .ww2-hero__cursor,
  .ww2-unique__cursor {
    display: none;
  }

  /* Unique section: skip B&W, show teal-tinted photo directly */
  .ww2-unique {
    cursor: auto;
    min-height: 400px;
  }
  .ww2-unique__layer--bw {
    display: none;
  }
  .ww2-unique__layer--colour {
    clip-path: none;
    pointer-events: auto;
  }

  .ww2-hero__logo {
    width: clamp(160px, 50vw, 280px);
  }

  .ww2-hero__heading {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  /* Stack devbreak to 1 col on mobile */
  .pf-devbreak__grid {
    grid-template-columns: 1fr !important;
  }

  /* CTA: scale down giant typography */
  .ww2-cta {
    min-height: 450px;
  }

  .ww2-cta__typography span {
    font-size: clamp(3.5rem, 16vw, 6rem);
  }
}