/* ============================================================================
   HOME — the hero sheet and the two doors below it.

   The hero is the authored moment: one wide sheet of white stock, empty of text,
   with two cutout figures at work on it. Each figure is a group of two layers
   (body + detached spark strokes) whose offsets inside the group are derived
   from assets/img/layers.json, so the reassembled scene is pixel-true to the
   supplied art. Groups float on non-harmonic cycles; sparks pulse against them.
   ============================================================================ */

/* ------------------------------------------------------------------ hero -- */
.hero {
  padding-top: calc(var(--nav-h) + 26px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

.hero__sheet {
  position: relative;
  aspect-ratio: 1 / 1.04;
  background: var(--stock);
  isolation: isolate;
}

/* the pale warm glow the supplied art was drawn on, rebuilt in CSS so the
   cutouts sit on their native ground instead of on flat white */
.hero__wash {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(58% 62% at 34% 62%, #ffe3d6 0%, rgba(255, 227, 214, 0) 68%),
    radial-gradient(46% 54% at 76% 44%, #ffeee7 0%, rgba(255, 238, 231, 0) 70%);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__wash {
    animation: wash-drift 19s ease-in-out infinite;
  }
}

@keyframes wash-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.6%, -1.2%, 0) scale(1.045);
  }
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- a figure group: parallax lives here, float lives on the child --------- */
.fig {
  position: absolute;
  transform: translate3d(calc(var(--px, 0) * var(--pf, 1)), calc(var(--py, 0) * var(--pf, 1)), 0);
  transition: transform 600ms var(--ease);
}

.fig__float {
  position: relative;
  width: 100%;
  height: 100%;
}

.fig__layer {
  position: absolute;
  display: block;
  width: auto;
}

/* offsets within each group — derived from layers.json, do not hand-tune */
.fig--printer {
  aspect-ratio: 392 / 444;
  --pf: 1;
}
.fig--printer .fig__body {
  left: 0;
  top: 15.541%;
  width: 100%;
}
.fig--printer .fig__accents {
  left: 20.918%;
  top: 0;
  width: 69.388%;
}

.fig--photographer {
  aspect-ratio: 301 / 338;
  --pf: 1.9; /* further from the viewer reads as more parallax travel */
}
.fig--photographer .fig__body {
  left: 0;
  top: 22.781%;
  width: 85.382%;
}
.fig--photographer .fig__accents {
  left: 29.568%;
  top: 0;
  width: 70.432%;
}

/* The contact shadow sits on the ground, not on the figure — it is a sibling of
   .fig__float so the float's rise does not carry it upward. It only breathes. */
.fig__shadow {
  position: absolute;
  left: 8%;
  bottom: -1.5%;
  width: 84%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 96, 47, 0.26), rgba(214, 96, 47, 0));
}

@media (prefers-reduced-motion: no-preference) {
  .fig--printer .fig__float {
    animation: float-a 7.2s ease-in-out infinite;
  }
  .fig--photographer .fig__float {
    animation: float-b 8.9s ease-in-out infinite;
  }
  .fig--printer .fig__accents {
    animation: spark-a 2.6s ease-in-out infinite;
  }
  .fig--photographer .fig__accents {
    animation: spark-b 3.1s ease-in-out infinite;
  }
  .fig--printer .fig__shadow {
    animation: shade-a 7.2s ease-in-out infinite;
  }
  .fig--photographer .fig__shadow {
    animation: shade-b 8.9s ease-in-out infinite;
  }
}

@keyframes float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -2.6%, 0) rotate(-0.7deg);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -3.4%, 0) rotate(1deg);
  }
}

/* sparks pulse from the head, not from the layer's own centre */
@keyframes spark-a {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes spark-b {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.98);
  }
  55% {
    opacity: 1;
    transform: scale(1.045);
  }
}

.fig--printer .fig__accents {
  transform-origin: 72% 62%;
}
.fig--photographer .fig__accents {
  transform-origin: 40% 70%;
}

@keyframes shade-a {
  0%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.66;
    transform: scaleX(0.9);
  }
}

@keyframes shade-b {
  0%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.6;
    transform: scaleX(0.88);
  }
}

/* --- figure placement, per breakpoint ------------------------------------- */
/* mobile: stacked diagonally so both read at phone width */
.fig--printer {
  left: -3%;
  bottom: 6%;
  height: 54%;
}
.fig--photographer {
  right: 2%;
  top: 8%;
  height: 38%;
}

@media (min-width: 560px) {
  .hero__sheet {
    aspect-ratio: 3 / 2;
  }
  .fig--printer {
    left: 2%;
    bottom: 8%;
    height: 62%;
    top: auto;
  }
  .fig--photographer {
    right: 5%;
    bottom: 19%;
    top: auto;
    height: 47%;
  }
}

@media (min-width: 860px) {
  .hero {
    padding-top: calc(var(--nav-h) + 34px);
  }
  .hero__sheet {
    aspect-ratio: 2.16 / 1;
  }
  .fig--printer {
    left: 4%;
    bottom: 9%;
    height: 68%;
  }
  .fig--photographer {
    right: 7%;
    bottom: 21%;
    height: 52%;
  }
}

@media (min-width: 1120px) {
  .hero__sheet {
    aspect-ratio: 2.4 / 1;
  }
  .fig--printer {
    left: 6%;
    height: 72%;
  }
  .fig--photographer {
    right: 9%;
    height: 55%;
  }
}

/* --- press-room ornament: crop marks and a colour bar ---------------------- */
.hero__marks {
  position: absolute;
  inset: 16px;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 860px) {
  .hero__marks {
    inset: 22px;
  }
}

.hero__marks i {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid #e7cabb;
}
.hero__marks i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}
.hero__marks i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}
.hero__marks i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
}
.hero__marks i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

/* clears the bottom-right crop mark rather than colliding with it */
.hero__bar {
  position: absolute;
  right: 26px;
  bottom: 1px;
  display: flex;
  gap: 3px;
  z-index: 2;
}

.hero__bar span {
  width: 13px;
  height: 8px;
  border-radius: 1.5px;
}

@media (max-width: 559px) {
  .hero__bar span {
    width: 10px;
    height: 6px;
  }
}

/* ------------------------------------------------------------- the doors -- */
.doors {
  display: grid;
  gap: 16px;
  padding-bottom: clamp(56px, 8vw, 96px);
}

@media (min-width: 860px) {
  .doors {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--r-sheet);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-stock);
  background: var(--stock);
  box-shadow: var(--lift-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (min-width: 860px) {
  .door {
    min-height: 420px;
  }
}

.door:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-3);
}

.door--print {
  background:
    radial-gradient(78% 66% at 82% 12%, #ffe1d3 0%, rgba(255, 225, 211, 0) 62%),
    var(--stock);
}

.door--studio {
  background: var(--ink-raised);
  color: var(--on-ink);
  background-image:
    radial-gradient(70% 60% at 16% 8%, rgba(234, 88, 12, 0.4) 0%, rgba(234, 88, 12, 0) 60%);
}

.door__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flame-deep);
  margin-bottom: 12px;
}

.door--studio .door__kicker {
  color: var(--flame-on-ink);
}

.door__title {
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  margin-bottom: 10px;
}

.door__body {
  color: var(--on-stock-soft);
  max-width: 40ch;
  font-size: 0.98rem;
}

.door--studio .door__body {
  color: var(--on-ink-soft);
}

.door__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--flame-deep);
}

.door--studio .door__go {
  color: var(--flame-on-ink);
}

.door__go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}

.door:hover .door__go svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------- promise -- */
.promise {
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding-block: clamp(32px, 4.5vw, 52px);
}

.promise ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 860px) {
  .promise ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

.promise li {
  color: var(--on-ink);
}

.promise b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.promise span {
  color: var(--on-ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}