/* ============================================================
   IBEC homepage opening — image-led, cinematic sequence
   Hero (approved The Soleil Residences photograph) → statement → image window →
   delivery model → experience.

   Brand palette unchanged. Everything in this file is the static,
   no-JS and reduced-motion resting state; scroll choreography is
   layered on in js/main.js inside the reversible GSAP context.
   Hero overrides use doubled class selectors so they win over the
   legacy .hero rules in styles.css regardless of media query order.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Hero — the finished asset
   ------------------------------------------------------------ */
.hero.hero-cinematic {
  min-height: 100svh;
  padding-top: 0;
  justify-content: flex-start;
  background: var(--ink-950);
  perspective: none;
}

.hero.hero-cinematic .hero-media { overflow: hidden; }

/* The source is 1024px wide: no filter, and no resting upscale,
   so the photograph renders as sharply as it can. Framed from near the
   top of the sky, so the tower sits low in the frame and the type has
   the open sky and water above and beside it. */
.hero.hero-cinematic .hero-media img {
  filter: none;
  transform: none;
  object-position: 50% 10%;
}

/* Left-aligned hierarchy, set lower in the frame. The grade is
   directional: a left band and a pool behind the type block, plus the
   top (navigation) and base (caption) bands. */
.hero.hero-cinematic .hero-scrim {
  background:
    radial-gradient(ellipse 58% 46% at 22% 40%, rgba(6, 13, 24, 0.6) 0%, rgba(6, 13, 24, 0.28) 60%, rgba(6, 13, 24, 0) 100%),
    linear-gradient(90deg, rgba(6, 13, 24, 0.58) 0%, rgba(6, 13, 24, 0.3) 34%, rgba(6, 13, 24, 0) 56%),
    linear-gradient(180deg, rgba(6, 13, 24, 0.8) 0%, rgba(6, 13, 24, 0.5) 12%, rgba(6, 13, 24, 0.14) 28%, rgba(6, 13, 24, 0) 40%),
    linear-gradient(0deg, rgba(6, 13, 24, 0.62) 0%, rgba(6, 13, 24, 0) 24%);
}

.hero.hero-cinematic .hero-content {
  flex: 1;
  justify-content: flex-start;
  padding-top: clamp(9rem, 26vh, 15rem);
  padding-bottom: 2rem;
  padding-right: var(--gutter);
}

/* Over photography the eyebrow uses the brighter brand orange, and it
   wraps within the text column so it never runs out across the bright
   sunset band on the right of the frame. */
.hero.hero-cinematic .eyebrow {
  max-width: 26rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
}

.hero.hero-cinematic .hero-title {
  max-width: 11em;
  margin: 0 0 2.25rem;
  font-size: clamp(2.5rem, 3.9vw + 0.4rem, 4.125rem);
  font-weight: 600;
  line-height: 1.03;
  text-shadow: 0 2px 28px rgba(6, 13, 24, 0.4);
}

.hero.hero-cinematic .hero-actions { gap: 0.75rem; }

/* Over photography the outline button needs its own ground. */
.hero.hero-cinematic .btn-line-light {
  background: rgba(6, 13, 24, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-base {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.hero-caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--white-body);
  font-size: var(--text-caption, 0.8125rem);
  letter-spacing: 0.02em;
}

.hero-caption::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* Scroll cue: a single hairline with a travelling highlight. */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: rgba(242, 246, 250, 0.22);
  transform: translateX(-50%);
}

.hero-cue::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--accent);
  animation: ibec-cue 2.4s var(--ease) infinite;
}

@keyframes ibec-cue {
  0% { transform: translateY(0); }
  70%, 100% { transform: translateY(350%); }
}

html.motion .hero.hero-cinematic .hero-media img { will-change: transform; }

/* ------------------------------------------------------------
   2 · Statement
   ------------------------------------------------------------ */
.statement {
  background: var(--paper);
  padding-block: clamp(5.5rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem);
}

.statement-lead {
  max-width: 23em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.9vw + 1rem, 2.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Word spans created by js/main.js for the scroll light-up. */
.statement-lead .word { transition: none; }

.statement-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.statement-body {
  max-width: 44ch;
  margin: 0;
  font-size: var(--text-lead, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--slate);
}

.statement-disciplines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.statement-disciplines li {
  padding-top: 0.9rem;
  border-top: 1px solid var(--accent);
  color: var(--ink);
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--track-label, 0.08em);
  text-transform: uppercase;
}

.statement-disciplines .sep,
.delivery-stages .sep {
  /* Kept in the source so the approved line reads intact;
     the layout provides the separation visually. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   3 · Image window
   ------------------------------------------------------------ */
.image-window {
  margin: 0;
  background: var(--paper);
}

.image-window-frame {
  position: relative;
  height: clamp(360px, 86vh, 920px);
  overflow: hidden;
  background: var(--navy-900);
}

.image-window-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.image-window figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem 0;
  color: var(--slate);
}

.image-window figcaption::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

html.motion .image-window-frame,
html.motion .image-window-frame img { will-change: transform, clip-path; }

/* ------------------------------------------------------------
   4 · Delivery model
   ------------------------------------------------------------ */
.delivery {
  background: var(--paper);
  padding-block: clamp(5rem, 12vh, 8.5rem) clamp(5rem, 11vh, 8rem);
}

.delivery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.75rem;
}

.delivery-kicker { margin: 0; }

.delivery-title {
  max-width: 14em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6vw + 1.2rem, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}

.delivery-body { max-width: 38rem; }
.delivery-body .lead { margin: 0 0 1.25rem; color: var(--ink); }
.delivery-body p:not(.lead) { margin: 0; color: var(--slate); }

/* Ordered stages — numbering comes from a CSS counter so the approved
   strapline text is unchanged. Each stage owns a segment of the line;
   segments draw in sequence (js/main.js) and rest fully drawn. */
.delivery-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 0;
  margin: clamp(3.5rem, 8vh, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.delivery-stages li {
  position: relative;
  padding: 1.6rem 1.25rem 0 0;
  border-top: 1px solid var(--line);
  counter-increment: stage;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}

.delivery-stages li::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-label, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--track-label, 0.08em);
  font-variant-numeric: tabular-nums;
}

/* Orange segment + node that mark a reached stage. */
.delivery-stages li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--stage-fill, 1));
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}

.delivery-stages[data-stages-ready] li { --stage-fill: 0; }
.delivery-stages[data-stages-ready] li.is-reached { --stage-fill: 1; }

/* ------------------------------------------------------------
   5 · Experience
   ------------------------------------------------------------ */
.experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.experience-copy .section-title { margin-top: 0; }
.experience-copy .experience-note { margin-top: 1.75rem; }

.experience-media { margin: 0; min-width: 0; }

.experience-media-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-850);
}

.experience-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-media figcaption {
  padding-top: 0.9rem;
  color: var(--white-mut);
}

.experience-stats {
  margin-top: clamp(3rem, 7vh, 4.5rem);
}

/* ------------------------------------------------------------
   6 · Showreel — delivered work
   Finished project photography only. Resting state (no JS, reduced
   motion, site motion paused): the first photograph, all four
   phrases stacked and the closing line. js/main.js adds .is-running
   for the timed crossfade; the active progress bar's animation is the
   clock, so pausing the animation pauses the reel.
   ------------------------------------------------------------ */
.showreel {
  --showreel-hold: 6.5s;
  --showreel-fade: 1.6s;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--white-hi);
  background: var(--ink-950);
  --focus: var(--accent);
}

.showreel-media,
.showreel-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.showreel-media { z-index: -2; }

.showreel-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Only the first photograph is laid out at rest, so the lazy images
   behind it are never fetched unless the reel actually runs. */
.showreel-slide + .showreel-slide { display: none; }

.showreel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showreel-grade {
  z-index: -1;
  background: none;
}

.showreel-inner {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  padding-block: 8rem 2.5rem;
}

/* Fixed width: while running the phrases are absolutely positioned,
   so the column must not shrink to its (empty) in-flow content. */
.showreel-copy {
  position: relative;
  isolation: isolate;
  width: min(100%, 52rem);
  text-shadow: 0 2px 18px rgba(6, 13, 24, 0.5);
}

/* Local contrast behind the copy, leaving the photograph clear elsewhere. */
.showreel-copy::before {
  content: "";
  position: absolute;
  inset: -2rem -2.5rem;
  z-index: -1;
  background: rgba(6, 13, 24, 0.76);
  filter: blur(24px);
  pointer-events: none;
}

.showreel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.4vw + 0.75rem, 4.125rem);
  font-weight: 560;
  line-height: 1.08;
  color: var(--white-hi);
}

.showreel-phrase { display: block; }

.showreel-final {
  margin: 1.5rem 0 0;
  color: var(--white-hi);
}

.showreel-base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: clamp(1.25rem, 3.5vh, 2rem);
}

.showreel-caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--white-body);
  font-size: var(--text-caption, 0.8125rem);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(6, 13, 24, 0.6);
  background: rgba(6, 13, 24, 0.72);
  box-shadow: 0 0 16px 12px rgba(6, 13, 24, 0.72);
}

.showreel-caption::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--accent);
}

/* The controls lead the row so the fixed site motion toggle, bottom
   right, never sits on them. */
.showreel-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  order: -1;
}

.showreel-toggle {
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  color: var(--white-hi);
  background: rgba(6, 13, 24, 0.72);
  border: 1px solid var(--white-mut);
  border-radius: var(--r);
  font: 500 0.75rem var(--font-mono);
  cursor: pointer;
}

.showreel-toggle[hidden] { display: none; }

.showreel-progress {
  display: none;
  gap: 6px;
}

.showreel-progress span {
  position: relative;
  width: 32px;
  height: 2px;
  overflow: hidden;
  background: rgba(242, 246, 250, 0.26);
}

.showreel-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Running: crossfade with a slow push, alternating direction. The
   outgoing slide holds full opacity beneath the incoming one, so the
   fade never dips through the dark ground. */
.showreel.is-running .showreel-slide {
  display: block;
  opacity: 0;
  transition: opacity var(--showreel-fade) ease;
}

.showreel.is-running .showreel-slide.is-leaving {
  z-index: 1;
  opacity: 1;
  transition: none;
}

.showreel.is-running .showreel-slide.is-active {
  z-index: 2;
  opacity: 1;
}

.showreel.is-running .showreel-slide.is-active img,
.showreel.is-running .showreel-slide.is-leaving img {
  animation: showreel-push calc(var(--showreel-hold) + var(--showreel-fade) * 2) linear both;
}

.showreel.is-running .showreel-slide:nth-child(even).is-active img,
.showreel.is-running .showreel-slide:nth-child(even).is-leaving img { animation-name: showreel-pull; }

@keyframes showreel-push {
  from { transform: scale(1.02); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

@keyframes showreel-pull {
  from { transform: scale(1.1) translate3d(1.5%, 0, 0); }
  to { transform: scale(1.02); }
}

.showreel.is-running .showreel-progress { display: flex; }
.showreel.is-running .showreel-progress span.is-done::after { transform: scaleX(1); }
.showreel.is-running .showreel-progress span.is-active::after {
  animation: showreel-progress var(--showreel-hold) linear both;
}

@keyframes showreel-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.showreel.is-running.is-paused .showreel-slide img,
.showreel.is-running.is-paused .showreel-progress span::after { animation-play-state: paused; }

/* Running: one phrase at a time, the closing line on the last slide. */
.showreel.is-running .showreel-title {
  position: relative;
  height: 1.15em;
}

.showreel.is-running .showreel-phrase {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.showreel.is-running .showreel-phrase.is-active {
  opacity: 1;
  transform: none;
}

.showreel.is-running .showreel-final {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}

.showreel.is-running.is-complete .showreel-final {
  opacity: 1;
  transform: none;
}

.site-header.over-showreel {
  background: rgba(6, 13, 24, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (min-width: 720.01px) {
  .statement-disciplines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .delivery-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .statement-foot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .statement-disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .delivery-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: 1.5rem;
  }
  /* Kicker spans the row; headline and lead start on the same line. */
  .delivery-kicker { grid-column: 1 / -1; }
  .delivery-title { grid-column: 1; }
  .delivery-body { grid-column: 2; padding-top: 0.45rem; }

  .delivery-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .experience-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* The Soleil Residences source is 1024 x 768. Up to 1024px wide, the photograph's
   box is no taller than 768px, so it is never drawn larger than its
   native size there (cover-fit scale stays at or below 1). On taller
   portrait screens the box sits at the foot of the full-height hero
   and fades up into ink, so the type sits on dark ground above the
   tower. Wider screens must enlarge it; the grade covers the softest
   areas. */
@media (max-width: 1024px) {
  .hero.hero-cinematic .hero-media {
    top: auto;
    bottom: 0;
    height: min(100%, 768px);
  }
  .hero.hero-cinematic .hero-media::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 22%;
    background: linear-gradient(180deg, var(--ink-950) 0%, rgba(6, 13, 24, 0) 100%);
    pointer-events: none;
  }
}

@media (max-width: 991px) {
  .hero.hero-cinematic { padding-top: 0; }
  .hero.hero-cinematic .hero-content { padding-top: clamp(8rem, 20vh, 11rem); }
  .hero.hero-cinematic .hero-title { max-width: 12em; }
}

@media (max-width: 720px) {
  /* Portrait: headline in the sky, actions at the base,
     the tower between them. */
  .hero.hero-cinematic .hero-media img { object-position: 47% 50%; }
  /* On narrow screens the headline can reach the tower's pale rooftop,
     so the top grade extends further down than on desktop. */
  .hero.hero-cinematic .hero-scrim {
    background:
      linear-gradient(180deg, rgba(6, 13, 24, 0.8) 0%, rgba(6, 13, 24, 0.55) 34%, rgba(6, 13, 24, 0.22) 56%, rgba(6, 13, 24, 0) 68%),
      linear-gradient(0deg, rgba(6, 13, 24, 0.82) 0%, rgba(6, 13, 24, 0.45) 26%, rgba(6, 13, 24, 0) 44%);
  }
  .hero.hero-cinematic .hero-content { padding-top: 7.75rem; padding-bottom: 1.25rem; }
  .hero.hero-cinematic .eyebrow { margin-bottom: 1rem; }
  .hero.hero-cinematic .hero-title { max-width: none; margin-bottom: 0; font-size: clamp(2.25rem, 9.2vw, 2.75rem); }
  .hero.hero-cinematic .hero-actions { margin-top: auto; }
  .hero.hero-cinematic .hero-actions .btn { width: 100%; }
  /* Clear the fixed site-motion control (bottom 1.25rem, 44px tall)
     so it never sits on the hero actions or caption. */
  .hero-base { padding-bottom: calc(1.25rem + 44px + 1rem); }
  .hero-cue { display: none; }

  .statement-lead { font-size: clamp(1.375rem, 5.6vw, 1.625rem); line-height: 1.24; }

  /* Stats read as rows on phones: number and label side by side. */
  .experience-stats { grid-template-columns: minmax(0, 1fr); }
  .experience-stats .hero-stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-height: 0;
    padding-block: 1.1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .experience-stats .hero-stat:last-child { border-bottom: 0; }
  .experience-stats .stat-num { font-size: 1.75rem; }
  .experience-stats .stat-label { text-align: right; }

  .image-window-frame { height: auto; aspect-ratio: 4 / 5; }

  /* Showreel on phones: locally shaded copy at the foot of the frame;
     the title box fits two-line phrases; the base
     row clears the fixed site motion control. */
  .showreel-inner { align-items: flex-end; padding-block: 6rem 1.5rem; }
  .showreel-title { font-size: clamp(2.125rem, 9vw, 2.625rem); }
  .showreel.is-running .showreel-title { height: 2.3em; }
  .showreel-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: calc(1.25rem + 44px + 1rem);
  }
  .showreel-controls { order: 0; }
  .delivery-stages li { padding-right: 0.75rem; }
}

/* Smallest phones: the headline's last line reaches the tower's pale
   rooftop, so the grade holds further into the frame. */
@media (max-width: 360px) {
  .hero.hero-cinematic .hero-scrim {
    background:
      linear-gradient(180deg, rgba(6, 13, 24, 0.84) 0%, rgba(6, 13, 24, 0.68) 40%, rgba(6, 13, 24, 0.52) 60%, rgba(6, 13, 24, 0) 78%),
      linear-gradient(0deg, rgba(6, 13, 24, 0.82) 0%, rgba(6, 13, 24, 0.45) 26%, rgba(6, 13, 24, 0) 44%);
  }
}

/* ------------------------------------------------------------
   Reduced motion — resting state, nothing moves
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-cue::after { animation: none; top: 30%; }
  .delivery-stages li::after { transition: none; }
}

html.reduced-motion .hero-cue::after { animation: none; top: 30%; }
html.reduced-motion .delivery-stages li::after { transition: none; }