/* ==============================================
   MAMUT — Band Website Styles
   Single-page, full-screen section layout
   ============================================== */

/* -----------------------------------------------
   1. RESET & BASE
   Zero out browser defaults so we start clean.
   box-sizing: border-box means padding/border are
   included inside the element's stated width/height.
----------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  /* Prevent horizontal scroll caused by full-width elements */
  overflow-x: hidden;
}

/* -----------------------------------------------
   2. COLOR PALETTE
   Define the three brand colours as CSS variables.
   Usage: color: var(--cream);
----------------------------------------------- */
:root {
  --dark:       #263340;
  --terracotta: #9B3A29;
  --cream:      #E5D9CE;
}

/* -----------------------------------------------
   3. SECTIONS
   Each section is a full-screen "slide".
   display: flex + align/justify center keeps all
   child content centered both vertically and
   horizontally.
----------------------------------------------- */
.section {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  scroll-snap-align: start;
}

/* Background colour helpers */
.bg-dark       { background-color: var(--dark); }
.bg-terracotta { background-color: var(--terracotta); }
.bg-cream      { background-color: var(--cream); }

/* -----------------------------------------------
   4. CENTRED CONTENT WRAPPER
   Limits text width so long lines don't stretch
   across the full screen (hard to read).
----------------------------------------------- */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  width: 100%;
  max-width: 680px;
}

/* -----------------------------------------------
   5. HERO SECTION — Logo
----------------------------------------------- */
.logo-img {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  animation: logoEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* -----------------------------------------------
   6. ABOUT SECTION — Photo strip + tagline
----------------------------------------------- */

/* The photo strip spans the full width above the text content */
.photo-strip {
  width: 100%;
  height: 40vh;            /* takes up 40% of the screen height */
  overflow: hidden;        /* crops the image to this box */
  flex-shrink: 0;
}

.strip-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills the box, cropping if needed */
  object-position: center 30%; /* focus on upper-center of the image */
}

/* -----------------------------------------------
   7. TAGLINE TEXT
   The minimal, elegant text used in each section.
----------------------------------------------- */
.tagline {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--cream);
  margin-bottom: 2rem;
}

.tagline.dark-text {
  color: var(--dark);
}

/* Mammoth isotip icon */
.mammoth-icon {
  width: clamp(180px, 30vw, 270px);
  height: auto;
  margin-bottom: 1.5rem;
}

/* -----------------------------------------------
   8. MUSIC SECTION — Full-bleed photo with Spotify overlay
----------------------------------------------- */

/* The music-content fills the whole section and stacks
   the image and embed using position:relative/absolute */
.music-content {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

/* Image fills the entire container */
.music-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep people at the bottom, sky fills upward */
  object-position: center bottom;
}

/* Spotify embed floats on top of the image */
#spotify-embed {
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 88%);
  border-radius: 12px;
  z-index: 2;
}

/* -----------------------------------------------
   9. STREAMING SECTION — Platform link buttons
----------------------------------------------- */
.platform-links {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

.platform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding: 0.5rem;         /* 44px+ tap target on mobile */
}

.platform-btn:hover {
  opacity: 0.7;
  transform: scale(1.12);
}

.platform-icon {
  height: 36px;
  width: auto;
}

/* -----------------------------------------------
   10. SOCIAL SECTION — Social links
----------------------------------------------- */
.social-icons {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

.social-link {
  color: var(--cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-link:hover {
  opacity: 0.6;
}

.social-icon {
  width: 64px;
  height: 64px;
}

/* Thin terracotta stripe at the bottom of the social section
   (visible in the mockup, separating social from contact) */
.terracotta-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: var(--terracotta);
}

/* -----------------------------------------------
   11. CONTACT SECTION — Email icon
----------------------------------------------- */
.contact-link {
  color: var(--cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-link:hover {
  opacity: 0.6;
}

.contact-icon {
  width: 72px;
  height: auto;
}

/* Remove padding from music section so image is truly full-bleed */
#music {
  padding: 0;
}

/* -----------------------------------------------
   12. RESPONSIVE TWEAKS
   On small screens (phones), reduce some spacing.
----------------------------------------------- */
@media (max-width: 600px) {
  .photo-strip {
    height: 30vh;
  }

  .platform-links {
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 280px;
  }

  .platform-icon {
    height: 28px;
  }
}

/* -----------------------------------------------
   13. ANIMATIONS
----------------------------------------------- */

@keyframes logoEntrance {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* Scroll-triggered fade in */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* Scroll cue in hero */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  font-size: 1.4rem;
  opacity: 0.45;
  animation: bounce 2.2s ease-in-out infinite;
  animation-delay: 1.2s;
  user-select: none;
  pointer-events: none;
}

/* Dark gradient on music section so Spotify reads over the photo */
.music-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(to bottom, rgba(38, 51, 64, 0.72) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------------------------
   14. FAREWELL SECTION — Full-bleed closing photo
----------------------------------------------- */
#farewell {
  padding: 0;
}

.farewell-content {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

.farewell-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.farewell-overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 51, 64, 0.42);
  pointer-events: none;
}

.farewell-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.farewell-text .tagline {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .logo-img    { animation: none; }
  .scroll-cue  { animation: none; }
  .fade-in     { opacity: 1; transition: none; }
}