/* Shared View Transition scopes and cadence. */
@view-transition { navigation:auto; }
html { view-transition-name:none; }
/* The canvas must change with the theme immediately; the view transition owns
   the crossfade. Never leave browser/safe-area sampling on a CSS color tween. */
html,body { transition-property:none; }
html[data-transition="theme"] { view-transition-name:root; }
/* Cross-document content fades to the shell, not into another page.
   Keep the same header snapshot between content pages; Composer's header
   enters and exits with the rest of the page when crossing that boundary. */
html[data-document-transition]:not([data-document-pending]) main:not([hidden]),
html[data-transition="page"] main:not([hidden]) { view-transition-name:page-content; }
html[data-document-transition]:not([data-document-pending]) .shop-footer { view-transition-name:page-footer; }
html[data-document-transition][data-document-persist-header] .shop-header { view-transition-name:site-header; }
/* Unlike page content, the common site header never participates in fading.
   Preserve its outgoing snapshot until the destination header is ready. */
html[data-document-persist-header] .shop-header { opacity:1!important; }
html[data-document-transition]:not([data-document-persist-header]) :is(.shop-header,.topbar) { view-transition-name:page-header; }
html[data-document-pending] :is(main:not([hidden]),.shop-footer),
html[data-document-pending]:not([data-document-persist-header]) .shop-header { opacity:0; }
html[data-transition="detail"] #detailContent { view-transition-name:product-detail; }
html[data-transition="detail-actions"] #detailContent .hero-actions { view-transition-name:product-actions; }
html[data-transition="detail-actions"] #detailContent .hero-copy { position:relative; }
/* Tabs stay live and opaque; only the capability list transitions between views. */
html[data-transition="capabilities"] #capabilityList { view-transition-name:capability-content; }
::view-transition-old(capability-content),::view-transition-new(capability-content) {height:auto;object-fit:contain;object-position:left top;mix-blend-mode:normal;}
::view-transition-old(capability-content) {animation:180ms ease-out both spectrum-out;}
::view-transition-new(capability-content) {animation:220ms 180ms ease-out both spectrum-in;}
.disclosure-motion {display:flow-root;}
.disclosure-motion[data-revealing] {overflow:hidden;}
::view-transition-old(mobile-content),::view-transition-new(mobile-content) { height:auto; object-fit:contain; object-position:left top; mix-blend-mode:normal; }
::view-transition-old(mobile-content) { animation:180ms ease-out both spectrum-out; }
::view-transition-new(mobile-content) { animation:220ms 180ms ease-out both spectrum-in; }
::view-transition { pointer-events:none; }
::view-transition-group(*) { animation:none; }
::view-transition-old(page-content),::view-transition-new(page-content),
::view-transition-old(page-footer),::view-transition-new(page-footer),
::view-transition-old(page-header),::view-transition-new(page-header) { height:auto; object-fit:contain; object-position:left top; mix-blend-mode:normal; }
/* Keep the outgoing header opaque above the new header for the entire page
   crossfade. At the end, the live new header takes over without a fade. */
::view-transition-group(site-header) { animation:none!important; }
::view-transition-old(site-header) { animation:none!important;opacity:1; }
::view-transition-new(site-header) { animation:none!important;opacity:0; }
/* Preserve each captured detail's aspect ratio; its neighbor may have a different height. */
::view-transition-old(product-detail),::view-transition-new(product-detail),
::view-transition-old(product-actions),::view-transition-new(product-actions) { height:auto; object-fit:contain; object-position:left top; mix-blend-mode:normal; }
::view-transition-old(page-content),::view-transition-old(page-footer),::view-transition-old(page-header) { animation:200ms ease-out both spectrum-out; }
::view-transition-new(page-content),::view-transition-new(page-footer),::view-transition-new(page-header) { animation:260ms 210ms cubic-bezier(.23,1,.32,1) both spectrum-in; }
::view-transition-old(product-detail) { animation:180ms ease-out both spectrum-out; }
::view-transition-new(product-detail) { animation:220ms 180ms ease-out both spectrum-in; }
::view-transition-old(product-actions) { animation:220ms ease-out both spectrum-out;mix-blend-mode:plus-lighter; }
::view-transition-new(product-actions) { animation:220ms ease-out both spectrum-in;mix-blend-mode:plus-lighter; }
::view-transition-old(root) { animation:800ms ease both spectrum-out; }
::view-transition-new(root) { animation:800ms ease both spectrum-in; }
@keyframes spectrum-out { to { opacity:0; } }
@keyframes spectrum-in { from { opacity:0; } to { opacity:1; } }

/* One toggle glyph size across Home, Composer and About. */
[data-theme-toggle] .icon { width:16px; height:16px; }
@media(prefers-reduced-motion:reduce) {
 ::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}



/* A migrated bookmark must never expose the Composer loading cover. */
html[data-site-redirect] body{visibility:hidden!important}
html[data-site-redirect] .startup-loader{display:none!important}

/* Shop navigation changes only the step body. The persistent shell is captured
   separately, including when the first choice came from the Home lead-in. */
html[data-transition="shop-step"] .shop-header {view-transition-name:shop-header}
html[data-transition="shop-step"] #journey>.stepper {view-transition-name:shop-stepper}
html[data-transition="shop-step"] #stepContent {view-transition-name:shop-step-content}
html[data-transition="shop-step"][data-shop-persist-footer] .shop-footer {view-transition-name:shop-footer}
html[data-transition="shop-step"][data-shop-persist-footer] #commercialStatus {view-transition-name:shop-status}
html[data-transition="shop-step"] [data-step-label="1"] {view-transition-name:shop-step-one}
html[data-transition="shop-step"] [data-step-label="2"] {view-transition-name:shop-step-two}
html[data-transition="shop-step"] [data-step-label="3"] {view-transition-name:shop-step-three}

/* Keep the aligned shell stationary. Interpolate the content group's geometry
   too: a mobile lead-in and a standalone step may have different frame sizes;
   snapping the old snapshot straight to the new box causes a visible jump. */
::view-transition-group(shop-step-content),
::view-transition-group(shop-header),::view-transition-group(shop-stepper),
::view-transition-group(shop-footer),::view-transition-group(shop-status),
::view-transition-group(shop-step-one),::view-transition-group(shop-step-two),::view-transition-group(shop-step-three) {
  animation:revert;
  animation-duration:320ms;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(shop-header),::view-transition-old(shop-stepper),
::view-transition-old(shop-footer),::view-transition-old(shop-status) {animation:none;opacity:0}
::view-transition-new(shop-header),::view-transition-new(shop-stepper),
::view-transition-new(shop-footer),::view-transition-new(shop-status) {animation:none;opacity:1;mix-blend-mode:normal}
/* Only the active/completed step treatment crossfades, not the stepper's frame. */
::view-transition-old(shop-step-one),::view-transition-old(shop-step-two),::view-transition-old(shop-step-three) {
  animation:220ms ease both spectrum-out;mix-blend-mode:plus-lighter;
}
::view-transition-new(shop-step-one),::view-transition-new(shop-step-two),::view-transition-new(shop-step-three) {
  animation:220ms ease both spectrum-in;mix-blend-mode:plus-lighter;
}
::view-transition-old(shop-step-content),::view-transition-new(shop-step-content) {
  height:auto;object-fit:contain;object-position:center top;mix-blend-mode:plus-lighter;
}
/* Complementary opacity curves have no blank/washed-out interval. This same
   restrained crossfade serves desktop, phones and the inline Home entry. */
::view-transition-old(shop-step-content) {animation:260ms ease-in-out both spectrum-out}
::view-transition-new(shop-step-content) {animation:260ms ease-in-out both spectrum-in}
/* Mobile Shop steps keep the header and stepper at their existing screen
   coordinates while their two visual states crossfade. The entire stepper is
   one image: individual step snapshots would move or double-fade the labels. */
@media(max-width:720px) {
  html[data-transition="shop-step"] [data-step-label] {view-transition-name:none}
  ::view-transition-group(shop-header),::view-transition-group(shop-stepper) {
    animation:none!important;
  }
  ::view-transition-old(shop-header),::view-transition-old(shop-stepper),
  ::view-transition-new(shop-header),::view-transition-new(shop-stepper) {
    height:auto;object-fit:contain;object-position:center top;
    mix-blend-mode:plus-lighter;opacity:1;
  }
  ::view-transition-old(shop-header),::view-transition-old(shop-stepper) {
    animation:480ms ease-in-out both spectrum-out;
  }
  ::view-transition-new(shop-header),::view-transition-new(shop-stepper) {
    animation:480ms ease-in-out both spectrum-in;
  }
  /* The step body leaves first and the next screen enters second, without
     the rushed simultaneous 260ms crossfade used before. */
  ::view-transition-old(shop-step-content) {animation:240ms ease-in both spectrum-out}
  ::view-transition-new(shop-step-content) {animation:300ms 220ms ease-out both spectrum-in}

  /* Home lead-in -> Your context receives a little more time than ordinary
     in-flow steps; the shell remains visible across both content phases. */
  html[data-shop-choice-transition]::view-transition-old(shop-step-content) {
    animation:330ms ease-in both spectrum-out;
  }
  html[data-shop-choice-transition]::view-transition-new(shop-step-content) {
    animation:400ms 330ms ease-out both spectrum-in;
  }
  html[data-shop-choice-transition]::view-transition-old(shop-header),
  html[data-shop-choice-transition]::view-transition-old(shop-stepper) {
    animation:730ms ease-in-out both spectrum-out;
  }
  html[data-shop-choice-transition]::view-transition-new(shop-header),
  html[data-shop-choice-transition]::view-transition-new(shop-stepper) {
    animation:730ms ease-in-out both spectrum-in;
  }
}
html[data-page="home"] .stepper :is(li,.step-number) {transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease}
html[data-transition="shop-step"] .stepper :is(li,.step-number) {transition:none}

/* A click's capture-phase handoff holds the old snap appearance until the DOM
   commit. These attributes are transient; the scroll controllers keep ownership. */
html[data-page="home"] [data-shop-step-frozen] {translate:var(--shop-step-translate,none)!important}
html[data-page="home"] #journey>.stepper[data-shop-step-frozen] {
  opacity:var(--shop-step-opacity,1)!important;transition:none!important;
}
@media(prefers-reduced-motion:reduce) {
  html[data-page="home"] .stepper :is(li,.step-number) {transition:none}
  ::view-transition-group(shop-step-content),
  ::view-transition-group(shop-header),::view-transition-group(shop-stepper),
  ::view-transition-group(shop-footer),::view-transition-group(shop-status),
  ::view-transition-group(shop-step-one),::view-transition-group(shop-step-two),::view-transition-group(shop-step-three) {animation:none!important}
}