/* ============================================================
   GGCIL Cinematic Hero
   Layered, browser-native "cinematic" effect over the
   forest-footprint image. No video file required.
   ============================================================ */

.cine {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #07140c;
  display: flex;
  align-items: center;
}

/* --- layer: the photo, slow drone push-in + micro rotation --- */
.cine-photo {
  position: absolute; inset: -6% -6% -6% -6%;
  background: url("../assets/hero.jpg") center 38% / cover no-repeat;
  transform-origin: 58% 52%;
  animation: cineZoom 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cineZoom {
  0%   { transform: scale(1.12) rotate(0deg) translateY(0); }
  100% { transform: scale(1.22) rotate(2.2deg) translateY(-1.5%); }
}

/* --- layer: cinematic colour grade + vignette --- */
.cine-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 58% 45%, rgba(8,26,15,0) 40%, rgba(6,18,11,0.55) 100%),
    linear-gradient(180deg, rgba(8,22,14,0.30) 0%, rgba(8,22,14,0) 28%, rgba(8,22,14,0) 60%, rgba(6,16,10,0.75) 100%);
  pointer-events: none;
}

/* --- layer: sun rays breaking through (top-left light source) --- */
.cine-sun {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 50% at 30% 8%, rgba(255,233,170,0.55), rgba(255,233,170,0) 60%),
    conic-gradient(from 200deg at 30% 0%, rgba(255,240,200,0) 0deg, rgba(255,240,200,0.18) 12deg, rgba(255,240,200,0) 24deg, rgba(255,240,200,0) 40deg, rgba(255,240,200,0.12) 52deg, rgba(255,240,200,0) 64deg);
  opacity: 0.0;
  animation: sunIn 6s ease forwards 1.2s, sunFlicker 9s ease-in-out infinite 7s;
}
@keyframes sunIn { to { opacity: 0.9; } }
@keyframes sunFlicker { 0%,100% { opacity: 0.9; } 50% { opacity: 0.7; } }

/* --- layer: drifting fog (two layers, opposite directions) --- */
.cine-fog {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0.6;
  background-repeat: repeat;
  background-size: 1100px 700px;
  mix-blend-mode: screen;
}
.cine-fog.f1 {
  background-image:
    radial-gradient(closest-side, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0) 70%);
  background-position: 10% 30%, 60% 70%;
  animation: fogDrift1 60s linear infinite;
}
.cine-fog.f2 {
  background-image:
    radial-gradient(closest-side, rgba(220,235,225,0.14), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(220,235,225,0.10), rgba(255,255,255,0) 70%);
  background-position: 80% 20%, 30% 80%;
  animation: fogDrift2 85s linear infinite;
  opacity: 0.5;
}
@keyframes fogDrift1 { from { transform: translate3d(-4%,0,0); } to { transform: translate3d(8%,-3%,0); } }
@keyframes fogDrift2 { from { transform: translate3d(6%,2%,0); } to { transform: translate3d(-8%,-2%,0); } }

/* --- layer: floating particle canvas --- */
#cine-particles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* --- layer: footprint -> glowing network overlay --- */
#cine-network { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 2.5s ease; }
#cine-network.show { opacity: 1; }

/* --- intro mist wipe (clouds fade in then clear) --- */
.cine-intro {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, #cdd8d0, #aebcb1);
  animation: introClear 3.4s ease forwards;
}
@keyframes introClear { 0% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } }

/* --- content / copy --- */
.cine .wrap { position: relative; z-index: 7; width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.cine-copy { max-width: 640px; color: #fff; text-shadow: 0 3px 26px rgba(4,14,8,0.6); }

.cine-eyebrow {
  font-family: var(--body); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--gold-400);
  opacity: 0; transform: translateY(14px); animation: rise 1s ease forwards 3.4s;
}
.cine h1 {
  font-family: var(--display); font-weight: 600; line-height: 1.04;
  font-size: clamp(2.8rem, 7vw, 5.4rem); color: #fff; margin: 10px 0 6px;
}
.cine h1 .l1 { display: block; opacity: 0; transform: translateY(22px); animation: rise 1.1s cubic-bezier(.2,.8,.2,1) forwards 3.7s; }
.cine h1 .l2 { display: block; color: var(--gold-400); opacity: 0; transform: translateY(22px); animation: rise 1.1s cubic-bezier(.2,.8,.2,1) forwards 4.15s; }
.cine .slogan {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: rgba(255,255,255,0.9); font-weight: 400; margin-top: 14px;
  opacity: 0; transform: translateY(16px); animation: rise 1s ease forwards 4.7s;
}
.cine .slogan b { color: #a9d18a; font-weight: 600; }
.cine-rule { width: 0; height: 3px; background: linear-gradient(90deg, var(--gold-400), transparent); margin: 22px 0; border-radius: 2px; animation: ruleGrow 1.2s ease forwards 4.6s; }
@keyframes ruleGrow { to { width: 150px; } }
.cine-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; opacity: 0; transform: translateY(16px); animation: rise 1s ease forwards 5.1s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* scroll cue */
.cine-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 7;
  color: rgba(255,255,255,0.8); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: rise 1s ease forwards 5.6s;
}
.cine-cue .m { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.6); border-radius: 14px; position: relative; }
.cine-cue .m::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; top: 6px; } 30% { opacity: 1; } 100% { opacity: 0; top: 18px; } }

@media (max-width: 680px) {
  .cine { min-height: 92vh; }
  .cine-photo { background-position: center 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-photo, .cine-fog, .cine-sun, .cine-intro { animation: none !important; }
  .cine-photo { transform: scale(1.1); }
  .cine-intro { display: none; }
  .cine-eyebrow, .cine h1 .l1, .cine h1 .l2, .cine .slogan, .cine-actions, .cine-cue { opacity: 1; transform: none; animation: none; }
  .cine-rule { width: 150px; animation: none; }
  #cine-network { opacity: 1; }
}