/* Upper pairs remain desktop-only; chapter videos also support touch devices. */
.construction-motion-video,
.construction-motion-toggle { display: none; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-construction-loop] > .construction-motion-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
  }
  [data-construction-loop].construction-motion-ready > .construction-motion-video { opacity: 1; }
  [data-construction-loop]:hover > .construction-motion-video { transform: scale(1.025); }
  [data-construction-loop] > figcaption { z-index: 1; }
  .construction-motion-toggle:not([hidden]) {
    display: block;
    position: absolute;
    left: 0;
    bottom: 12px;
    z-index: 5;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 0;
    background: transparent;
    color: rgba(22, 25, 23, .65);
    font: inherit;
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .construction-motion-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
}

/* Chapter controls stay inside the same image frame. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-construction-chapter] { position:relative; }
  [data-construction-chapter] > .construction-motion-toggle:not([hidden]) {
    left:16px; bottom:16px; padding:8px 11px; color:#fff;
    background:rgba(22,25,23,.7); border:0;
  }
}

/* Keep the working painter centered in the portrait material-study frame. */
[data-construction-chapter][data-construction-loop*="/whole-home-renovation/"] > .construction-motion-video { object-position:center; }

@media (prefers-reduced-motion: no-preference) {
  [data-construction-chapter] > .construction-motion-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
  }
  [data-construction-chapter].construction-motion-ready > .construction-motion-video { opacity: 1; }
  [data-construction-chapter] > figcaption { z-index: 1; }
  [data-construction-chapter] > .construction-motion-toggle:not([hidden]) {
    display: block;
    position: absolute;
    left: 0;
    bottom: 12px;
    z-index: 5;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 0;
    background: transparent;
    color: rgba(22, 25, 23, .65);
    font: inherit;
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
  }
  [data-construction-chapter] > .construction-motion-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
  [data-construction-chapter] { position: relative; }
  [data-construction-chapter] > .construction-motion-toggle:not([hidden]) {
    left:16px; bottom:16px; padding:10px 12px; min-height:44px; color:#fff;
    background:rgba(22,25,23,.7); border:0;
  }
}