/* Progressive motion: the original document remains readable without JavaScript. */
.scroll-story-stage { display: none; }
.hero-line { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.hero-line > span { display: block; }

/* Keep interaction feedback while photographs retain their natural edges. */
@media screen {
  .button, .review-controls button { position: relative; overflow: hidden; isolation: isolate; }
  .tap-wave {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .motion-enabled .scroll-reveal {
    transition: opacity 1200ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
      translate 1450ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
      clip-path 1450ms cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
      transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
  }
  .motion-enabled .scroll-reveal.is-pending {
    opacity: 0;
    translate: 0 32px;
  }
  .motion-enabled .media-reveal { clip-path: inset(-8px -8px -8px -8px round 0); }
  .motion-enabled .media-reveal.is-pending { clip-path: inset(8% 4% 10% 4% round 28px); }
  .motion-enabled .manufacturing-intro.is-pending { translate: 24px 20px; }
  .motion-enabled .media-reveal > img {
    transform: translate3d(0, var(--image-drift, 0px), 0);
    transition: transform 1450ms cubic-bezier(.22,1,.36,1);
  }
  .motion-enabled .media-reveal.is-pending > img { transform: translate3d(0, 10px, 0) scale(1.055); }
  .motion-enabled .media-reveal > div {
    transition: translate 1350ms cubic-bezier(.22,1,.36,1) 140ms;
  }
  .motion-enabled .media-reveal.is-pending > div { translate: 0 12px; }
  .motion-enabled .scroll-reveal.is-immediate,
  .motion-enabled .scroll-reveal.is-immediate > * { transition-delay: 0ms; }
  .motion-enabled .scroll-reveal.is-immediate { clip-path: none; }
  .motion-enabled .scroll-reveal.is-immediate > div { translate: none; }
  .motion-enabled .scroll-reveal:focus-within,
  .motion-enabled .scroll-reveal.is-immediate {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .motion-enabled .scroll-reveal:focus-within {
    clip-path: none;
  }
  .motion-enabled .factory-hero-image {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--hero-scale, 1.025));
    transform-origin: center;
    animation: hero-zoom-arrive 2600ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-enabled .factory-hero-copy {
    transform: translate3d(0, var(--copy-shift, 0px), 0);
  }
  .motion-enabled .factory-hero-copy > :not(h1) {
    animation: hero-arrive 1400ms cubic-bezier(.22,1,.36,1) 100ms both;
  }
  .motion-enabled .hero-line > span { animation: headline-arrive 1650ms cubic-bezier(.22,1,.36,1) 180ms both; }
  .motion-enabled .hero-line:nth-child(2) > span { animation-delay: 360ms; }
  .motion-enabled .factory-hero-copy > :nth-child(3) { animation-delay: 440ms; }
  .motion-enabled .factory-hero-copy > :nth-child(4) { animation-delay: 560ms; }
  .motion-enabled.hero-awaiting .factory-hero-image,
  .motion-enabled.hero-awaiting .factory-hero-copy > :not(h1),
  .motion-enabled.hero-awaiting .hero-line > span { animation-play-state: paused; }
  .motion-enabled .factory-hero-copy:focus-within > * { animation: none; }
  .motion-enabled .factory-hero-copy:focus-within .hero-line > span { animation: none; }
  .motion-enabled .factory-secondary > span { animation: scroll-invitation 1000ms ease-in-out 1500ms 2; }

  .motion-enabled .quote-checklist.is-visible .check-icon {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border-radius: 50%;
    background: #b112260b;
    animation: check-arrive 600ms cubic-bezier(.34,1.5,.64,1) both;
  }
  .motion-enabled .quote-checklist li:nth-child(2) .check-icon { animation-delay: 90ms; }
  .motion-enabled .quote-checklist li:nth-child(3) .check-icon { animation-delay: 180ms; }
  .motion-enabled .quote-checklist li:nth-child(4) .check-icon { animation-delay: 270ms; }
  .motion-enabled .quote-checklist li:nth-child(5) .check-icon { animation-delay: 360ms; }
  .button, .review-controls button {
    transition: transform 250ms cubic-bezier(.2,.8,.2,1), background 250ms ease, box-shadow 250ms ease;
  }
  .button:active, .review-controls button:active { transform: scale(.965); }
  .text-link > span, .factory-secondary > span, .button > span:not(.tap-wave) {
    display: inline-block;
    transition: translate 300ms cubic-bezier(.2,.8,.2,1);
  }
  .guide-item .disclosure-icon { transition: transform 350ms cubic-bezier(.34,1.4,.64,1); }
  .guide-item[open] .disclosure-icon { transform: rotate(180deg); }
  .guide-item .disclosure-icon::after { transition: transform 300ms ease; }
  .quote-form input, .quote-form select, .quote-form textarea {
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  }
  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
    box-shadow: 0 0 0 4px #b1122610;
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-leave 180ms ease both; }
  ::view-transition-new(root) { animation: page-arrive 380ms cubic-bezier(.16,1,.3,1) both; }

  @keyframes hero-arrive {
    from { opacity: 0; translate: 0 20px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes headline-arrive {
    from { transform: translateY(105%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* Separate entrance scale from the scroll transform so the zoom never jumps. */
  @keyframes hero-zoom-arrive {
    from { scale: 1.075; }
    to { scale: 1; }
  }
  @keyframes check-arrive {
    from { transform: scale(.5) rotate(-18deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
  }
  @keyframes scroll-invitation {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 5px; }
  }
  @keyframes page-leave { to { opacity: 0; } }
  @keyframes page-arrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover { box-shadow: 0 7px 22px #b1122624; }
  .button:hover > span:not(.tap-wave) { translate: 2px -2px; }
  .text-link:hover > span, .brand-card:hover .text-link > span { translate: 4px 0; }
  .brand-visual img { transition: transform 650ms cubic-bezier(.16,1,.3,1); }
  .brand-card:hover .brand-visual img { transform: translateY(-3px) scale(1.025); }
  .product-image img, .gallery-main img { transition: transform 700ms cubic-bezier(.16,1,.3,1); }
  .product-image:hover img, .gallery-main:hover img { transform: scale(1.035); }
  .guide-item summary:hover .disclosure-icon { transform: rotate(90deg); }
  .guide-item[open] summary:hover .disclosure-icon { transform: rotate(180deg); }
}

@media screen and (min-width: 1001px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .making-story.story-ready {
    --scene-height: clamp(380px, 62svh, 620px);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: clamp(36px, 5vw, 80px);
    margin-top: 80px;
  }
  .motion-enabled .story-ready .scroll-story-stage {
    display: block;
    position: sticky;
    top: max(108px, calc((100svh - var(--scene-height)) / 2 + 36px));
    height: var(--scene-height);
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: #132329;
  }
  .scroll-story-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
  }
  .scroll-story-frame:first-child { opacity: 1; }
  .scroll-story-frame::after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, #071318db);
  }
  .scroll-story-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1.04);
  }
  .scroll-story-frame figcaption {
    position: absolute;
    z-index: 1;
    inset: auto 28px 47px;
    color: white;
    font-size: .875rem;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .07em;
  }
  .scroll-story-progress {
    position: absolute;
    z-index: 2;
    inset: auto 28px 27px;
    display: flex;
    gap: 8px;
  }
  .scroll-story-progress > span {
    height: 3px;
    flex: 1;
    background: #ffffff3d;
    overflow: hidden;
    border-radius: 3px;
  }
  .scroll-story-progress i {
    display: block;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .motion-enabled .story-ready .making-grid {
    display: block;
    margin: 0;
  }
  .motion-enabled .story-ready .making-card {
    display: flex;
    align-items: center;
    min-height: max(420px, 70svh);
    padding-block: 56px;
  }
  .motion-enabled .story-ready .making-card > img { display: none; }
  .motion-enabled .story-ready .making-card > div {
    position: relative;
    padding: 24px 0 24px 26px;
    border-left: 2px solid #d4d9dd;
    transition: border-color 450ms ease, translate 600ms cubic-bezier(.16,1,.3,1);
  }
  .motion-enabled .story-ready .making-card > div::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(var(--chapter-progress, 0));
    transform-origin: center top;
  }
  .motion-enabled .story-ready .making-card.is-current > div { translate: 0 -6px; }
  .motion-enabled .story-ready .making-card .eyebrow {
    font-size: .875rem;
    letter-spacing: .06em;
    transition: color 450ms ease;
  }
  .motion-enabled .story-ready .making-card.is-current .eyebrow { color: var(--accent); }
  .motion-enabled .story-ready .making-card h3 {
    font-size: clamp(2.1rem, 3.4vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: -.045em;
    margin-top: 20px;
    text-wrap: balance;
  }
  .motion-enabled .story-ready .making-card p:not(.eyebrow) {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-top: 23px;
    max-width: 390px;
  }
}

@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .motion-enabled .scroll-reveal.is-pending { translate: 0 18px; }
  .motion-enabled .scroll-reveal { transition-duration: 1100ms, 1300ms, 1300ms, 350ms, 350ms, 350ms; }
  .motion-enabled .hero-line > span { animation-duration: 1450ms; }
  .motion-enabled .factory-hero-image { animation-name: hero-zoom-arrive-mobile; }
  @keyframes hero-zoom-arrive-mobile {
    from { scale: 1.045; }
    to { scale: 1; }
  }
  .motion-enabled .making-grid { grid-template-columns: 1fr; gap: 38px; }
  .motion-enabled .making-card:last-child { display: block; }
  .motion-enabled .making-card > img,
  .motion-enabled .making-card:last-child > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.65;
  }
  .motion-enabled .making-card:last-child > div { padding-top: 18px; }
  .motion-enabled .manufacturing-intro.is-pending { translate: 0 18px; }
}

@media (prefers-reduced-motion: reduce), print {
  .scroll-reveal { opacity: 1 !important; translate: none !important; clip-path: none !important; }
  .scroll-reveal > img, .scroll-reveal > div, .hero-line > span { transform: none !important; translate: none !important; }
  .factory-hero-image, .factory-hero-copy { transform: none !important; scale: 1 !important; }
  .factory-hero-copy > * { opacity: 1 !important; translate: none !important; }
  .scroll-story-stage { display: none !important; }
  .tap-wave { display: none !important; }
  @view-transition { navigation: none; }
}