/* Homepage-only motion. Layout and all content remain usable without JavaScript. */
/* One rhythm for the Explore journey and every part of the gallery hover. */
.shm-brand {
  --shm-interaction-ms:1500;
  --shm-interaction-duration:calc(var(--shm-interaction-ms) * 1ms);
  --shm-interaction-ease:cubic-bezier(.333333,0,.666667,1);
}
/* This non-interactive region receives focus after scrolling, not a visible frame.
   Individual links keep their own keyboard focus outlines. */
.shm-brand .shm-brand-divisions[tabindex="-1"]:focus { outline:none; }

/* Let native anchor navigation animate the page; wheel scrolling remains untouched. */
@media (prefers-reduced-motion:no-preference) {
  html:has(> body.sino-brand-home) { scroll-behavior:smooth; }
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .shm-brand.has-scroll-motion .shm-brand-hero__media > :is(img,video) {
    position:absolute;
    inset:-90px 0 auto;
    height:calc(100% + 180px);
    transform:translate3d(0,var(--shm-drift-y,0px),0);
  }
  .shm-brand.has-scroll-motion .shm-brand-hero__caption {
    isolation:isolate;
    background:transparent;
    transform:translate3d(0,var(--shm-caption-drift,0px),0);
  }
  .shm-brand.has-scroll-motion .shm-brand-hero__caption::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--sino-paper);
    opacity:1;
    transform:translateY(0);
    transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,1,.36,1);
  }
  .shm-brand.has-scroll-motion .shm-brand-hero__caption.is-caption-waiting::before {
    opacity:0;
    transform:translateY(32px);
    transition:none;
  }
  .shm-brand.has-scroll-motion .shm-brand-division__photo img {
    height:calc(100% + 80px);
    margin-top:-40px;
    transform:translate3d(0,var(--shm-gallery-drift,0px),0);
    transition:filter .75s ease;
  }
  .shm-brand.has-scroll-motion .shm-motion-pending {
    opacity:0;
    pointer-events:none;
  }
  .shm-brand.has-scroll-motion .shm-brand-divisions a:has(.shm-motion-pending) { pointer-events:none; }
  .shm-brand.has-scroll-motion [data-shm-drift] > img {
    position:absolute;
    inset:-36px 0 auto;
    height:calc(100% + 72px);
    transform:translate3d(0,var(--shm-drift-y,0px),0);
  }
  .shm-brand.has-scroll-motion .shm-motion-word {
    opacity:var(--shm-word-opacity,1);
  }
  .shm-brand.has-scroll-motion .shm-brand-reason h3 > span:not(.shm-motion-word)::before {
    width:64px;
    transform-origin:left;
    transform:scaleX(calc(.375 + var(--shm-story-progress,0) * .625));
  }
}

/* Editorial accordion: one wider photograph, four unchanged heights and no autoplay.
   Keyboard focus takes precedence over the pointer; touch/reduced-motion stays equal. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .shm-brand-divisions {
    isolation:isolate;
    overflow:visible;
    transition:grid-template-columns var(--shm-interaction-duration) var(--shm-interaction-ease);
  }
  /* Section-wide ambient light, not a spotlight around an individual photo.
     Only the gradient shifts; the fixed canvas cannot create horizontal overflow. */
  .shm-brand-divisions::before {
    content:'';
    position:absolute;
    inset:-64px 0 -48px;
    z-index:-1;
    background-image:radial-gradient(ellipse 48% 48% at 50% 50%,color-mix(in srgb,var(--sino-burgundy) 14%,transparent) 0%,color-mix(in srgb,var(--sino-burgundy) 9%,transparent) 35%,color-mix(in srgb,var(--sino-burgundy) 4%,transparent) 65%,transparent 100%);
    background-size:115% 100%;
    background-position:var(--shm-division-light-x,50%) 50%;
    background-repeat:no-repeat;
    mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
    filter:blur(14px);
    opacity:.72;
    pointer-events:none;
    transition:background-position var(--shm-interaction-duration) var(--shm-interaction-ease),opacity var(--shm-interaction-duration) var(--shm-interaction-ease);
  }
  .shm-brand-divisions:has(> a:focus-visible)::before,
  .shm-brand-divisions:has(> a:hover)::before {
    opacity:1;
  }
  .shm-brand-divisions h2 {
    transition:color var(--shm-interaction-duration) var(--shm-interaction-ease);
  }
  .shm-brand .shm-brand-divisions .shm-brand-division__photo img {
    transition:filter var(--shm-interaction-duration) var(--shm-interaction-ease);
  }
  .shm-brand-divisions:has(> a:nth-child(1):focus-visible),
  .shm-brand-divisions:not(:has(> a:focus-visible)):has(> a:nth-child(1):hover) {
    --shm-division-light-x:40%;
    grid-template-columns:minmax(0,34fr) minmax(0,22fr) minmax(0,22fr) minmax(0,22fr);
  }
  .shm-brand-divisions:has(> a:nth-child(2):focus-visible),
  .shm-brand-divisions:not(:has(> a:focus-visible)):has(> a:nth-child(2):hover) {
    --shm-division-light-x:46.7%;
    grid-template-columns:minmax(0,22fr) minmax(0,34fr) minmax(0,22fr) minmax(0,22fr);
  }
  .shm-brand-divisions:has(> a:nth-child(3):focus-visible),
  .shm-brand-divisions:not(:has(> a:focus-visible)):has(> a:nth-child(3):hover) {
    --shm-division-light-x:53.3%;
    grid-template-columns:minmax(0,22fr) minmax(0,22fr) minmax(0,34fr) minmax(0,22fr);
  }
  .shm-brand-divisions:has(> a:nth-child(4):focus-visible),
  .shm-brand-divisions:not(:has(> a:focus-visible)):has(> a:nth-child(4):hover) {
    --shm-division-light-x:60%;
    grid-template-columns:minmax(0,22fr) minmax(0,22fr) minmax(0,22fr) minmax(0,34fr);
  }
}

/* Words stay inline, so wrapping, editable line breaks and DE hyphenation still work. */
.shm-brand-reason h3 > .shm-motion-word {
  display:inline;
  margin:0;
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  text-transform:none;
}
.shm-brand-reason h3 > .shm-motion-word::before { content:none; }

@media print {
  .shm-brand .shm-brand-divisions { grid-template-columns:repeat(4,minmax(0,1fr)); transition:none; }
  .shm-brand .shm-brand-divisions::before { display:none; }
  .shm-brand .shm-brand-division__photo { box-shadow:none !important; }
  .shm-brand .shm-motion-pending { opacity:1 !important; }
  .shm-brand .shm-motion-word { opacity:1 !important; }
  .shm-brand .shm-brand-hero__media > :is(img,video),
  .shm-brand [data-shm-drift] > img,
  .shm-brand .shm-brand-hero__caption,
  .shm-brand .shm-brand-division__photo img { transform:none !important; translate:none !important; }
  .shm-brand .shm-brand-division__title { transform:none !important; }
}