/* ============================================================
   showcase.css — full-bleed page shell, header, overlay, footer
   Shared by index.html and projects.html.

   .showcase              → base shell (both pages)
   .showcase--projects    → modifier for the projects page
   ============================================================ */

/* ── Shell ───────────────────────────────────────────────────── */
.showcase {
  position:        relative;
  min-height:      100dvh;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  transition:      filter var(--t-slow);
}

/* Blur the page content when the menu is open */
.showcase.active {
  filter: blur(3px) brightness(0.6);
}

/* ── Background image (index page) ─────────────────────────── */
/*
 * index.html uses an <img id="background"> for the full-bleed photo.
 * We position it absolutely so it never affects document flow.
 */
#background {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  z-index:    0;
  pointer-events: none;
  user-select: none;
}

/* ── Projects background (projects page) ────────────────────── */
/*
 * projects.html uses a .projects-background div instead of an <img>.
 * We replicate the same dark-red ambient glow using CSS gradients,
 * matching the vignette visible in the screenshot.
 */
.projects-background {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;

  background:
    /* warm red glow top-left */
    radial-gradient(ellipse 55% 45% at 8% 10%,
      rgba(110, 18, 8, 0.60) 0%,
      transparent 70%),
    /* subtle warm tint bottom-right */
    radial-gradient(ellipse 40% 35% at 92% 90%,
      rgba(60, 10, 4, 0.35) 0%,
      transparent 70%),
    /* base dark */
    var(--clr-bg);
}

/* ── Overlay (both pages) ───────────────────────────────────── */
/*
 * Sits above the background image/gradient to darken it and ensure
 * text legibility. The index page needs a stronger overlay because
 * the photo is bright; the projects modifier lightens it slightly.
 */
.overlay {
  position:        absolute;
  inset:           0;
  z-index:         1;
  pointer-events:  none;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 6, 6, 0.55) 0%,
      rgba(8, 6, 6, 0.20) 40%,
      rgba(8, 6, 6, 0.70) 100%
    );
}

.showcase--projects .overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(8, 6, 6, 0.40) 0%,
      rgba(8, 6, 6, 0.10) 50%,
      rgba(8, 6, 6, 0.50) 100%
    );
}

/* ── Header ─────────────────────────────────────────────────── */
header {
  position:       relative;
  z-index:        10;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        0 2rem;
  height:         var(--header-h);
  flex-shrink:    0;
}

/* index.html header has logo + toggle only (default flex row) */

/* projects.html has .header-left wrapping back-arrow + logo */
.header-left {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
}

/* ── Back link ───────────────────────────────────────────────── */
.back-link {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  border:           1px solid var(--clr-border);
  border-radius:    50%;
  color:            var(--clr-text-secondary);
  background:       rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--t-base),
    color        var(--t-base),
    background   var(--t-base);
  flex-shrink:  0;
}

.back-link:hover,
.back-link:focus-visible {
  border-color: var(--clr-border-hover);
  color:        var(--clr-text-primary);
  background:   rgba(255, 255, 255, 0.09);
  outline:      none;
}

.back-link__icon {
  width:  16px;
  height: 16px;
}

/* ── Hero text (index page) ─────────────────────────────────── */
.text {
  position:       relative;
  z-index:        5;
  flex:           1;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        3rem 2rem 2rem;
  max-width:      680px;
}

.text h2 {
  font-family:    var(--font-display);
  font-size:      clamp(3rem, 8vw, 6rem);
  font-weight:    400;
  letter-spacing: 0.06em;
  line-height:    0.95;
  color:          var(--clr-text-primary);
  text-transform: uppercase;
}

.text h3 {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight:    400;
  letter-spacing: 0.16em;
  color:          var(--clr-text-secondary);
  text-transform: uppercase;
  margin-top:     0.25rem;
  margin-bottom:  1.5rem;
}

.text p {
  font-size:   clamp(0.85rem, 1.5vw, 0.95rem);
  color:       var(--clr-text-secondary);
  line-height: 1.7;
  max-width:   520px;
  margin-bottom: 2rem;
}

/* CTA button */
.text > a {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  align-self:      flex-start;
  padding:         0.6rem 1.4rem;
  font-family:     var(--font-display);
  font-size:       1rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--clr-text-primary);
  border:          1px solid var(--clr-border-hover);
  border-radius:   4px;
  background:      rgba(255, 255, 255, 0.05);
  transition:
    background   var(--t-base),
    border-color var(--t-base),
    color        var(--t-base);
}

.text > a::after {
  content: '→';
  transition: transform var(--t-base);
}

.text > a:hover {
  background:   rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
}

.text > a:hover::after {
  transform: translateX(3px);
}

/* ── Footer / social (index page) ──────────────────────────── */
footer {
  position:       relative;
  z-index:        5;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        1.25rem 2rem;
  flex-shrink:    0;
}

footer p {
  font-size:      0.75rem;
  color:          var(--clr-text-muted);
  letter-spacing: 0.06em;
}

.social {
  display:    flex;
  align-items: center;
  gap:        1.25rem;
}

.social li a {
  display:    flex;
  align-items: center;
  opacity:    0.55;
  transition: opacity var(--t-base), transform var(--t-base);
}

.social li a:hover {
  opacity:   1;
  transform: translateY(-2px);
}

.social li a img {
  width:  22px;
  height: 22px;
  filter: brightness(0) invert(1);   /* white icons from any source colour */
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  header {
    padding: 0 1.25rem;
    height:  60px;
  }

  .text {
    padding: 2rem 1.25rem 1.5rem;
  }

  footer {
    flex-direction: column-reverse;
    gap:     1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
  }
}