/* Cinematic switcher hero — homepage only.
   Fixed-composition scaling via one unit (--hu), same idea as a print layout:
   every length is N * var(--hu) so the whole thing scales as one piece. */
.cine-hero {
  --hu: clamp(0.62px, min(calc(100vw / 1440), calc(100vh / 760)), 1.05px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-navy);
  color: #fff;
}

/* Backdrop — real road/transport photo with a navy scrim for legibility,
   in place of the earlier abstract dot texture. */
.cine-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-image: url('/assets/img/hero-truck.jpg');
  background-size: cover;
  background-position: center 30%;
}
.cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Flat, uniform scrim (not a vignette) so contrast is consistent everywhere,
     including under the edge-cropped icon labels. */
  background: rgba(2, 28, 51, 0.8);
}

.cine-copy {
  position: relative;
  z-index: 3;
  max-width: calc(760 * var(--hu));
  margin: 0 auto;
  padding: calc(96 * var(--hu)) calc(24 * var(--hu)) calc(64 * var(--hu));
  text-align: center;
}

.cine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--hu));
  font-family: var(--font-body);
  font-size: calc(15 * var(--hu));
  font-weight: 700;
  letter-spacing: calc(1 * var(--hu));
  color: var(--color-accent);
}
.cine-eyebrow::before,
.cine-eyebrow::after {
  content: '';
  width: calc(20 * var(--hu));
  height: 2px;
  background: var(--color-accent);
}

.cine-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(120 * var(--hu));
  line-height: 0.95;
  letter-spacing: calc(1 * var(--hu));
  margin: calc(18 * var(--hu)) 0 0;
  color: #fff;
}

.cine-rule {
  width: calc(90 * var(--hu));
  height: calc(4 * var(--hu));
  border-radius: calc(2 * var(--hu));
  background: var(--color-accent);
  margin: calc(22 * var(--hu)) auto 0;
}

.cine-lede {
  font-size: calc(18 * var(--hu));
  line-height: calc(28 * var(--hu));
  color: var(--color-on-dark-muted);
  margin: calc(22 * var(--hu)) auto 0;
  max-width: calc(520 * var(--hu));
  min-height: calc(56 * var(--hu));
}

.cine-cta-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(40 * var(--hu));
  height: calc(64 * var(--hu));
}

.cine-cta {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(58 * var(--hu));
  padding: 0 calc(34 * var(--hu));
  border-radius: calc(29 * var(--hu));
  background: var(--color-accent);
  box-shadow: 0 calc(10 * var(--hu)) calc(24 * var(--hu)) rgba(0, 0, 0, 0.3);
  color: #fff;
  font-weight: 700;
  font-size: calc(16 * var(--hu));
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.cine-cta:hover { transform: translateY(-2px); background: var(--color-accent-dark); }

.cine-side {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: calc(180 * var(--hu));
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.4s var(--transition-base);
}
.cine-side:hover { transform: translateY(-50%) scale(1.04); }
.cine-side:active { transform: translateY(-50%) scale(0.98); }
.cine-side-l { left: calc(16 * var(--hu)); }
.cine-side-r { right: calc(16 * var(--hu)); }

.cine-side svg { display: none; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35)); }
.cine-side svg.is-shown { display: block; }

.cine-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  font-family: var(--font-heading);
  font-size: calc(14 * var(--hu));
  letter-spacing: calc(2 * var(--hu));
  text-transform: uppercase;
  color: var(--color-on-dark);
  white-space: nowrap;
}
.cine-label-l { left: calc(212 * var(--hu)); }
.cine-label-r { right: calc(212 * var(--hu)); }

/* ---------- Entrance animation (runs once, then removed) ---------- */
.cine-mask { display: block; overflow: hidden; }
.cine-line { display: block; }
@keyframes cineReveal { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes cineRise { from { opacity: 0; transform: translateY(var(--rise, 10px)); } to { opacity: 1; transform: none; } }
@keyframes cineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cineFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cine-hero.anim .cine-backdrop,
.cine-hero.anim .cine-eyebrow,
.cine-hero.anim .cine-lede,
.cine-hero.anim .cine-cta,
.cine-hero.anim .cine-side,
.cine-hero.anim .cine-label { opacity: 0; }
.cine-hero.anim .cine-line { transform: translateY(112%); }
.cine-hero.anim .cine-rule { transform: scaleX(0); }

.cine-hero.anim.play .cine-backdrop { animation: cineFadeIn 1.4s var(--transition-base) both; }
.cine-hero.anim.play .cine-eyebrow { animation: cineRise 0.6s var(--transition-base) 0.15s both; }
.cine-hero.anim.play .cine-title .cine-line { animation: cineReveal 0.85s cubic-bezier(.16,1,.3,1) 0.28s both; }
.cine-hero.anim.play .cine-rule { animation: cineDraw 0.6s cubic-bezier(.16,1,.3,1) 0.62s both; }
.cine-hero.anim.play .cine-lede { --rise: 12px; animation: cineRise 0.6s var(--transition-base) 0.7s both; }
.cine-hero.anim.play .cine-cta { --rise: 8px; animation: cineRise 0.6s var(--transition-base) 0.86s both; }
.cine-hero.anim.play .cine-side-l { animation: cineRise 0.6s var(--transition-base) 0.95s both; }
.cine-hero.anim.play .cine-side-r { animation: cineRise 0.6s var(--transition-base) 1.0s both; }
.cine-hero.anim.play .cine-label-l { animation: cineRise 0.6s var(--transition-base) 1.05s both; }
.cine-hero.anim.play .cine-label-r { animation: cineRise 0.6s var(--transition-base) 1.1s both; }


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cine-title { font-size: calc(150 * var(--hu)); }
  .cine-side { width: calc(120 * var(--hu)); }
  .cine-side-l { left: calc(8 * var(--hu)); }
  .cine-side-r { right: calc(8 * var(--hu)); }
  .cine-label-l { left: calc(140 * var(--hu)); }
  .cine-label-r { right: calc(140 * var(--hu)); }
}
@media (max-width: 640px) {
  .cine-hero { --hu: clamp(0.7px, min(calc(100vw / 720), calc(100vh / 700)), 1.1px); }
  .cine-copy { padding: calc(64 * var(--hu)) calc(20 * var(--hu)) calc(48 * var(--hu)); }
  .cine-side { display: none; }
  .cine-label { display: none; }
  .cine-title { font-size: calc(90 * var(--hu)); }
  .cine-lede { font-size: calc(16 * var(--hu)); }
}