/* ==========================================================================
   Landing page — components used only by the home page's Blue Lily sections.
   Everything here animates transform and opacity only, and every animation
   has a static resting state under prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------ section headings --- */
/* A hand-placed petal heading wraps eyebrow + h2 only, so the lead paragraph
   after it keeps its own spacing. */
.landing-head .eyebrow { margin-bottom: var(--space-3); }
.landing-head h2 { margin: 0; }
.section-head--center .landing-head .eyebrow { justify-content: center; }

/* -------------------------------------------------------------- figures --- */
.landing-figure { margin: 0; }
.landing-figure picture,
.landing-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
}
.landing-figure img { height: auto; box-shadow: var(--shadow-lg); }
.landing-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ------------------------------------ "Beyond hospitality and retail" strip */
.landing-beyond {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(14px, 1.6vw, 18px);
  padding-right: clamp(20px, 3vw, 40px);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.landing-beyond__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.landing-beyond__body h3 { font-size: var(--display-sub); margin-bottom: var(--space-3); }
.landing-beyond__body p:last-child { color: var(--text-secondary); }

/* ------------------------------------------------------ integration map --- */
.int-map {
  --int-gap: clamp(40px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--int-gap);
  margin-top: clamp(28px, 3vw, 44px);
}
.int-map__side {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.int-node {
  position: relative;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.int-node h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.int-node p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); }

/* The connector: a hairline across the gap between a node and the hub, with a
   single petal carried along it. The runner is as wide as the line, and
   translating it by its own width moves the petal from one end to the other
   -- transform only, so the compositor does the work. */
.int-link {
  position: absolute;
  top: 50%;
  width: var(--int-gap);
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent));
  border-radius: 2px;
}
.int-map__side--left  .int-link { left: 100%; }
.int-map__side--right .int-link {
  right: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 18%, transparent));
}
.int-link__runner {
  position: absolute;
  inset: 0;
  animation: int-run var(--run, 6s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.int-link__runner svg {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 9px;
  height: 20px;
  margin-top: -10px;
  /* the petal's tip points along the line, the way the data travels */
  transform: rotate(90deg);
  color: var(--petal-electric);
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, .55));
}
@keyframes int-run {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; }
  14%  { opacity: .95; }
  86%  { opacity: .95; }
  100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

.int-hub {
  position: relative;
  text-align: center;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-xl);
  /* solid colour under the gradient, as everywhere else in the stylesheet,
     so contrast tooling can measure the text on it */
  background-color: #0B1630;
  background-image: linear-gradient(160deg, #10264A 0%, #0B1630 100%);
  color: var(--text-on-dark);
  box-shadow: 0 24px 56px -18px rgba(11, 22, 48, .55);
  isolation: isolate;
}
/* A soft halo, the hub's only ornament */
.int-hub::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: calc(var(--radius-xl) + 10px);
  border: 1px solid rgba(96, 165, 250, .35);
  box-shadow: 0 0 36px rgba(96, 165, 250, .22);
}
.int-hub h3 {
  color: #FFFFFF;
  font-size: var(--display-sub);
  margin-bottom: var(--space-3);
}
.int-hub p { color: var(--text-on-dark-muted); font-size: var(--text-sm); }
.int-hub p + p { margin-top: var(--space-4); }
.int-hub__kicker {
  font-family: var(--font-label);
  font-size: var(--text-xs) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #93C5FD !important;
  margin-bottom: var(--space-3);
}

/* Below a comfortable three-column width the map becomes a list: hub first,
   directions after it. Lines only mean something when there is a hub beside
   them to reach, so they go. */
@media (max-width: 1024px) {
  .int-map { grid-template-columns: 1fr 1fr; row-gap: var(--space-5); column-gap: var(--space-5); }
  .int-hub { grid-column: 1 / -1; order: -1; max-width: 560px; margin: 0 auto var(--space-4); }
  .int-link { display: none; }
}
@media (max-width: 720px) {
  .int-map { grid-template-columns: 1fr; }
  .landing-beyond { grid-template-columns: 1fr; padding-right: clamp(14px, 1.6vw, 18px); }
  .landing-beyond__body { padding: 0 var(--space-2) var(--space-3); }
}

/* ------------------------------------------------ hero staged entrance --- */
/* Brief §6: eyebrow, headline, text, buttons, then the petals. Short delays --
   the whole sequence is done inside a second, and with motion reduced or
   animations unsupported the hero is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .hero-split--landing .hero-split__kicker,
  .hero-split--landing h1,
  .hero-split--landing .hero-split__lead,
  .hero-split--landing .btn-row,
  .hero-split--landing .hero-split__facts {
    animation: land-rise .8s var(--ease-out, ease-out) both;
  }
  .hero-split--landing .hero-split__kicker { animation-delay: .05s; }
  .hero-split--landing h1                  { animation-delay: .14s; }
  .hero-split--landing .hero-split__lead   { animation-delay: .28s; }
  .hero-split--landing .btn-row            { animation-delay: .4s; }
  .hero-split--landing .hero-split__facts  { animation-delay: .52s; }
  .hero-split--landing .hero-split__media  { animation: land-fade 1.1s var(--ease-out, ease-out) .08s both; }
  /* petals begin last */
  .hero-split--landing .petal-field { transition-delay: .7s; }
}
@keyframes land-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes land-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .int-link__runner { animation: none; transform: translate3d(-50%, 0, 0); opacity: .9; }
}
.petals-paused .int-link__runner { animation-play-state: paused; }

/* ------------------------------------------------ small layout helpers --- */
.landing-panels { margin-top: clamp(28px, 3vw, 40px); }

/* Ten modules read better in two roomy columns than three cramped ones */
.feature-band__modules--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
.feature-band__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  max-width: 68ch;
}
.feature-band__legend > span:not(.status) { flex: 1 1 280px; }

/* A landing heading's cluster stays around the heading. The default field
   reaches 42% past the box on every side, which under a two-line h2 carries
   petals down onto the paragraph beneath -- the brief keeps them off body
   copy. The top and sides keep their reach; the bottom is pulled in. */
.landing-head > .petal-field { inset: -40% -12% -4%; }