/* ── HERO ─────────────────────────────────────────────────────── */
/*
  FILE GUIDE: home.css

  What this controls:
  - index.php only: home hero, hero background slideshow, logo reveal styling,
    division cards, and manifesto CTA.

  How to change it:
  - Hero image sizing/crops: edit .hero__artwork-slide or per-slide variables in index.php.
  - Division card layout: edit the DIVISIONS section.
  - Home bottom CTA: edit the MANIFESTO + CTA section.
*/

.hero {
  min-height: var(--viewport-height);
  display: flex; flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  background: var(--ink); /* dark base so cream body never bleeds through */
}

/* Birmingham drone footage — mouse-scrubbed background */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}

/* The scene is the element we translate on scroll */
.hero__bg-scene {
  position: absolute;
  inset: -40px;
  width: auto; height: auto;
  will-change: transform;
}

.hero__artwork-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-img) var(--hero-position, center) / var(--hero-size, cover) no-repeat;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.035);
  will-change: clip-path;
}

.hero__artwork-slide.is-active {
  z-index: 3;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.hero__artwork-slide.is-entering {
  z-index: 3;
  transform: scale(1);
  animation: hero-artwork-wipe-forward 1.05s var(--ease) forwards;
}

.hero__artwork-slide.is-previous {
  z-index: 2;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

@keyframes hero-artwork-wipe-forward {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.hero__bg-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(16,16,17,.05), rgba(16,16,17,.34) 62%),
    linear-gradient(to bottom, rgba(16,16,17,.42) 0%, rgba(16,16,17,.1) 32%, rgba(16,16,17,.45) 100%);
}

/* Centre logo block */
.hero__center {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Orange logo via CSS mask ─────────────────────────────────── */
/* The logo image is used as a mask so we can paint it any colour  */
.hero__logo-mask {
  overflow: visible;
  width: clamp(420px, 68vw, 1000px);
  padding: .75rem 1.15rem 1rem;
  margin: -.75rem -1.15rem -1rem;
  /* clip-path wipe: starts fully hidden (right wall at 0%), reveals left→right */
  clip-path: inset(0 calc(100% + 1.15rem) -1.25rem -1.15rem);
  will-change: clip-path;
}
.hero__logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(3px 5px .55px rgba(0,0,0,.58))
    drop-shadow(8px 14px 18px rgba(0,0,0,.36));
}

.hero__logo-orange {
  display: none;
}

.hero__logo-shadow-soft {
  display: none;
}

/* subtitle row */
.hero__sub {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  /* letter-spacing is animated by GSAP — allow transitions */
  will-change: letter-spacing, opacity, transform;
}
.hero__sub-inner {
  font-size: clamp(.75rem, 1.3vw, .95rem);
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(247,242,233,.85);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
.hero__sub-inner:hover,
.hero__sub-inner:focus-visible {
  color: #fff;
  opacity: 1;
}
.hero__sub-sep { color: rgba(247,242,233,.35); }

/* footer bar */
.hero__footer {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 3vw, 3rem);
  /* border removed — was creating a hard visual cut across the video */
}
.hero__view-work {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cream); opacity: 0;
  border-bottom: 1px solid rgba(247,242,233,.25); padding-bottom: 2px;
  transition: color .25s, border-color .25s, gap .3s var(--ease);
}
.hero__view-work svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.hero__view-work:hover { color: var(--accent-orange); border-color: var(--accent-orange); gap: .9rem; }
.hero__view-work:hover svg { transform: translate(3px,-3px); }

.hero__scroll-cue { display: none; }
.hero__scroll-line {
  width: 1px; height: 48px; background: rgba(247,242,233,.15);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset: 0; background: var(--accent-orange);
  transform: translateY(-100%);
  animation: scroll-line 2s ease-in-out infinite 1.5s;
}
@keyframes scroll-line {
  0%  { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100%{ transform: translateY(100%); }
}

/* ── DIVISIONS ─────────────────────────────────────────────────── */
.divisions {
  position: relative;
  z-index: 3;
  isolation: isolate;
  margin-top: 0;
  background: var(--site-dark-bg);
  padding: 6rem clamp(1.5rem, 5vw, 5rem) 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-radius: 0;
  box-shadow: none;
}

/* Section header */
.divisions__header {
  display: flex; flex-direction: column; gap: .4rem;
}
.divisions__title {
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .95;
  color: var(--ink);
}

/* Cards row */
.divisions__cards {
  --cards-start-y: -18rem;
  --cards-scroll-y: 0px;
  position: relative;
  z-index: 4;
  display: flex;
  gap: clamp(0.85rem, 1.9vw, 1.35rem);
  align-items: stretch;
  justify-content: center;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  transform: translateY(calc(var(--cards-start-y) + var(--cards-scroll-y)));
  will-change: transform;
}

.division {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  height: clamp(460px, calc(var(--viewport-height) * .58), 720px);
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.8rem, 3.5vw, 3rem);
  text-decoration: none;
  color: var(--cream);
}

/* ── media layer ── */
.division__media {
  position: absolute; inset: 0; z-index: 0;
}

/* Static image — always visible, slight scale-up on hover */
.division__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 1.2s var(--ease);
  will-change: transform;
  z-index: 1;
}
.division:hover .division__img { transform: scale(1.04); }

/* Video — sits above image, revealed via clip-path wipe on hover */
.division__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--ease);
  will-change: clip-path;
}
.division:hover .division__video { clip-path: inset(0 0% 0 0); }

/* ── overlay ── */
.division__overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    to top,
    rgba(29,29,29,.85) 0%,
    rgba(29,29,29,.3)  50%,
    rgba(29,29,29,.1)  100%
  );
  transition: background .6s;
}
.division:hover .division__overlay {
  background: linear-gradient(
    to top,
    rgba(29,29,29,.92) 0%,
    rgba(29,29,29,.45) 55%,
    rgba(29,29,29,.18) 100%
  );
}

/* ── content ── */
.division__inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  gap: .5rem;
}
.division__label-wrap { overflow: hidden; }
.division__label {
  font-family: var(--disp);
  font-size: clamp(2.6rem, 4.1vw, 5.5rem);
  line-height: .92; letter-spacing: -.035em;
  display: block;
  color: var(--cream);
  transition: color .35s var(--ease);
}
.division:hover .division__label { color: var(--accent-orange); }
.division--games:hover .division__label { color: var(--accent-blue); }

.division__tags {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(247,242,233,.5);
}

/* Explore CTA — absolutely pinned so both cards align identically */
.division__cta {
  position: absolute;
  bottom: clamp(1.8rem, 3.5vw, 3rem);
  right: clamp(1.8rem, 3.5vw, 3rem);
  z-index: 5;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-orange);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease), letter-spacing .45s var(--ease);
  transform: translate(4px, 4px);
}
/* Arrow clip wrapper also used here */
.division__cta .btn__icon-wrap { overflow: hidden; display: inline-flex; }
.division:hover .division__cta { opacity: 1; transform: translate(0, 0); letter-spacing: .12em; }
.division--games .division__cta { color: var(--accent-blue); }

/* Inset border reveal on hover — all four sides bloom simultaneously */
.division {
  box-shadow: inset 0 0 0 0px var(--accent-orange);
  transition: box-shadow .55s var(--ease);
}
.division:hover { box-shadow: inset 0 0 0 3px var(--accent-orange); }
.division--games { box-shadow: inset 0 0 0 0px var(--accent-blue); }
.division--games:hover { box-shadow: inset 0 0 0 3px var(--accent-blue); }

/* Division card redesign */
.division__media,
.division__overlay,
.division__label-wrap {
  display: none;
}

.division {
  flex: 0 1 clamp(280px, 29vw, 430px);
  justify-content: flex-end;
  align-items: stretch;
  color: var(--cream);
  background: var(--site-dark-bg-strong);
  border: 0;
  box-shadow: none;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  isolation: isolate;
  height: clamp(520px, 47vw, 740px);
  min-height: 520px;
  padding: 0;
  will-change: clip-path, transform;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}

.division::before {
  display: none;
}

.division__surface {
  display: none;
}

.division__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  transition: transform .9s var(--ease), filter .9s var(--ease);
}

.division--games .division__image {
  object-position: 80% center;
}

.division__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.03) 30%, rgba(0,0,0,.16) 56%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 20%);
  transition: background .8s var(--ease), backdrop-filter .8s var(--ease), opacity .8s var(--ease);
  backdrop-filter: blur(0px);
}

.division:hover {
  transform: none;
  box-shadow: none;
}

.division:hover .division__scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.20) 34%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.76) 100%),
    rgba(18,18,18,.26);
  backdrop-filter: blur(8px);
}

.division:hover .division__image {
  transform: scale(1.065);
  filter: saturate(1.05) contrast(1.02);
}

.division__inner {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.25rem, 2vw, 1.75rem);
  text-align: center;
}

.division__eyebrow,
.division__tags,
.division__cta {
  display: none;
}

.division__label {
  display: block;
  color: var(--cream);
  font-size: clamp(2.25rem, 3.75vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .95;
  margin: 0 auto;
  max-width: 92%;
  overflow-wrap: normal;
  white-space: nowrap;
  text-shadow: 0 5px 22px rgba(0,0,0,.34);
  transition: color .45s var(--ease), text-shadow .45s var(--ease);
}

.division--hc .division__label,
.division--interactive .division__label {
  font-size: clamp(2rem, 3.15vw, 3.35rem);
}

.division:hover .division__label {
  text-shadow: 0 4px 16px rgba(0,0,0,.28);
}

.division--anim:hover .division__label {
  color: #d1574e;
}

.division--games:hover .division__label {
  color: #6dbb5d;
}

.division--hc:hover .division__label,
.division--interactive:hover .division__label {
  color: #73a3e2;
}

/* ── MANIFESTO + CTA (merged section) ──────────────────────── */
.manifesto-cta {
  padding-block: clamp(5rem, 11vw, 9rem);
  background: linear-gradient(180deg, rgba(29,29,29,.94) 0%, #1d1d1d 100%);
  border-top: 2px solid rgba(247,242,233,.08);
}
.manifesto-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(3rem, 6vw, 6rem);
}
.manifesto-cta__text-col {
  display: flex; flex-direction: column; gap: 2rem;
}
.manifesto__text {
  font-family: var(--disp);
  font-size: clamp(2.2rem, 4.5vw, 5.5rem);
  line-height: .98; letter-spacing: -.03em;
  color: var(--cream);
  max-width: 22ch;
}
/* words are split and animated by JS */
.manifesto__text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.manifesto__text .word.visible { opacity: 1; transform: translateY(0); }

.manifesto__link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(247,242,233,.45);
  border-bottom: 1px solid rgba(247,242,233,.2); padding-bottom: 2px;
  transition: color .25s, border-color .25s, gap .3s var(--ease);
  opacity: 0; transform: translateY(10px);
}
.manifesto__link.visible { opacity: 1; transform: translateY(0); transition: opacity .6s var(--ease) .4s, transform .6s var(--ease) .4s, color .25s, border-color .25s, gap .3s var(--ease); }
.manifesto__link svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.manifesto__link:hover { color: var(--accent-orange); border-color: var(--accent-orange); gap: .9rem; }
.manifesto__link:hover svg { transform: translate(3px,-3px); }

.manifesto-cta__action {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem;
  opacity: 0; transform: translateY(20px);
}
.cta-block__note {
  font-size: .8rem; line-height: 1.7;
  color: rgba(247,242,233,.35); text-align: right;
}

body.home-page .manifesto-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vh, 4rem);
  background: var(--cream);
  border-top: 1px solid rgba(16,16,17,.08);
}

body.home-page .manifesto-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,242,233,.06) 0, rgba(247,242,233,.06) 1px, transparent 1px, transparent 120px);
  opacity: .22;
  pointer-events: none;
}

body.home-page .manifesto-cta .container,
body.home-page .footer .container {
  position: relative;
  z-index: 1;
}

body.home-page .manifesto-cta__inner {
  grid-template-columns: minmax(0, 38rem) 15rem;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.25rem);
  width: min(100%, 58rem);
  margin-inline: auto;
}

body.home-page .manifesto-cta__text-col {
  gap: 1.35rem;
}

body.home-page .manifesto__text {
  font-size: clamp(2.2rem, 3.15vw, 3.55rem);
  line-height: .94;
  letter-spacing: -.045em;
  max-width: 19ch;
  color: var(--ink);
}

body.home-page .manifesto__link {
  width: min(100%, 52rem);
  justify-content: flex-start;
  color: rgba(16,16,17,.58);
  border-bottom: 0;
  padding-bottom: .45rem;
  margin-bottom: 1.5rem;
}

body.home-page .manifesto__link:hover {
  color: var(--theme);
}

body.home-page .manifesto-cta__action {
  align-items: flex-start;
  justify-self: start;
  gap: .8rem;
  padding-top: 0;
}

body.home-page .manifesto-cta__action .btn {
  min-width: 15rem;
  justify-content: center;
  white-space: nowrap;
}

body.home-page .cta-block__note {
  max-width: 19ch;
  font-size: .74rem;
  line-height: 1.65;
  text-align: left;
  color: rgba(16,16,17,.48);
}

@media (max-width: 640px) {
  .hero {
    min-height: 100vh;
    min-height: 100lvh;
    margin-top: calc(env(safe-area-inset-top, 0px) * -1);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .hero__bg {
    inset: calc(env(safe-area-inset-top, 0px) * -1) 0 calc(env(safe-area-inset-bottom, 0px) * -1);
  }

  .manifesto-cta__inner {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .manifesto-cta__action { align-items: flex-start; }
  .cta-block__note { text-align: left; }

  body.home-page .manifesto__text {
    max-width: 9ch;
  }

}
/* keep the work-card marquee keyframe */
@keyframes ticker-roll { from{transform:translateX(0)} to{transform:translateX(-33.333%)} }