/**
 * Studio Koncordia — homepage mobile adaptation (≤47.99rem / 768px)
 * Pinned compass + scroll-driven ink + horizontal beat slides (see home-scroll.js).
 */

@media (max-width: 47.99rem) {
  html:has(body[data-page="home"]) {
    scroll-behavior: auto;
  }

  .home-story {
    --home-mobile-gutter: 1.5rem;
    --home-visual-height: 13.5rem;
    --home-sticky-top: 4.75rem;
    --home-mobile-compass-top: calc(var(--home-sticky-top) + 0.35rem);
    --home-mobile-stage-top: calc(
      var(--home-mobile-compass-top) + var(--home-visual-height) + var(--space-4)
    );
  }

  /* Static draft background — viewport-fixed, no scroll coupling */
  body[data-page="home"]::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 682 / 1024;
    max-height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: url("../assets/img/home-draft-background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
    transform: none;
    will-change: auto;
  }

  body[data-page="home"] .home-story__draft-bg {
    display: none;
  }

  .home-story__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: var(--home-mobile-gutter);
    gap: 0;
  }

  .home-story__content {
    display: contents;
  }

  .home-act--hero {
    order: 1;
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    width: 100%;
    min-height: 0;
    padding: 0;
    padding-bottom: var(--space-4);
    padding-inline: 0;
    gap: 0;
    justify-content: flex-start;
  }

  .home-story__rail {
    order: 2;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin: 0;
    z-index: 1;
  }

  .home-act--narrative {
    order: 3;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  /* ——— Hero ——— */

  .home-hero__eyebrow {
    font-size: calc(var(--text-micro) * 1.35);
  }

  .home-hero__title {
    max-width: 100%;
    font-size: clamp(1.7rem, 8.1vw, 2.05rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
    text-wrap: pretty;
    hyphens: none;
  }

  .home-hero__title-continue {
    display: inline;
  }

  .home-hero__lede {
    max-width: none;
    width: 100%;
    font-size: 1.0625rem;
    line-height: 1.62;
  }

  .home-hero__cta {
    margin-top: var(--space-1);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .home-hero__cta .btn {
    justify-content: center;
    width: 100%;
  }

  /* ——— Compass band ——— */

  .home-visual__pin {
    position: relative;
    width: 100%;
    height: auto !important;
  }

  .home-visual {
    position: relative;
    top: auto;
    width: 100%;
    height: var(--home-visual-height);
    margin-inline: auto;
    pointer-events: none;
  }

  .home-story.is-home-compass-driven .home-visual {
    position: fixed;
    top: calc(var(--home-mobile-compass-pin-top) + var(--vv-offset-top, 0px));
    left: calc(var(--home-mobile-compass-pin-left) + var(--vv-offset-left, 0px));
    width: var(--home-mobile-compass-pin-width);
    right: auto;
    z-index: 4;
    margin-inline: 0;
    transform: translate3d(0, var(--home-mobile-compass-exit-shift, 0px), 0);
    will-change: transform;
  }

  .home-story.is-home-compass-offscreen .home-visual {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .home-visual__fallback-img {
    width: min(78%, 11rem);
  }

  /* Loading affordance — fallback stays visible; subtle pulse until 3D or fallback state */
  .home-visual.is-loading {
    position: relative;
  }

  .home-visual.is-loading::before {
    content: "";
    position: absolute;
    inset: 18% 22%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--color-bronze) 14%, transparent) 0%,
      transparent 72%
    );
    animation: home-visual-loading-pulse 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .home-visual.is-loading .home-visual__mount,
  .home-visual.is-loading .home-visual__fallback {
    position: relative;
    z-index: 1;
  }

  .home-story.is-home-experience-ready .home-visual.is-loading::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  @keyframes home-visual-loading-pulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.96);
    }
    50% {
      opacity: 0.7;
      transform: scale(1);
    }
  }

  /* ——— Narrative: pinned stage + horizontal beat slides ——— */

  .home-narrative__pin {
    --home-narrative-approach: 0;
    --home-narrative-pin-travel: 0;
    height: auto;
    min-height: 0;
    padding-top: var(--space-5);
    padding-bottom: 0;
    box-sizing: border-box;
    overflow-anchor: none;
  }

  .home-narrative__stage {
    position: relative;
    top: auto;
    transform: none;
    padding-block: var(--space-3);
    padding-inline: 0;
  }

  .home-story.is-home-narrative-pinned .home-narrative__stage {
    position: fixed;
    top: calc(var(--home-mobile-stage-top) + var(--vv-offset-top, 0px));
    left: calc(var(--home-mobile-stage-left) + var(--vv-offset-left, 0px));
    width: var(--home-mobile-stage-width);
    right: auto;
    z-index: 3;
    box-sizing: border-box;
  }

  .home-narrative__beats {
    position: relative;
    width: 100%;
    min-height: clamp(9.5rem, 34vw, 12.5rem);
    gap: 0;
    margin: 0;
    max-width: none;
    overflow: hidden;
  }

  .home-narrative__beat[data-home-emphasis-index="2"],
  .home-narrative__beat[data-home-emphasis-index="3"] {
    --beat-slide-x: -108%;
  }

  .home-story:not(.is-home-story-ready) .home-narrative__stage {
    visibility: hidden;
  }

  .home-narrative__beat {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: translate3d(var(--beat-slide-x, 0%), 0, 0);
    transition: none;
    pointer-events: none;
    will-change: transform;
  }

  .home-narrative__beat p {
    font-size: clamp(1.22rem, 5.35vw, 1.48rem);
    line-height: 1.32;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }

  .home-story.is-home-narrative-finished .home-narrative__stage {
    visibility: hidden;
  }

  /* ——— Services ——— */

  .home-ways {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--home-mobile-gutter);
    padding-block: var(--space-4) var(--space-8);
    margin-top: 0;
  }

  .home-ways__title {
    --ways-title-reveal: 1;
    max-width: 16ch;
    margin-bottom: var(--space-6);
    font-size: clamp(1.75rem, 7.4vw, 2.2rem);
    line-height: 1.12;
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  .home-ways__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-ways__card {
    --ways-card-reveal: 1;
    padding: var(--space-5);
    gap: var(--space-3);
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  .home-ways__card-title {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .home-ways__card-lede {
    font-size: 1rem;
    line-height: 1.55;
  }

  .home-ways__list li {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .home-ways__cta {
    min-height: 3rem;
    font-size: 0.75rem;
    padding-inline: var(--space-4);
  }

  /* ——— Swiss stats ——— */

  .home-stats {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--home-mobile-gutter);
    padding-block: var(--space-7) var(--space-8);
  }

  .home-stats__inner {
    gap: var(--space-6);
    align-items: stretch;
    text-align: left;
  }

  .home-stats__head {
    max-width: none;
    text-align: left;
  }

  .home-stats__title {
    font-size: clamp(1.95rem, 8.2vw, 2.55rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: normal;
    text-wrap: balance;
  }

  .home-stats__title::after {
    width: 3.25rem;
    margin-top: var(--space-3);
  }

  .home-stats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .home-stats__item {
    padding-inline-start: 0;
    border-inline-start: none;
    padding-block-end: var(--space-5);
    border-block-end: var(--hairline) solid var(--color-fog);
    align-items: flex-start;
    text-align: left;
  }

  .home-stats__item:last-child {
    padding-block-end: 0;
    border-block-end: none;
  }

  .home-stats__figure {
    font-size: clamp(2.85rem, 14vw, 3.75rem);
  }

  .home-stats__fact {
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.48;
  }

  .home-stats__label {
    padding-top: var(--space-1);
    font-size: 0.72rem;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="stat-1"] {
    transition-delay: 700ms;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="stat-2"] {
    transition-delay: 940ms;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="stat-3"] {
    transition-delay: 1180ms;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="label-1"] {
    transition-delay: 1520ms;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="label-2"] {
    transition-delay: 1760ms;
  }

  .home-stats.is-home-stats-visible [data-home-stats-part="label-3"] {
    transition-delay: 2000ms;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) {
  .home-story.is-home-compass-driven .home-visual {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    transform: none;
    visibility: visible;
    opacity: 1;
  }

  .home-story.is-home-narrative-pinned .home-visual {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
  }

  .home-story.is-home-narrative-pinned .home-narrative__stage {
    position: relative;
    top: auto;
  }

  .home-narrative__beat {
    position: relative;
    transform: none !important;
    margin-bottom: var(--space-4);
  }

  .home-narrative__beats {
    overflow: visible;
    min-height: 0;
  }
}