/* ============================================================
   Devon Carlson — Scroll Hero Animation ("Day in / Day out")
   Built from Figma: Star → animation section (2522:1432)
   Requires: GSAP + ScrollTrigger (assets/js/hero-animation.js)
   ============================================================ */

/* Design tokens from Figma */
:root {
  --sh-blue-start:   #0075FF;
  --sh-blue-end:     #00E0FF;
  --sh-orange-start: #FFE500;
  --sh-orange-end:   #FFA800;
  --sh-font: var(--font-display, 'Poppins', 'Nunito Sans', sans-serif);
  /* corner squares: 250px @ 858px-tall frame */
  --sh-square: min(29vh, 25vw);
}

.scroll-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #ffffff;
}

.sh-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Header transparency over the hero is handled synchronously in main.js
   (body.page-home .site-header.over-hero), which tracks the colored panels'
   live geometry — so it stays transparent over blue/orange and picks up the
   normal white backdrop once the white stage begins. */

/* ---------- Full-bleed gradient panels ---------- */
.sh-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.sh-panel--blue {
  z-index: 3;
  background: linear-gradient(180deg, var(--sh-blue-start) 0%, var(--sh-blue-end) 100%);
}

.sh-panel--orange {
  z-index: 4;
  background: linear-gradient(180deg, var(--sh-orange-start) 0%, var(--sh-orange-end) 100%);
  /* initial translateY(100%) is applied by GSAP (hero-animation.js);
     visibility guards the flash before JS runs */
  visibility: hidden;
}

.scroll-hero.sh-static .sh-panel--orange { visibility: hidden; }

/* White glow orb — always 72.6% of parent height, centered (per Figma) */
.sh-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 72.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, rgba(217, 217, 217, 0) 100%);
  will-change: transform;
}

/* ---------- Big titles (Poppins SemiBold 140 @ 1508w) ---------- */
.sh-title {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  font-family: var(--sh-font);
  font-weight: 600;
  font-size: min(9.3vw, 16.3vh);
  line-height: 1.5;
  color: #070707;
  white-space: nowrap;
  will-change: transform;
}

.sh-title--dayin { left: 5.2%; }

/* In-panel "Day out": revealed by the rising orange edge (wipe).
   Same start position + x motion as "Day in" so they stay aligned. */
.sh-title--dayout { left: 5.2%; }

/* Stage-level "Day out": takes over after the wipe, drifts right */
.sh-title--dayout-stage {
  left: 32.6%;
  z-index: 5;
  visibility: hidden;
}

/* ---------- Corner squares (250px @ 1508x858) ---------- */
.sh-square {
  position: absolute;
  width: var(--sh-square);
  aspect-ratio: 1;
  will-change: transform;
}

.sh-square--blue {
  z-index: 2;
  left: 7%;
  top: 11.2%;
  background: linear-gradient(180deg, var(--sh-blue-start) 0%, var(--sh-blue-end) 100%);
}

/* Orange square = the shrunken orange panel (animated by JS) */

.sh-square .sh-circle,
.sh-square__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 72.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, rgba(217, 217, 217, 0) 100%);
}

/* ---------- Final: "Building great projects" + clients ---------- */
.sh-final {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

.sh-line {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--sh-font);
  font-weight: 600;
  font-size: min(5.05vw, 8.85vh);
  line-height: 1.5;
  color: #070707;
  white-space: nowrap;
}

/* Final resting spots (frame 112: y 76 / 189 / 352 of 858) */
.sh-line--1 { top: 8.9%; visibility: hidden; }
.sh-line--2 { top: 22%;  visibility: hidden; }

.sh-cursive {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
}

/* ---------- Client logo marquee ---------- */
.sh-marquee {
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  overflow: hidden;
  visibility: hidden;
}

.sh-marquee__track {
  display: flex;
  width: max-content;
  animation: sh-marquee 45s linear infinite;
}

.sh-marquee__track ul {
  display: flex;
  align-items: center;
  gap: 4.5vw;
  padding: 0 2.25vw;
  margin: 0;
  list-style: none;
}

/* Full-colour client logos (same set as TELUS Agriculture page) */
.sh-marquee__track li {
  flex: none;
}

.sh-marquee__track img {
  height: clamp(32px, 7vh, 60px);
  width: auto;
  max-width: none;
}

@keyframes sh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Static fallback (reduced motion / no GSAP) ---------- */
.scroll-hero.sh-static .sh-panel,
.scroll-hero.sh-static .sh-square,
.scroll-hero.sh-static .sh-title--dayout-stage {
  display: none;
}

.scroll-hero.sh-static .sh-line--1,
.scroll-hero.sh-static .sh-line--2,
.scroll-hero.sh-static .sh-marquee {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .sh-marquee__track { animation: none; }
}