/* ==========================================================================
   "/" entry page: full-viewport split (Hajde left · Vitrina right).
   PUBLIC-SPEC §5. Tokens/base come from /shared/css; each half carries its own
   data-product so --font-display / --brand-* follow the brand automatically.
   ========================================================================== */

:root {
  --foot-h: 44px;
  --pad-x: clamp(24px, 4.6vw, 92px);
  --pad-top: clamp(22px, 3.8vh, 46px);
  --pad-bot: clamp(30px, 7.2vh, 92px);
  --grow: 1.35;                                  /* hovered half: flex 1 → 1.35 */
  /* copy width is fixed to the *narrow* state of a half, so text never reflows while the halves resize */
  --copy-w: min(max(590px, 31vw), calc(100vw / (1 + var(--grow)) - 2 * var(--pad-x)));
  --ease-lux: cubic-bezier(.19, 1, .22, 1);
  --t-split: 900ms;
  --night: #0B0D17;
  background: var(--night);
}

html, body { background: var(--night); }
body.hm {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: var(--font-manrope);
  overflow-x: hidden;
}

/* ── Split ─────────────────────────────────────────────────────────── */
.hm-split {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  min-height: calc(100vh - var(--foot-h));
  min-height: calc(100svh - var(--foot-h));
  isolation: isolate;
}

.hm-half {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  color: #fff;
  background: var(--night);
  transition: flex-grow var(--t-split) var(--ease-lux);
}
.hm-ride { z-index: 2; background: #000; }   /* above the right half: it carries the seam badge */
.hm-screens { z-index: 1; background: #07080F; }

/* Media layer: the photo is as wide as an *expanded* half and centred on the half, so widening a
   half reveals more of the photo instead of rescaling it. Its height is set from the width
   (--art-h, in vw) so the subject keeps the same framing on every desktop aspect ratio; the
   bottom fades into the half's background under the copy. */
.hm-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hm-media::after {                       /* veil for the half that is not hovered */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 12, .42);
  opacity: 0;
  transition: opacity var(--t-split) var(--ease-lux);
}
.hm-half > .hm-media > .hm-art {
  position: absolute;
  top: var(--art-top, 0px);
  height: max(var(--art-h, 50vw), var(--art-min-h, 0px));
  left: 50%;
  width: calc(100vw * var(--grow) / (1 + var(--grow)) + 2px);
  translate: -50% 0;
  scale: 1.07;
  transform-origin: 50% 40%;
  background-color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  transition: scale 1.6s var(--ease-lux);
  will-change: scale;
}
body.is-ready .hm-half > .hm-media > .hm-art { scale: 1; }
/* taxi: ~70 % of the half's width; tablets: both screens inside the half */
.hm-ride { --art-h: 46vw; --art-top: -3.2vw; }
.hm-screens { --art-h: 44vw; --art-top: -5vw; }

.hm-tint, .hm-grain { position: absolute; inset: 0; }
.hm-tint::before, .hm-tint::after { content: ""; position: absolute; inset: 0; transition: opacity var(--t-split) var(--ease-lux); }

/* Hajde: deep red. "screen" lifts the night photo's blacks to deep red and keeps the yellow taxi
   bright; a normal gradient on top deepens the edges and carries the copy. */
.hm-ride .hm-tint::before {
  background: #8A0F15;
  mix-blend-mode: screen;
}
.hm-ride .hm-tint::after {
  background:
    radial-gradient(90% 55% at 0% 0%, rgba(60, 3, 6, .55), rgba(60, 3, 6, 0) 70%),
    radial-gradient(130% 70% at 0% 100%, rgba(84, 5, 9, .85) 0%, rgba(84, 5, 9, 0) 62%),
    linear-gradient(180deg, rgba(58, 3, 6, .38) 0%, rgba(58, 3, 6, 0) 24%, rgba(92, 7, 11, 0) 40%, rgba(92, 7, 11, .62) 60%, rgba(74, 5, 9, .94) 80%, #44050A 100%);
}

/* Vitrina: night / dark violet over the back-seat photo with the two headrest tablets.
   The violet multiply is masked lighter across the tablets' band so the ads keep their colours. */
.hm-screens .hm-tint::before {
  background: linear-gradient(180deg, #3A2E8F 0%, #5B4BD0 40%, #3A2E8F 62%, #141632 100%);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-top) + var(--art-h) * .2), rgba(0, 0, 0, .4) calc(var(--art-top) + var(--art-h) * .32), rgba(0, 0, 0, .4) calc(var(--art-top) + var(--art-h) * .6), #000 calc(var(--art-top) + var(--art-h) * .8));
  mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-top) + var(--art-h) * .2), rgba(0, 0, 0, .4) calc(var(--art-top) + var(--art-h) * .32), rgba(0, 0, 0, .4) calc(var(--art-top) + var(--art-h) * .6), #000 calc(var(--art-top) + var(--art-h) * .8));
}
.hm-screens .hm-tint::after {
  background:
    radial-gradient(80% 55% at 100% 0%, rgba(123, 92, 255, .30), rgba(123, 92, 255, 0) 62%),
    radial-gradient(70% 45% at 100% 100%, rgba(0, 209, 193, .13), rgba(0, 209, 193, 0) 70%),
    linear-gradient(180deg, rgba(11, 13, 23, .62) 0%, rgba(11, 13, 23, .08) 20%, rgba(11, 13, 23, 0) 44%, rgba(11, 13, 23, .66) 60%, rgba(8, 10, 19, .95) 78%, #080A13 100%);
}

.hm-grain {
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Content ───────────────────────────────────────────────────────── */
.hm-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: var(--pad-top) var(--pad-x) var(--pad-bot);
  padding-left: calc(var(--pad-x) + env(safe-area-inset-left, 0px));
}
.hm-screens .hm-inner { padding-right: calc(var(--pad-x) + env(safe-area-inset-right, 0px)); }

.hm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
.hm-logo {
  height: clamp(34px, 4.2vh, 54px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}

.hm-copy {
  width: var(--copy-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2.1vh, 22px);
  font-family: var(--font-ui);
  font-size: clamp(11.5px, .72vw, 16px);
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--hm-kicker, #fff);
}
.hm-kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.hm-ride { --hm-kicker: #FFD25A; --hm-cta-bg: #FFC629; --hm-cta-fg: #111418; --hm-cta-glow: rgba(255, 198, 41, .42); }
.hm-screens { --hm-kicker: #3CE6D7; --hm-cta-bg: #00D1C1; --hm-cta-fg: #071017; --hm-cta-glow: rgba(0, 209, 193, .42); }

.hm-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.55vw, 86px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.hm-ride .hm-title { font-weight: 650; letter-spacing: -0.035em; max-width: 8.4em; }      /* "Hajde, / shkojmë." */
.hm-screens .hm-title { font-weight: 700; letter-spacing: -0.035em; max-width: 10.6em; }  /* "Vitrina që lëviz / nëpër Tiranë." */

.hm-desc {
  margin-top: clamp(14px, 2.2vh, 24px);
  max-width: 34em;
  font-size: clamp(15.5px, 1.02vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  text-wrap: pretty;
}

.hm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: clamp(22px, 3.6vh, 40px);
}

/* Big CTA. Its ::after stretches over the whole half, so the half itself is the link. */
.hm-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: clamp(54px, 6.4vh, 74px);
  padding: 0 clamp(24px, 1.8vw, 38px);
  border-radius: 18px;
  background: var(--hm-cta-bg);
  color: var(--hm-cta-fg);
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.02vw, 22px);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 34px -12px var(--hm-cta-glow), 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), background-color 200ms;
}
.hm-screens .hm-cta { border-radius: 14px; }
.hm-cta::after { content: ""; position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.hm-arrow {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 360ms var(--ease-spring);
}
.hm-half:hover .hm-cta,
.hm-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 20px 44px -12px var(--hm-cta-glow), 0 2px 6px rgba(0, 0, 0, .18);
}
.hm-half:hover .hm-arrow, .hm-cta:focus-visible .hm-arrow { transform: translateX(5px); }
.hm-cta:active { transform: translateY(0) scale(.985); }
.hm-cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 18px; }

/* Secondary: "Provoje direkt" (creates a visitor session, opens the stage) */
.hm-try {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 2px;
  color: #fff;
  font-size: clamp(14.5px, .86vw, 19px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.hm-try-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 200ms, border-color 200ms, transform 260ms var(--ease-spring);
}
.hm-try-ic .icon { translate: 1px 0; }
.hm-try-label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size 320ms var(--ease-out);
}
.hm-try:hover .hm-try-label, .hm-try:focus-visible .hm-try-label { background-size: 100% 1.5px; }
.hm-try:hover .hm-try-ic { background: #fff; border-color: #fff; color: var(--night); transform: scale(1.06); }
.hm-try:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 999px; }
.hm-try[aria-busy="true"] { pointer-events: none; }
.hm-try[aria-busy="true"] .hm-try-ic { background: transparent; border-color: rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
.hm-try[aria-busy="true"] .hm-try-ic .icon { opacity: 0; }

/* Film link (Vitrina top bar) */
.hm-film-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: clamp(38px, 2vw, 48px);
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(11, 13, 23, .42);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: #fff;
  font-size: clamp(13.5px, .7vw, 17px);
  font-weight: 650;
  white-space: nowrap;
  transition: background-color 200ms, border-color 200ms;
}
.hm-film-link:hover { background: rgba(123, 92, 255, .38); border-color: rgba(255, 255, 255, .3); }
.hm-film-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
.hm-film-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--night);
}
.hm-film-ic .icon { translate: 1px 0; }
.hm-film-dur { color: rgba(255, 255, 255, .62); font-weight: 600; }

/* ── Hover expand (desktop, fine pointer) ──────────────────────────── */
@media (hover: hover) and (min-width: 861px) {
  .hm-half:hover, .hm-half:focus-within { flex-grow: var(--grow); }
  .hm-half:hover > .hm-media > .hm-art { scale: 1.035; }
  .hm-split:has(.hm-half:hover) .hm-half:not(:hover) > .hm-media::after { opacity: 1; }
  .hm-split:has(.hm-half:hover) .hm-half:not(:hover) .hm-copy,
  .hm-split:has(.hm-half:hover) .hm-half:not(:hover) .hm-top { opacity: .7; }
  .hm-copy, .hm-top { transition: opacity var(--t-split) var(--ease-lux); }
}

/* ── Centre seam ───────────────────────────────────────────────────── */
.hm-ride::after {                       /* hairline along the boundary */
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  translate: 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34) 22%, rgba(255, 255, 255, .34) 78%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hm-seam {
  position: absolute;
  z-index: 4;
  right: 0;
  top: var(--seam-y, 34%);
  translate: 50% calc(-1 * var(--x-half, 36px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.hm-x {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(62px, 3.75vw, 92px);
  height: clamp(62px, 3.75vw, 92px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #C81B22 0%, #C81B22 50%, #3A2699 50%, #3A2699 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .55) inset,
    0 0 0 6px rgba(11, 13, 23, .28),
    0 18px 44px rgba(0, 0, 0, .45);
  color: #fff;
  font-family: var(--font-sora);
  font-size: clamp(30px, 1.77vw, 44px);
  font-weight: 300;
  line-height: 1;
}
.hm-x::before {                          /* slow orbit ring */
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .32);
  animation: hm-orbit 40s linear infinite;
}
.hm-x > span { translate: 0 -2px; }
.hm-seam-line {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(11, 13, 23, .58);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-size: clamp(12.5px, .66vw, 16px);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  text-align: center;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.hm-foot {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--foot-h);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #07080F;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #8D93AE;
  font-size: clamp(12.5px, .62vw, 15px);
  font-weight: 550;
  letter-spacing: .015em;
  text-align: center;
}
.hm-dot { margin: 0 .2em; color: #565C78; }
.hm-nw { white-space: nowrap; }

/* ── Film lightbox ─────────────────────────────────────────────────── */
.hm-film {
  margin: auto;                          /* base.css resets margins; a modal dialog centres with auto */
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.hm-film::backdrop { background: rgba(4, 5, 12, .84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hm-film[open] { animation: hm-pop 420ms var(--ease-out); }
.hm-film-box {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 120px);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 120px rgba(0, 0, 0, .6);
}
.hm-film-box video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.hm-film-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(123, 92, 255, .45), rgba(123, 92, 255, 0) 70%),
    linear-gradient(180deg, rgba(11, 13, 23, .5), #0B0D17),
    url("/assets/photos/deck-tablet-closeup.jpg") center / cover;
}
.hm-film-soon[hidden] { display: none; }
.hm-film-soon-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); margin-bottom: 6px; }
.hm-film-soon-title { font-family: var(--font-sora); font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.hm-film-soon-text { color: rgba(255, 255, 255, .75); margin-bottom: 14px; }
.hm-film-soon .hm-cta { --hm-cta-bg: #00D1C1; --hm-cta-fg: #071017; --hm-cta-glow: rgba(0, 209, 193, .42); border-radius: 14px; }
.hm-film-soon .hm-cta::after { display: none; }
.hm-cta-sm { min-height: 50px; font-size: 16px; }
.hm-film-close {
  position: absolute;
  top: -54px;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  transition: background-color 200ms;
}
.hm-film-close:hover { background: rgba(255, 255, 255, .24); }
.hm-film-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.hm-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: calc(var(--foot-h) + 20px);
  translate: -50% 0;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 18px;
  border-radius: 14px;
  background: rgba(17, 20, 24, .94);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  animation: hm-toast-in 320ms var(--ease-out);
}

/* ── Entrance ──────────────────────────────────────────────────────── */
.hm-rise { opacity: 0; translate: 0 18px; }
body.is-ready .hm-rise {
  opacity: 1;
  translate: 0 0;
  transition: opacity 900ms var(--ease-lux), translate 900ms var(--ease-lux);
  transition-delay: calc(140ms + var(--d, 0) * 90ms);
}
body.is-ready .hm-screens .hm-rise { transition-delay: calc(220ms + var(--d, 0) * 90ms); }
.hm-top { opacity: 0; transition: opacity 900ms var(--ease-lux) 100ms; }
body.is-ready .hm-top { opacity: 1; }
.hm-seam { opacity: 0; }
body.is-ready .hm-seam { animation: hm-seam-in 900ms var(--ease-spring) 600ms both; }
/* once revealed, hover dimming takes over the opacity transitions */
body.is-settled .hm-rise { transition: opacity var(--t-split) var(--ease-lux); transition-delay: 0ms; }

@keyframes hm-seam-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes hm-orbit { to { rotate: 360deg; } }
@keyframes hm-pop { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
@keyframes hm-toast-in { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }

@media (min-width: 861px) and (max-width: 1180px) {
  .hm-kicker { gap: 9px; letter-spacing: .07em; }
  .hm-kicker::before { width: 18px; }
}

/* ── Laptop heights ────────────────────────────────────────────────── */
@media (min-width: 861px) and (max-height: 800px) {
  :root { --pad-bot: clamp(28px, 6vh, 56px); }
  .hm-title { font-size: clamp(32px, 3.2vw, 56px); }
  .hm-desc { font-size: clamp(15px, .98vw, 17px); line-height: 1.55; }
  .hm-x { width: 62px; height: 62px; font-size: 30px; }
}
@media (min-width: 861px) and (max-height: 640px) {
  .hm-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hm-seam-line { display: none; }
}

/* ── Stacked (phones, small tablets) ───────────────────────────────── */
@media (max-width: 860px) {
  :root {
    --pad-x: clamp(20px, 6vw, 44px);
    --pad-top: 22px;
    --pad-bot: 40px;
    --copy-w: 100%;
  }
  .hm-split { flex-direction: column; min-height: 0; }
  .hm-half { flex: none; min-height: 50vh; min-height: 50svh; }
  /* the photo sits in the band between the logo row and the copy */
  .hm-half > .hm-media > .hm-art { left: 0; width: 100%; translate: none;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hm-ride { --art-h: min(98vw, 520px); --art-top: max(-5vw, -30px); }
  .hm-screens { --art-h: min(94vw, 500px); --art-top: calc(30px + min(2vw, 12px)); }
  .hm-screens .hm-art > .art-media { object-position: 50% 46% !important; }
  .hm-ride .hm-tint::after {
    background:
      linear-gradient(180deg, rgba(58, 3, 6, .5) 0%, rgba(58, 3, 6, 0) 14%, rgba(92, 7, 11, 0) 30%, rgba(92, 7, 11, .7) 44%, rgba(74, 5, 9, .95) 58%, #44050A 100%); }
  .hm-screens .hm-tint::after {
    background:
      radial-gradient(90% 40% at 100% 0%, rgba(123, 92, 255, .3), rgba(123, 92, 255, 0) 62%),
      linear-gradient(180deg, rgba(11, 13, 23, .7) 0%, rgba(11, 13, 23, .1) 16%, rgba(11, 13, 23, 0) 34%, rgba(11, 13, 23, .72) 48%, rgba(8, 10, 19, .96) 60%, #080A13 100%); }

  .hm-inner { justify-content: flex-start; gap: 0; }
  .hm-copy { margin-top: clamp(150px, 44vw, 260px); }
  .hm-ride .hm-inner { padding-bottom: 52px; }        /* half of the seam pill hangs over the boundary */
  .hm-screens .hm-inner { padding-top: 52px; }
  .hm-logo { height: 34px; }
  .hm-title { font-size: clamp(31px, 8.8vw, 46px); }
  .hm-desc { font-size: 16px; }
  .hm-kicker { font-size: 11.5px; letter-spacing: .12em; }
  .hm-actions { width: 100%; max-width: 560px; gap: 10px; }
  .hm-cta { flex: 1 1 auto; justify-content: center; min-height: 56px; }
  .hm-try { flex: 1 1 100%; justify-content: center; min-height: 50px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
  .hm-screens .hm-try { border-radius: 14px; }
  .hm-try-ic { width: 26px; height: 26px; }
  .hm-film-link { padding-right: 12px; }

  /* seam: a horizontal pill straddling the boundary between the stacked halves */
  .hm-ride::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 1px; translate: 0 50%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, 0)); }
  .hm-seam {
    top: 100%; right: auto; left: 50%; translate: -50% -50%;
    flex-direction: row; gap: 10px;
    padding: 5px 16px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(11, 13, 23, .78);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  .hm-x { flex: none; width: 34px; height: 34px; font-size: 19px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
      linear-gradient(90deg, #C81B22 0%, #C81B22 50%, #3A2699 50%, #3A2699 100%); }
  .hm-x::before { display: none; }
  .hm-x > span { translate: 0 -1px; }
  .hm-seam-line { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: 12px; white-space: normal; text-align: left; }
  .hm-foot { font-size: 12px; line-height: 1.6; }
}
@media (max-width: 420px) {
  .hm-seam-line { font-size: 11.5px; }
}
@media (max-width: 374px) {
  .hm-logo { height: 30px; }
  .hm-film-dur { display: none; }
  .hm-kicker { letter-spacing: .09em; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --t-split: 1ms; }
  .hm-rise, .hm-top { opacity: 1 !important; translate: none !important; transition: none !important; animation: none !important; }
  .hm-seam, body.is-ready .hm-seam { opacity: 1; animation: none; }   /* keep its translate: it centres the badge on the seam */
  .hm-half > .hm-media > .hm-art { scale: 1 !important; transition: none !important; }
  .hm-x::before { animation: none; }
  .hm-film[open], .hm-toast { animation: none; }
}