/* ==========================================================================

	SOLARPUNK CSS by SLP and ALDER

   ========================================================================== */

:root {
  /* Colors & surfaces */
  --text: #fff;
  --text-muted: rgba(255, 255, 255, 0.90);
  --panel: rgba(0, 0, 0, 0.25);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* Label/header/footer style */
  --label-track: 0.35em;
  --label-weight: 600;
  --label-size: 0.85rem;
  --label-opacity: 0.92;

  /* Footer label variant */
  --footer-track: 0.22em;
  --footer-weight: 500;
  --footer-size: 0.72rem;

  /* Section title + body sizes (mirrors pasted h1/p) */
  --section-title-size: clamp(1.6rem, 4vw, 3rem);
  --body-size: clamp(1rem, 2.2vw, 1.25rem);
  --body-line: 1.6;

  /* Title tightening (mirrors pasted h1) */
  --title-tracking: -0.02em;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font-main);
  background: #000;
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

/* --- BACKGROUND LAYERS (cross-fade) --- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.bg__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 420ms ease;
  will-change: opacity;
}

/* Replace these with your local images */
.bg__layer--1 {
  background-image: url("../images/phase1.webp");
}
.bg__layer--2 {
  background-image: url("../images/phase2.webp");
}
.bg__layer--3 {
  background-image: url("../images/phase3.webp");
}

/* Slight dark overlay for readability */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
	radial-gradient(1200px 800px at 30% 25%, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.15)),
	linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

/* --- PAGE LAYOUT --- */
.app {
  position: relative;
  z-index: 1;
  min-height: 100%;
}

/* Main title (top) — styled like the pasted header label */
.top-title {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  color: var(--text);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  opacity: var(--label-opacity);
  text-shadow: var(--shadow);
  text-align: center;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Footer line — clickable/selectable */
footer {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  color: var(--text);
  font-weight: var(--footer-weight);
  font-size: var(--footer-size);
  letter-spacing: var(--footer-track);
  text-transform: uppercase;
  opacity: var(--label-opacity);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  text-align: center;

  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* Footer links match text style */
footer a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  pointer-events: auto;
}

footer a:hover {
  text-decoration: underline;
}

/* --- SCROLL SECTIONS --- */
main {
	
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {	
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  justify-items: center;   /* horizontal centering */
  align-content: start;    /* vertical flow from top */
  padding: 44svh 15px 15svh;
}

/* Floating content panel */
.card {
  width: min(3160px, 92vw);
  padding: clamp(18px, 3vw, 34px);
  text-align: center;

  /* Keep main content unclickable/unselectable */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Section title — matches pasted h1 feel */
.card h2 {
  margin: 0 0 16px;
  color: var(--text);
  font-weight: 600;
  font-size: var(--section-title-size);
  letter-spacing: var(--title-tracking);
  text-transform: uppercase;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.1;
}

/* Body copy — matches pasted p */
.card p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-line);
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-inline: auto;
}

/* Links inside the card inherit the exact surrounding style
   (still not clickable because .card has pointer-events: none) */
.card a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.card a:hover {
  text-decoration: underline;
}

.scroll-indicator {
  position: fixed;
  bottom: 30vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  opacity: 0.65;
  transition: opacity 500ms ease;

  pointer-events: none;
}

.scroll-indicator.is-hidden {
  opacity: 0;
}

.scroll-indicator span {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
}

@keyframes drift {
  0%   { transform: translate(-50%, 0) rotate(45deg); }
  50%  { transform: translate(-50%, 6px) rotate(45deg); }
  100% { transform: translate(-50%, 0) rotate(45deg); }
}

.scroll-indicator {
  animation: drift 2.5s ease-in-out infinite;
}

/* ==========================================================================
   Responsive tuning
   - Tablet: soften spacing + widen card a bit
   - Mobile: reduce padding, keep text readable, prevent cramped layout
   ========================================================================== */

/* Tablet and smaller */

@media (max-width: 900px) {
  .section {
    padding: 38svh 15px 15svh; /* slightly less breathing room */
  }

  .card {
    width: min(900px, 92vw);
    padding: 20px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .section {
    padding: 24svh 15px 15svh; /* reduce top/bottom to remove wasted space */
  }

  .top-title {
    top: 18px;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
  }

  footer {
    bottom: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .card {
    width: min(560px, 92vw);
    padding: 18px;
    border-radius: 18px; /* slightly tighter corners on small screens */
  }

  .card h2 {
    font-size: clamp(1.35rem, 7vw, 2.1rem); /* mobile-friendly headline scaling */
  }

  .card p {
    font-size: clamp(1rem, 4.2vw, 1.15rem);
    max-width: 40ch; /* shorter lines feel better on phones */
  }

  .scroll-indicator {
    bottom: 30vh; /* keep it above the footer */
  }
}

/* Shorties */
@media (max-height: 675px) {
  .section {
    padding: 20svh 15px 15svh; /* reduce top/bottom to remove wasted space */
}
}



/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .bg__layer {
    transition: none;
  }
}

/* Small screens: tighten header label similar to pasted stylesheet */
@media (max-width: 480px) {
  .top-title {
    font-size: 0.78rem;
    letter-spacing: 0.28em;
  }
}