/* ==========================================================
   Homepage redesign — layout inspired by reference, using the
   existing dark + green theme tokens and fonts from app.css.
   Loaded only on index.php so no other page is affected.
   ========================================================== */

/* ---------- Hero ---------- */
.home-hero { padding: 70px 0 60px; background: radial-gradient(circle at 15% 10%, rgba(255,90,31,0.14), transparent 45%), linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)); }

/* When the admin sets a hero background image (via inline style on the
   section, from index.php), it always sits under a fixed dark overlay —
   regardless of light/dark mode — so the hero copy stays legible either way. */
.home-hero.has-bg-image { position: relative; overflow: hidden; }

/* The photo itself lives on ::before so it can be scaled independently —
   a slow, continuous zoom in/out (Ken Burns effect) so the hero doesn't
   feel static. ::after holds the fixed darkening overlay so it stays
   crisp and doesn't zoom/shift along with the photo. Both sit behind the
   actual hero content (.container), which is lifted to z-index: 2. */
.home-hero.has-bg-image::before,
.home-hero.has-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero.has-bg-image::before {
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  animation: hero-ken-burns 22s ease-in-out infinite alternate;
  will-change: transform;
}
.home-hero.has-bg-image::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(13,15,20,0.72), rgba(13,15,20,0.9));
}
.home-hero.has-bg-image > .container { position: relative; z-index: 2; }

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero.has-bg-image::before { animation: none; }
}

.home-hero.has-bg-image .badge,
.home-hero.has-bg-image h1,
.home-hero.has-bg-image p.lead { color: #fff; }
.home-hero.has-bg-image .badge { background: rgba(255,90,31,0.25); color: #ffd7c2; }
.home-hero.has-bg-image p.lead { color: rgba(255,255,255,0.82); }

.home-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.home-hero h1 { font-size: 42px; line-height: 1.18; margin-bottom: 16px; }
.home-hero h1 .accent { color: var(--color-gold-light); }
.home-hero p.lead { font-size: 16px; max-width: 480px; }
.home-hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.home-hero-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-hero-visual .hv-card { border-radius: var(--radius); border: 1px solid var(--color-border); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow); }
.home-hero-visual .hv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero-visual .hv-tall { grid-row: span 2; aspect-ratio: 3/4; }
.home-hero-visual .hv-short { aspect-ratio: 4/3; }
.home-hero-visual .hv-badge { position: absolute; top: 14px; left: 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--color-gold-light); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 32px; }
}

/* ---------- Partners strip ---------- */
.partners-strip { padding: 40px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); overflow: hidden; }
.partners-strip .eyebrow-center { text-align: center; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; margin-bottom: 24px; }

/* Continuous marquee: .partners-track contains the logo list rendered
   twice back to back (index.php). Animating exactly -50% moves the track
   by the width of one full copy, so copy #2 lands precisely where copy #1
   started — a seamless, gapless, pauseless loop with no snap or fade.
   IMPORTANT: spacing between logos is done with margin-right on each
   .partner-logo, not `gap` on the track. With `gap`, the boundary between
   the two copies gets one fewer separator than the copies contain
   internally, so -50% lands half a gap short of the true copy width and
   the loop visibly skips on every cycle. Per-item margins make every
   logo (including the last one of each copy) a self-contained unit of
   identical width, so halving the track width is always exact. */
.partners-marquee { overflow: hidden; width: 100%; }
.partners-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  animation: partners-marquee-scroll 32s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
@keyframes partners-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Respect reduced-motion preferences without breaking the layout. */
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

.partners-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; opacity: .85; }
.partners-row span { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-text-muted); letter-spacing: .5px; }

/* Admin-uploaded partner logos: a fixed, contained box so an
   oversized or odd-aspect-ratio upload never scales past its neighbors. */
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 64px; flex: 0 0 auto; margin-right: 64px;
}
.partner-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
/* Base (dim/monochrome) state. A small script continuously measures each
   logo's distance from the horizontal center of the strip as the marquee
   scrolls and sets --reveal (0 = centered/full color, 1 = far/dim mono)
   every frame, so color washes in and back out smoothly as each logo
   passes through the middle — no hover needed, no discrete steps. */
.partner-logo {
  --reveal: 1;
  filter: grayscale(var(--reveal));
  opacity: calc(1 - (var(--reveal) * 0.45));
}

/* ---------- Process cards (Investment / Monetization / Automation / Discovery) ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 24px; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.process-card:hover { transform: translateY(-4px); border-color: var(--color-gold); }
.process-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,90,31,0.12); color: var(--color-gold-light); display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 18px; }
.process-card h3 { font-size: 17px; margin-bottom: 8px; }
.process-card p { font-size: 14px; margin: 0; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- IP / split feature section ---------- */
.split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split-feature .split-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow); aspect-ratio: 4/3; }
.split-feature .split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-feature .split-text .eyebrow { display: block; margin-bottom: 10px; }
.split-feature .split-text h2 { font-size: 30px; margin-bottom: 16px; }
.split-feature.reverse { grid-template-columns: 1fr 1fr; }
.split-feature.reverse .split-media { order: 2; }
@media (max-width: 900px) {
  .split-feature, .split-feature.reverse { grid-template-columns: 1fr; }
  .split-feature.reverse .split-media { order: 0; }
}

/* ---------- Services list (icon + label rows) ---------- */
.services-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.service-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px 18px; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.service-item:hover { transform: translateY(-4px); border-color: var(--color-gold); }
.service-item .service-icon { font-size: 22px; color: var(--color-gold-light); margin-bottom: 14px; }
.service-item h4 { font-size: 14px; margin: 0; color: var(--color-heading); font-weight: 600; }
@media (max-width: 900px) { .services-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .services-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- CTA search banner ---------- */
.cta-banner { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light)); border-radius: var(--radius); padding: 50px 40px; text-align: center; color: #0d1410; }
.cta-banner .eyebrow { color: rgba(13,20,16,0.7); }
.cta-banner h2 { color: #0d1410; font-size: 28px; margin-bottom: 10px; }
.cta-banner p { color: rgba(13,20,16,0.75); max-width: 560px; margin: 0 auto 24px; }
.cta-banner .btn-dark { background: #0d1410; color: #fff; }
.cta-banner .btn-dark:hover { filter: brightness(1.2); }

/* ---------- Portfolio grid ---------- */
.portfolio-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 16/9; }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.portfolio-card:hover img { transform: scale(1.05); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.15) 55%, transparent 80%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.portfolio-overlay .badge { align-self: flex-start; margin-bottom: 10px; }
.portfolio-overlay h3 { font-size: 20px; margin-bottom: 4px; color: #fff; }
.portfolio-overlay p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.75); }

/* ---------- Newsletter ---------- */
.newsletter-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; overflow: hidden; }
.newsletter-box h3 { margin: 0 0 6px; font-size: 20px; }
.newsletter-box p { margin: 0; font-size: 14px; }
.newsletter-form { display: flex; gap: 10px; flex: 0 0 auto; width: 380px; max-width: 100%; min-width: 0; }
.newsletter-form input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-heading); font-size: 14px; }
.newsletter-form input:focus { outline: none; border-color: var(--color-gold); }
/* Flex items default to min-width/flex-basis "auto", which lets the
   submit button's intrinsic size force the row wider than its card on
   narrow screens. Pin it to its content size so it never stretches or
   overflows, and stack the box vertically once things get tight. */
.newsletter-form .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .newsletter-box { flex-direction: column; align-items: stretch; text-align: left; padding: 28px 22px; }
  .newsletter-form { width: 100%; }
}

/* ---------- Section eyebrow left align variant ---------- */
.section-head-left { text-align: left; max-width: 640px; margin: 0 0 44px; }
.section-head-left .eyebrow { color: var(--color-gold); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; }

/* ---------- Upcoming Trailer ---------- */
.trailer-head { margin-bottom: 36px; }
.trailer-production-logo {
  display: block;
  max-height: 56px;
  width: auto;
  margin: 0 auto 16px;
}
.trailer-title {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  margin: 6px 0 10px;
  color: var(--color-heading);
}
.trailer-tagline {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-gold-light);
  margin: 0 0 14px;
}
.trailer-description {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto 18px;
}
.trailer-release-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
}
.trailer-credit {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 14px 0 0;
  font-style: italic;
}

.trailer-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/9;
  background: #000;
  box-shadow: var(--shadow);
}
.trailer-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trailer-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
}
.trailer-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(13,14,17,0.65);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
}
.trailer-btn:hover { background: var(--color-gold); color: #17181d; transform: scale(1.06); }
@media (max-width: 640px) {
  .trailer-controls { right: 12px; bottom: 12px; gap: 8px; }
  .trailer-btn { width: 40px; height: 40px; font-size: 15px; }
}

/* ---------- Trailer floating mini-player (appears once the visitor
   scrolls past the section while it's playing) ---------- */
.trailer-pip {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 300px;
  max-width: calc(100vw - 40px);
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  border: 1px solid var(--color-border);
  z-index: 99999;
  animation: trailer-pip-in .25s ease;
}
.trailer-pip[hidden] { display: none; }
.trailer-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trailer-pip .trailer-controls {
  right: 10px;
  bottom: 10px;
  gap: 6px;
}
.trailer-pip .trailer-btn { width: 34px; height: 34px; font-size: 13px; }
.trailer-pip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(13,14,17,0.75);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}
.trailer-pip-close:hover { background: var(--color-gold); color: #17181d; }
@keyframes trailer-pip-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .trailer-pip { width: 220px; left: 12px; bottom: 12px; }
}