/*
 * sd-home-hero — homepage hero (Session 4.1a; Blueprint 5.7, 7.5 Option 3 Hybrid, 8.12)
 * Moved from the approved Gate 2 direction sample (reviews/design-direction-review.html, x- scene; D-026 items 6–7):
 * strong typography + a light clinic illustration in the background + the Blue Line system figure.
 * Session 5.2 (owner choice F-01 B): background = the treatment room in the style-B illustration language
 * (illustration_hero_bg_clinic-room_v01_approved.svg; replaces the outline clinic scene of D-026 item 7), and the
 * final open circle of the figure is 1.5 × larger (radius 192 instead of 128).
 * Text column 7 / figure 5 from 1024px; stacked on phones and tablets (text first).
 *
 * Blue Line figure (D-026 item 6): the line finds six scattered points (each appears when the line reaches it;
 * labels appear at once, without fading), the points gather slowly along four fifths of a circle around
 * SisuDent, and the arc turns slowly. About 8 s, plays once, ends in its final state, no control —
 * limited exception D-025. Reduced motion: the final state at once. The figure has a text alternative.
 * Exactly one H1 per page; at most one primary and one secondary action (as sd-hero).
 */

.sd-home-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sd-space-8) var(--sd-section-space);
  background: var(--sd-color-surface);
}

/* Background illustration (style B, owner choice F-01 B, Session 5.2) — decorative, behind the content */
.sd-home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sd-home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

/* Phones and tablets: the text sits over the drawing, so it is lighter */
@media (max-width: 1023.98px) {
  .sd-home-hero__bg { opacity: 0.7; }
}

.sd-home-hero > .sd-container {
  position: relative;
  z-index: 1;
}

.sd-home-hero__grid {
  display: grid;
  gap: var(--sd-space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .sd-home-hero__grid { grid-template-columns: 7fr 5fr; }
}

.sd-home-hero__text {
  display: grid;
  gap: var(--sd-space-4);
  justify-items: start;
  min-width: 0;
}

.sd-home-hero__title { max-width: 14ch; }

.sd-home-hero__lead { max-width: 40rem; }

.sd-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-3);
  margin-top: var(--sd-space-3);
}

.sd-home-hero__slogan {
  max-width: 36rem;
  margin-top: var(--sd-space-5);
  padding-top: var(--sd-space-4);
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
  font-size: var(--sd-font-size-small);
  color: var(--sd-color-text-muted);
}

/* ---------- Blue Line system figure ---------- */

.sd-home-hero__figure {
  width: 100%;
  max-width: 32rem;
  margin: 0;
  justify-self: center;
}

/* Owner request (D-026): on desktop the arc sits slightly up and left */
@media (min-width: 1024px) {
  .sd-home-hero__figure { transform: translate(-3rem, -2.5rem); }
}

/* Larger bold labels (D-063): below 700px the long left labels ("Better operation", "Solutions") need room inside
   the figure, so the circle moves slightly right and keeps ≥ 15px to the screen edge (320–699px) */
@media (max-width: 699.98px) {
  .sd-home-hero__figure { box-sizing: border-box; padding-inline: 1.75rem 0.25rem; }
}

.sd-home-hero__figure svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sd-home-hero__line {
  fill: none;
  stroke: var(--sd-color-line-primary);
  stroke-width: var(--sd-line-width);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sd-hh-draw 2.2s linear 0.2s both, sd-hh-fade-out 400ms var(--sd-ease-standard) 2.5s both;
}

.sd-home-hero__ring {
  fill: none;
  stroke: var(--sd-color-line-primary);
  stroke-width: var(--sd-line-width);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sd-hh-draw 2.4s var(--sd-ease-standard) 2.6s both;
}

.sd-home-hero__node { fill: var(--sd-color-white); stroke: var(--sd-color-line-primary); stroke-width: 2; }
.sd-home-hero__node--end { stroke: var(--sd-color-line-emphasis); }
.sd-home-hero__core { fill: var(--sd-color-brand-blue); }

/* White halo keeps labels readable where the line passes */
/* Owner request 2026-10-08 (D-063): 4px larger (19 → 23px) and bold */
.sd-home-hero__label {
  font-family: var(--sd-font-family-base);
  font-size: 23px;
  font-weight: 700;
  fill: var(--sd-color-text-default);
  paint-order: stroke;
  stroke: var(--sd-color-white);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.sd-home-hero__label--end { fill: var(--sd-color-brand-blue); font-weight: 700; }

/* SisuDent logo (Primary blue; owner requests D-063, D-064): the logo instead of the word, 2.25 × the width of the
   word (247.8 × 87.7); the wordmark itself — not the swoosh above it — is centred on the circle centre (220, 236).
   Small and faint, grows to full size. The word style below remains for the archived option pages (design/reviews). */
.sd-home-hero__center-logo { pointer-events: none; }

/* Phones: the small circle (radius 128) would cut the swoosh, so the logo keeps 2/3 of that size there (165 wide),
   scaled around the circle centre */
@media (max-width: 639.98px) {
  .sd-home-hero__center-logo { transform-box: view-box; transform-origin: 220px 236px; transform: scale(0.6667); }
}

.sd-home-hero__center {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sd-hh-grow 1.6s var(--sd-ease-out) 3.2s both;
}

.sd-home-hero__center-name {
  font-family: var(--sd-font-family-base);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--sd-color-brand-blue);
}

.sd-home-hero__move { animation: sd-hh-gather 2.4s var(--sd-ease-standard) 2.6s both; }

/* Final open circle (F-01, Session 5.2): 1.5 × larger from 640px (radius 192: --x1l / --y1l, ring--large).
   On phones the labels would run off the screen, so the circle keeps the earlier size there (radius 128). */
.sd-home-hero__move { --x1: var(--x1l); --y1: var(--y1l); }
.sd-home-hero__ring--small { display: none; }
@media (max-width: 639.98px) {
  .sd-home-hero__move { --x1: var(--x1s); --y1: var(--y1s); }
  .sd-home-hero__ring--large { display: none; }
  .sd-home-hero__ring--small { display: inline; }
}

.sd-home-hero__pop {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  animation: sd-hh-pop 300ms var(--sd-ease-out) both;
}

.sd-home-hero__orbit {
  transform-box: view-box;
  transform-origin: 220px 236px;
  animation: sd-hh-turn 3s var(--sd-ease-standard) 5s both;
}

.sd-home-hero__orbit .sd-home-hero__label {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: sd-hh-unturn 3s var(--sd-ease-standard) 5s both;
}

/* Labels: effectively instant, no visible fade */
.sd-home-hero__show { opacity: 0; animation: sd-hh-show 60ms linear both; }

@keyframes sd-hh-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-hh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sd-hh-grow { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes sd-hh-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sd-hh-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sd-hh-gather {
  from { transform: translate(calc(var(--x0) * 1px), calc(var(--y0) * 1px)); }
  to { transform: translate(calc(var(--x1) * 1px), calc(var(--y1) * 1px)); }
}
@keyframes sd-hh-turn { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
@keyframes sd-hh-unturn { from { transform: rotate(0deg); } to { transform: rotate(-30deg); } }

/* Phones and tablets (Session 4.6; Blueprint 8.20, 15.29): the figure is stacked below the text, often below the fold.
   The script holds the sequence (data-state="waiting") until the figure is in view, so it is seen from the start.
   Without JS it plays on load, as before. */
.sd-home-hero__figure[data-state="waiting"] * { animation-play-state: paused; }

/* Reduced motion: the final state at once */
@media (prefers-reduced-motion: reduce) {
  .sd-home-hero__line { animation: none; opacity: 0; }
  .sd-home-hero__ring { animation: none; stroke-dashoffset: 0; }
  .sd-home-hero__center,
  .sd-home-hero__pop,
  .sd-home-hero__show { animation: none; opacity: 1; transform: none; }
  .sd-home-hero__move { animation: none; transform: translate(calc(var(--x1) * 1px), calc(var(--y1) * 1px)); }
  .sd-home-hero__orbit { animation: none; transform: rotate(30deg); }
  .sd-home-hero__orbit .sd-home-hero__label { animation: none; transform: rotate(-30deg); }
}