/*
 * Project page showcase: paired with global/project-hero.js
 *
 * Three screens share one grid cell. The centre screen is the hero; the two
 * side screens start hidden behind it and are positioned around it as the
 * page scrolls. JS writes two progress values onto .hero-project-design:
 *   --e  emerge  (0 → 1)  sides slide out from behind the centre screen
 *   --s  spread  (0 → 1)  sides travel outward and settle into the composition
 * Without JS (or with reduced motion) both stay at 1: the final composition.
 *
 * All geometry is in centre-screen widths (--c), which are relative to the
 * frame's width, so the composition scales instead of overflowing.
 */

/* Scroll track: JS sets its height (frame + scroll distance) so the frame can
   stay pinned while the composition unfolds. */
.hero-scroll-track {
  position: relative;
  width: 100%;
  align-self: stretch;
}

.hero-scroll-track > .hero-project-design-wrapper {
  position: sticky;
  top: var(--hero-sticky-top, 80px);
}

.hero-project-design-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400-primary);
  border-radius: 26px;
  overflow: hidden;
  container-type: inline-size;
}

.hero-project-design {
  /* Geometry: desktop, landscape screens */
  --c: min(56cqw, 760px);     /* centre screen width */
  --ratio: 16 / 9;
  --side: .62;                /* side screen width, relative to the centre */
  --x-e: .28;                 /* sideways travel while emerging (in --c) */
  --x-s: .26;                 /* sideways travel while spreading (in --c) */
  --y-e: 0;                   /* vertical travel while emerging (in --c) */
  --y-s: 0;                   /* vertical travel while spreading (in --c) */
  --tilt-from: 20deg;         /* 3D turn while tucked behind… */
  --tilt-to: 8deg;            /* …and once settled */
  --roll-e: 0deg;             /* flat (2D) rotation, used on mobile */
  --roll-s: 0deg;
  --centre-drop: 0;           /* centre sits lower until the sides emerge (in --c), mobile only */
  --centre-shrink: .035;      /* centre steps back slightly to make room */

  /* Progress (final composition by default) */
  --e: 1;
  --s: 1;

  display: grid;
  place-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-image-box {
  grid-area: 1 / 1;
  margin: 0;
  width: var(--c);
  will-change: transform, opacity;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--neutral-400-primary);
  background-color: var(--white);
}

/* Centre: the hero */
.hero-image-box.hero-center {
  z-index: 3;
  transform:
    translateY(calc(var(--c) * var(--centre-drop) * (1 - var(--e))))
    scale(calc(1 - var(--centre-shrink) * var(--s)));
}

.hero-center .hero-image {
  box-shadow:
    0 40px 80px -40px rgba(24, 24, 32, .30),
    0 12px 28px -16px rgba(24, 24, 32, .14);
}

/* Sides: supporting screens, tucked behind */
.hero-image-box.hero-left,
.hero-image-box.hero-right {
  --dir: -1;
  z-index: 2;
  width: calc(var(--c) * var(--side));
  opacity: clamp(0, calc(var(--e) * 1.6), 1);
  transform:
    perspective(1600px)
    translateX(calc(var(--dir) * var(--c) * (var(--x-e) * var(--e) + var(--x-s) * var(--s))))
    translateY(calc(var(--c) * (var(--y-e) * var(--e) + var(--y-s) * var(--s))))
    rotateY(calc(var(--dir) * -1 * (var(--tilt-from) + (var(--tilt-to) - var(--tilt-from)) * var(--s))))
    rotate(calc(var(--dir) * (var(--roll-e) * var(--e) + var(--roll-s) * var(--s))))
    scale(calc(.9 + .1 * var(--s)));
}

.hero-image-box.hero-right { --dir: 1; }

.hero-left .hero-image,
.hero-right .hero-image {
  box-shadow:
    0 30px 60px -34px rgba(24, 24, 32, .26),
    0 8px 20px -14px rgba(24, 24, 32, .12);
}

/* Resting movement: a slow, barely-there float, out of phase per screen */
@keyframes heroFloat {
  0%, 100% { translate: 0 calc(var(--float) * -1); }
  50%      { translate: 0 var(--float); }
}

.hero-center .hero-image { --float: 2px; animation: heroFloat 9s ease-in-out infinite; }
.hero-left .hero-image   { --float: 4px; animation: heroFloat 7.5s ease-in-out -2s infinite; }
.hero-right .hero-image  { --float: 4px; animation: heroFloat 8.5s ease-in-out -5.5s infinite; }

/* Portrait phone screens (Leksoro) */
.hero-project-design.hero-phones {
  --c: min(24cqw, 290px);
  --ratio: 9 / 16;
  --side: .84;
  --x-e: .30;
  --x-s: .58;
  --tilt-from: 24deg;
  --tilt-to: 10deg;
  --centre-shrink: .02;
}

/* Mobile: its own composition. The side screens stay tucked behind the
   centre and peek out below it, fanned like a small stack of prints. Flat 2D
   motion only, which stays smooth on low-powered phones. */
@media (max-width: 700px) {
  .hero-project-design-wrapper {
    padding: 2.25rem 1rem;
    border-radius: 20px;
  }

  .hero-project-design {
    --c: 84cqw;
    --side: .6;
    --x-e: .08;
    --x-s: .17;
    --y-e: .2;
    --y-s: .07;
    --tilt-from: 0deg;
    --tilt-to: 0deg;
    --roll-e: 2deg;
    --roll-s: 3deg;
    --centre-drop: .1;
    --centre-shrink: 0;
    padding-bottom: calc(var(--c) * .2);
  }

  /* Phones are narrow, so on mobile they can still sit side by side */
  .hero-project-design.hero-phones {
    --c: 46cqw;
    --side: .8;
    --x-e: .28;
    --x-s: .22;
    --y-e: 0;
    --y-s: .06;
    --roll-e: 2deg;
    --roll-s: 2deg;
    --centre-drop: 0;
    padding-bottom: 0;
  }

  .hero-image { border-radius: 10px; }

  .hero-left .hero-image,
  .hero-right .hero-image {
    box-shadow: 0 16px 32px -20px rgba(24, 24, 32, .28);
  }
}

/* Load-in: the frame settles into place, then the centre screen. Only when JS
   is running (it adds .hero-js), so the page is never left blank. */
.hero-project-design-wrapper.hero-js {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 1s ease, translate 1.2s cubic-bezier(.22, 1, .36, 1);
}

.hero-project-design-wrapper.hero-js .hero-center {
  opacity: 0;
  transition: opacity 1.1s ease .2s;
}

.hero-project-design-wrapper.hero-js.hero-ready,
.hero-project-design-wrapper.hero-js.hero-ready .hero-center {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none !important; }
  .hero-project-design-wrapper.hero-js,
  .hero-project-design-wrapper.hero-js .hero-center {
    transition: none;
  }
}