/* ============================================================
   Schafer Services — shop motion layer (entrance, showroom,
   department transition)

   Ported from Garland's Shopify theme sections `schafer_entrance` and
   `schafer_showroom` (see DesignFiles/shopify-reference/). Mechanics,
   timings and geometry are his; only the type stack (Impact -> the
   site's --font-display for headline text, everything else stays on
   --font-body) and a handful of gap-filling rules were changed:

     - the missing keyframes his compiled CSS never shipped (si-cta-arrive,
       si-streak-pull, si-tunnel-pull, si-core-pull, si-scene-pull,
       sr-glow-in, and every srt-* keyframe but srt-shirt) are written
       here from their names and the rules that use them;
     - `html:not(.js)` rules replace Shopify's design-mode/noscript
       fallback so the page works with JS disabled (shop-motion.js adds
       the `js` class on <html> as its first statement);
     - a `.srt::backdrop` and `.srt__skip` / `.visually-hidden` were added
       because the dialog needs an opaque backdrop and a real skip
       button, which his section relied on other theme files for.
   ============================================================ */

/* Without script the entrance cannot animate, but it can still stand there: the
   films and door glow are the default (installed) values and the door is a plain
   link. So no-script visitors get the storefront at rest, the same picture a
   return visit gets; only the scroll instructions and the skip link go. */
html:not(.js) [data-intro-instructions], html:not(.js) .si-skip { display: none !important; }
html:not(.js) .sr-install { display: none; }
html:not(.js) .sr-final,
html:not(.js) .sr-hotspot,
html:not(.js) .sr-category-nav { opacity: 1 !important; pointer-events: auto !important; }
html:not(.js) .sr-skip { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------- Showroom (schafer_showroom) ---------------- */

.sr-showroom { min-height: 100svh; padding: clamp(34px, 5vw, 72px) clamp(16px, 3vw, 46px) clamp(58px, 7vw, 96px); scroll-margin-top: 82px; color: #f8f7fb; background: radial-gradient(circle at 14% 12%, #00d2ff26, transparent 30%), radial-gradient(circle at 86% 12%, #ff009926, transparent 30%), #080812; }
.sr-heading { display: flex; width: min(1320px, 100%); margin: 0 auto 24px; align-items: end; justify-content: space-between; gap: 28px; }
.sr-heading > div { max-width: 860px; }
.sr-kicker { margin: 0 0 7px; color: #54e5ff; font-family: var(--font-body); font-size: .74rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.sr-heading h2 { margin: 0; scroll-margin-top: 100px; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 5rem); line-height: .94; letter-spacing: -.02em; text-transform: uppercase; color: transparent; background: linear-gradient(90deg, #ff3154, #ffd124 28%, #49f779, #1bd8ff 72%, #ed3aff); background-clip: text; -webkit-background-clip: text; }
.sr-heading > div > p:last-child { margin: 12px 0 0; max-width: 680px; color: #c9c6d1; font-family: var(--font-body); font-size: clamp(.92rem, 1.3vw, 1.04rem); line-height: 1.55; }
.sr-skip { min-height: 44px; padding: 10px 15px; border: 1px solid #454353; border-radius: 999px; cursor: pointer; color: #f7f6fb; background: #11111c; font-family: var(--font-body); font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.sr-skip:hover, .sr-skip:focus-visible { border-color: #4ee4ff; outline: 2px solid #f33cff; outline-offset: 3px; }
.sr-scroll-shell { max-width: 1672px; margin: 0 auto; overflow: hidden; border: 1px solid #5adeff52; border-radius: clamp(12px, 2vw, 24px); background: #070711; box-shadow: 0 28px 90px #0009, 0 0 60px #00a4ff14; }
.sr-scene { position: relative; width: 100%; aspect-ratio: 1672/941; isolation: isolate; overflow: hidden; background: #070711; }
.sr-base, .sr-final, .sr-install, .sr-install img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-base { z-index: 0; }
.sr-final { z-index: 2; opacity: 0; transition: opacity .6s ease; }
.sr-showroom[data-state=ready] .sr-final { opacity: 1; }
.sr-install { z-index: 1; opacity: 0; filter: blur(13px) saturate(1.8) brightness(1.6); clip-path: var(--from); transition: clip-path .62s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, filter .62s ease; }
.sr-install.is-installed { opacity: 1; filter: none; clip-path: var(--to); }
.sr-hotspot { position: absolute; z-index: 3; display: flex; box-sizing: border-box; padding: 10px; align-items: flex-end; border: 1px solid #24ddff8f; border-radius: 14px; outline: 1px solid #ff2fbc57; outline-offset: 1px; opacity: 0; pointer-events: none; color: #fff; background: #05060e08; box-shadow: inset 0 0 5px #00d2ff2b, inset 0 0 8px #ff2fbc24; text-decoration: none; transition: opacity .28s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; }
.sr-hotspot.is-installed { opacity: 1; pointer-events: auto; animation: sr-glow-in .52s ease both; }
.sr-hotspot span { display: inline-flex; box-sizing: border-box; max-width: 100%; min-height: 38px; padding: 9px 13px; align-items: center; justify-content: center; border: 1px solid #ffffffb3; border-radius: 999px; color: #fff; background: #04050ed8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 8px #0fd4ff24; font-family: var(--font-body); font-size: clamp(.62rem, .78vw, .78rem); font-weight: 950; letter-spacing: .055em; line-height: 1.15; overflow-wrap: anywhere; text-align: center; text-transform: uppercase; }
.sr-hotspot:hover, .sr-hotspot:focus-visible { border-color: #ffe52f; outline: 2px solid #ff2fbc; outline-offset: 2px; background: #05060e2b; box-shadow: inset 0 0 12px #00d2ff8a, inset 0 0 18px #f52fb75c, inset 0 0 24px #ffe52f38; transform: translateY(-2px); }
.sr-hotspot:hover span, .sr-hotspot:focus-visible span { background: #070712f2; }
.sr-install--shirts { --from: inset(70% 91.5% 30% 8.5%); --to: inset(43% 83.5% 3% .5% round 14px); }
.sr-hotspot--shirts { left: .5%; top: 43%; width: 16%; height: 54%; }
.sr-install--banners { --from: inset(22.5% 88.75% 77.5% 11.25%); --to: inset(5% 78% 60% .5% round 14px); }
.sr-hotspot--banners { left: .5%; top: 5%; width: 21.5%; height: 35%; }
.sr-install--wraps { --from: inset(70% 9.25% 30% 90.75%); --to: inset(43% .5% 3% 82% round 14px); }
.sr-hotspot--wraps { left: 82%; top: 43%; width: 17.5%; height: 54%; justify-content: flex-end; }
.sr-install--window { --from: inset(37% 29% 63% 71%); --to: inset(25% 23% 51% 65% round 14px); }
.sr-hotspot--window { left: 65%; top: 25%; width: 12%; height: 24%; justify-content: flex-end; }
.sr-install--signs { --from: inset(22% 10.75% 78% 89.25%); --to: inset(5% .5% 61% 79% round 14px); }
.sr-hotspot--signs { left: 79%; top: 5%; width: 20.5%; height: 34%; justify-content: flex-end; }
.sr-install--decals { --from: inset(58% 78.25% 42% 21.75%); --to: inset(43% 74% 27% 17.5% round 14px); }
.sr-hotspot--decals { left: 17.5%; top: 43%; width: 8.5%; height: 30%; }
.sr-install--print { --from: inset(63.5% 50% 36.5% 50%); --to: inset(49% 37% 22% 37% round 14px); }
.sr-hotspot--print { left: 37%; top: 49%; width: 26%; height: 29%; justify-content: center; }
.sr-install--displays { --from: inset(42% 68.5% 58% 31.5%); --to: inset(27% 64% 43% 27% round 14px); }
.sr-hotspot--displays { left: 27%; top: 27%; width: 9%; height: 30%; justify-content: center; }
.sr-install--specialty { --from: inset(64.5% 27.5% 35.5% 72.5%); --to: inset(53% 20% 24% 65% round 14px); }
.sr-hotspot--specialty { left: 65%; top: 53%; width: 15%; height: 23%; justify-content: flex-end; }
.sr-install--design { --from: inset(30.5% 50% 69.5% 50%); --to: inset(16% 38% 55% 38% round 14px); }
.sr-hotspot--design { left: 38%; top: 16%; width: 24%; height: 29%; justify-content: center; }
.sr-help { margin: 14px auto 0; color: #858290; font-family: var(--font-body); font-size: .76rem; text-align: center; }
.sr-category-nav { display: flex; max-width: 1240px; margin: 24px auto 0; gap: 9px; justify-content: center; flex-wrap: wrap; opacity: 0; pointer-events: none; transition: opacity .35s; }
.sr-showroom[data-state=ready] .sr-category-nav, .sr-category-nav:focus-within { opacity: 1; pointer-events: auto; }
.sr-category-nav a { display: inline-flex; min-height: 44px; padding: 10px 15px; align-items: center; border: 1px solid #373648; border-radius: 999px; color: #f8f7fb; background: #11111d; font-family: var(--font-body); font-size: .72rem; font-weight: 850; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; }
.sr-category-nav a:hover, .sr-category-nav a:focus-visible { border-color: #42ddff; color: #5be5ff; outline: 2px solid #ea3cff; outline-offset: 3px; }
@media (max-width: 1100px) { .sr-scroll-shell { overflow-x: auto; scrollbar-color: #23d8ff #10101a; } .sr-scene { width: 1040px; max-width: none; } }
@media (max-width: 760px) { .sr-showroom { padding-inline: 0; } .sr-heading { padding: 0 17px; align-items: start; } .sr-heading h2 { font-size: clamp(2.35rem, 12vw, 3.5rem); } .sr-heading > div > p:last-child { font-size: .9rem; } .sr-skip { flex: 0 0 auto; padding-inline: 11px; font-size: .63rem; } .sr-scroll-shell { overflow-x: auto; border-inline: 0; border-radius: 0; scrollbar-color: #23d8ff #10101a; } .sr-scene { width: 1040px; max-width: none; } .sr-hotspot span { min-height: 42px; padding: 10px 13px; font-size: .7rem; } .sr-help:before { content: "Swipe to explore \00b7  "; } .sr-category-nav { padding: 0 15px; } }

/* ---------------- Department transition dialog (srt) ---------------- */

.srt-lock, .srt-lock body { overflow: hidden !important; overscroll-behavior: none; }
.srt { --srt-start-x: 0px; --srt-start-y: 0px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; color: #fff; background: transparent; contain: paint; }
.srt::backdrop { background: #050509; }
.srt-scene { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; display: none; contain: layout paint; }
.srt[data-active-transition=apparel] .srt-scene--apparel, .srt[data-active-transition=banners] .srt-scene--banners, .srt[data-active-transition=wraps] .srt-scene--wraps, .srt[data-active-transition=window] .srt-scene--window, .srt[data-active-transition=signs] .srt-scene--signs, .srt[data-active-transition=decals] .srt-scene--decals, .srt[data-active-transition=print] .srt-scene--print, .srt[data-active-transition=displays] .srt-scene--displays, .srt[data-active-transition=specialty] .srt-scene--specialty, .srt[data-active-transition=design] .srt-scene--design { display: block; }
.srt__origin { position: absolute; z-index: 1; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(calc(-50% + var(--srt-start-x)), calc(-50% + var(--srt-start-y))); }
.srt__skip { position: fixed; z-index: 9; top: 16px; right: 16px; min-height: 44px; padding: 11px 16px; border: 2px solid #fff; border-radius: 999px; cursor: pointer; color: #fff; background: #090910; font-family: var(--font-body); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.srt__skip:hover, .srt__skip:focus-visible { outline: 3px solid #ffe52f; outline-offset: 3px; }

.srt-apparel__press { position: absolute; left: 50%; top: 52%; width: min(520px, 76vw, 70vh); aspect-ratio: 1.18; opacity: 0; transform: translate(-50%, -45%); filter: drop-shadow(0 28px 38px #000b); }
.srt-apparel__head { position: absolute; left: 18%; top: 5%; width: 64%; height: 22%; border: 2px solid #5deaff66; border-radius: 20px; background: linear-gradient(145deg, #2b3141, #0a0b12 72%); }
.srt-apparel__head:before { content: ""; position: absolute; left: 12%; top: 24%; width: 30%; height: 30%; border-radius: 7px; background: linear-gradient(90deg, #25e7ff, #ffe028, #ff2fb5); }
.srt-apparel__head span { position: absolute; right: 14%; top: 22%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: #ff31b8; box-shadow: 0 0 14px #ff31b8; }
.srt-apparel__head i { position: absolute; right: -20%; top: 25%; width: 28%; height: 10%; border-radius: 999px; background: linear-gradient(#62697b, #151722); }
.srt-apparel__column { position: absolute; left: 43%; top: 20%; width: 14%; height: 58%; background: linear-gradient(90deg, #080910, #383e4c 50%, #080910); }
.srt-apparel__platen { position: absolute; z-index: 3; left: 24%; top: 34%; width: 52%; height: 8%; border: 2px solid #73efff6b; border-radius: 8px; background: #202534; }
.srt-apparel__bed { position: absolute; left: 15%; bottom: 20%; width: 70%; height: 13%; border: 2px solid #ffffff24; border-radius: 50% 50% 14px 14px; background: #171b27; }
.srt-apparel__base { position: absolute; left: 9%; right: 9%; bottom: 5%; display: flex; height: 17%; align-items: center; justify-content: center; gap: 8%; border: 2px solid #ffffff1f; border-radius: 14px; background: #10131d; }
.srt-apparel__base span { width: 7%; height: 10%; border-radius: 99px; background: #22e7ff; }
.srt-apparel__base span:nth-child(2) { background: #ffe22b; }
.srt-apparel__base span:nth-child(3) { background: #ff31b8; }
.srt-apparel__shirt { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(290px, 38vw, 39vh); aspect-ratio: 300/280; opacity: 0; transform: translate(calc(-50% + var(--srt-start-x)), calc(-50% + var(--srt-start-y))) scale(.35) rotate(-10deg); }
.srt-apparel__shirt svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.srt-apparel__shirt img { position: absolute; z-index: 2; left: 50%; top: 37%; width: 52%; height: auto; opacity: 0; transform: translate(-50%); }
.srt-banner__printer, .srt-print__press, .srt-decal__plotter, .srt-sign__gantry { position: absolute; z-index: 4; left: 50%; top: 24%; width: min(680px, 82vw); height: 116px; border: 2px solid #70edff77; border-radius: 18px; background: linear-gradient(145deg, #2a3040, #0a0c13 75%); box-shadow: 0 22px 44px #000a; opacity: 0; transform: translate(-50%, -20px); }
.srt-banner__printer i, .srt-print__press i, .srt-decal__plotter i, .srt-sign__gantry i { position: absolute; left: 8%; right: 8%; bottom: 17%; height: 9px; background: linear-gradient(90deg, #2df, #ffe32b, #ff30b8); }
.srt-banner__printer span, .srt-print__press span, .srt-decal__plotter span, .srt-sign__gantry span { position: absolute; right: 10%; top: 20%; width: 42px; height: 22px; border-radius: 5px; background: #21dfff; }
.srt-banner__printer b, .srt-print__press b, .srt-decal__plotter b, .srt-sign__gantry b { position: absolute; left: 9%; top: 19%; width: 46%; height: 10px; border-radius: 9px; background: #080910; }
.srt-banner__media { position: absolute; z-index: 3; left: 50%; top: 34%; width: min(590px, 72vw); height: 42vh; max-height: 380px; border: 2px solid #67ecff; background: linear-gradient(125deg, #0fdcff, #ffe32b 48%, #ff2fb4); opacity: 0; transform: translate(-50%) scaleY(.06); transform-origin: 50% 0; }
.srt-banner__media:after { content: "SCHAFER SERVICES"; position: absolute; top: 23%; right: 8%; bottom: 23%; left: 8%; display: grid; place-items: center; border: 3px solid #090b14; color: #090b14; background: #ffffffc9; font: 900 clamp(1.35rem, 5vw, 4rem)/1 var(--font-display), Arial, sans-serif; letter-spacing: .04em; }
.srt-banner__media i { position: absolute; z-index: 2; width: 17px; aspect-ratio: 1; border: 4px solid #111; border-radius: 50%; background: #f4f5f8; }
.srt-banner__media i:nth-child(1) { left: 3%; top: 4%; }
.srt-banner__media i:nth-child(2) { right: 3%; top: 4%; }
.srt-banner__media i:nth-child(3) { left: 3%; bottom: 4%; }
.srt-banner__media span { position: absolute; right: 3%; bottom: 4%; width: 17px; aspect-ratio: 1; border: 4px solid #111; border-radius: 50%; background: #f4f5f8; }
.srt-banner__roll { position: absolute; z-index: 5; left: 50%; top: 34%; width: min(620px, 76vw); height: 24px; border-radius: 999px; background: linear-gradient(#fff, #aeb5c3 42%, #272c38); opacity: 0; transform: translate(-50%); }
.srt-wrap__car { position: absolute; left: 50%; top: 50%; width: min(760px, 88vw); opacity: 0; transform: translate(-50%, -45%) scale(.84); }
.srt-wrap__car svg { display: block; width: 100%; height: auto; }
.srt-wrap__film { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: inset(0 100% 0 0); background: linear-gradient(115deg, #12dfff 0 28%, #ffe22b 28% 48%, #ff2eb3 48% 72%, transparent 72%); mix-blend-mode: screen; }
.srt-wrap__squeegee, .srt-window__squeegee { position: absolute; z-index: 6; left: 20%; top: 45%; width: 120px; height: 54px; border-radius: 10px 10px 24px 24px; background: linear-gradient(#ffe838, #c69000); opacity: 0; transform: rotate(-12deg); }
.srt-wrap__squeegee i, .srt-window__squeegee i { position: absolute; left: 28%; top: -44px; width: 44%; height: 50px; border-radius: 10px; background: #1a1d29; }
.srt-window__frame { position: absolute; left: 50%; top: 50%; width: min(660px, 82vw); height: min(420px, 58vh); border: 14px solid #202734; background: linear-gradient(135deg, #0b2639, #0c111b); box-shadow: 0 0 0 2px #65eaff; opacity: 0; transform: translate(-50%, -50%) scale(.85); }
.srt-window__frame > i, .srt-window__frame > span, .srt-window__frame > b { position: absolute; background: #2a3341; }
.srt-window__frame > i:first-child { left: 49%; top: 0; width: 2%; height: 100%; }
.srt-window__frame > i:nth-child(2) { left: 0; top: 49%; width: 100%; height: 2%; }
.srt-window__frame > span { display: none; }
.srt-window__frame > b { display: none; }
.srt-window__film { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle, #51e7ff 0 2px, transparent 3px) 0 0/14px 14px, linear-gradient(115deg, #03d9ffcc, #ff2bb4cc); clip-path: inset(0 100% 0 0); }
.srt-sign__board { position: absolute; z-index: 3; left: 50%; top: 54%; width: min(620px, 80vw); height: min(330px, 45vh); border: 6px solid #f3f6ff; background: #0b0e17; box-shadow: 0 0 0 4px #25e6ff, 0 0 36px #ff2db366; opacity: 0; transform: translate(-50%, -35%) scale(.7); }
.srt-sign__board:after { content: "SCHAFER SERVICES"; position: absolute; top: 15%; right: 15%; bottom: 15%; left: 15%; display: grid; place-items: center; color: #fff; background: linear-gradient(90deg, #1ee2ff, #ffe32b, #ff2fb4); font: 900 clamp(1.2rem, 5vw, 3.8rem)/1 var(--font-display), Arial, sans-serif; text-shadow: 0 3px #080910; }
.srt-sign__cutter, .srt-decal__blade { position: absolute; z-index: 5; left: 14%; top: 42%; width: 32px; height: 64px; border-radius: 8px; background: #ffe22b; opacity: 0; }
.srt-decal__sheet { position: absolute; left: 50%; top: 47%; width: min(650px, 82vw); height: 260px; border: 3px solid #69ebff; background: #f6f7fb; opacity: 0; transform: translate(-50%, -10%) scaleY(.1); transform-origin: 50% 0; }
.srt-decal__sheet svg { width: 100%; height: 100%; }
.srt-decal__sheet i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(110deg, #ff30b8aa, #ffe22b99, #20dfff99); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 92%); }
.srt-print__cards { position: absolute; left: 50%; top: 48%; width: min(560px, 78vw); height: 240px; opacity: 0; transform: translate(-50%); }
.srt-print__cards i { position: absolute; left: 50%; top: 0; width: 220px; max-width: 45vw; aspect-ratio: 1.75; border: 2px solid #fff; border-radius: 7px; background: linear-gradient(135deg, #0bdfff, #ffe22b 48%, #ff2fb4); box-shadow: 0 18px 28px #0008; transform: translate(-50%); }
.srt-print__cards i:nth-child(2) { transform: translate(-58%, 18px) rotate(-4deg); }
.srt-print__cards i:nth-child(3) { transform: translate(-42%, 34px) rotate(4deg); }
.srt-print__cards i:nth-child(4) { transform: translate(-63%, 52px) rotate(-7deg); }
.srt-print__cards i:nth-child(5) { transform: translate(-37%, 70px) rotate(7deg); }
.srt-display__tower { position: absolute; bottom: 18%; width: 22px; height: 56%; border: 3px solid #61eaff; background: #141824; opacity: 0; transform: scaleY(.08); transform-origin: 50% 100%; }
.srt-display__tower--left { left: 25%; }
.srt-display__tower--right { right: 25%; }
.srt-display__tower i { position: absolute; left: -56px; top: 7%; width: 128px; height: 12px; background: #ff2eb3; }
.srt-display__base { position: absolute; left: 18%; right: 18%; bottom: 15%; height: 22px; border-radius: 50%; background: #111724; box-shadow: 0 0 25px #22e5ff; opacity: 0; }
.srt-display__panel { position: absolute; left: 50%; top: 18%; width: min(520px, 62vw); height: 56%; border: 3px solid #fff; background: linear-gradient(135deg, #0cdfff, #ffe22b 50%, #ff2fb4); opacity: 0; transform: translate(-50%) scaleY(.05); transform-origin: 50% 100%; }
.srt-display__panel:after { content: "DISPLAY READY"; position: absolute; top: 20%; right: 20%; bottom: 20%; left: 20%; display: grid; place-items: center; color: #080a12; background: #fffc; font: 900 clamp(1.1rem, 4vw, 3rem)/1 var(--font-display), Arial, sans-serif; }
.srt-display__light { position: absolute; top: -12%; width: 28%; height: 90%; opacity: 0; background: linear-gradient(transparent, #20dfff42); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.srt-display__light--left { left: 4%; transform: rotate(12deg); }
.srt-display__light--right { right: 4%; transform: rotate(-12deg); background: linear-gradient(transparent, #ff2eb342); }
.srt-vault { position: absolute; top: 12%; right: 10%; bottom: 12%; left: 10%; border: 4px solid #4fe8ff; border-radius: 28px; background: #090d16; box-shadow: inset 0 0 80px #00dfff1b; opacity: 0; }
.srt-vault__door { position: absolute; z-index: 4; top: 0; width: 50%; height: 100%; background: linear-gradient(135deg, #242a38, #080a10); border: 2px solid #ff2eb355; }
.srt-vault__door--left { left: 0; transform-origin: 0 50%; }
.srt-vault__door--right { right: 0; transform-origin: 100% 50%; }
.srt-specialty__tray { position: absolute; z-index: 5; left: 50%; bottom: 18%; display: flex; width: min(520px, 76vw); height: 230px; align-items: end; justify-content: space-around; border-bottom: 18px solid #293142; opacity: 0; transform: translate(-50%); }
.srt-specialty__mug { width: 120px; height: 120px; border: 4px solid #26e5ff; border-radius: 10px 10px 28px 28px; background: #101522; }
.srt-specialty__mug i { position: absolute; width: 52px; height: 68px; margin: 22px 0 0 98px; border: 12px solid #26e5ff; border-left: 0; border-radius: 0 36px 36px 0; }
.srt-specialty__bottle { width: 75px; height: 170px; border: 4px solid #ffe32b; border-radius: 16px 16px 25px 25px; background: #14151d; }
.srt-specialty__bottle i { display: block; width: 42px; height: 26px; margin: -29px auto 0; border-radius: 8px; background: #ffe32b; }
.srt-specialty__badge { width: 135px; aspect-ratio: 1; border: 5px solid #ff2fb4; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, #0c1018 16% 100%); }
.srt-design__artboard { position: absolute; left: 50%; top: 50%; width: min(680px, 84vw); height: min(440px, 62vh); border: 2px solid #72edff; background: #f7f8fb; box-shadow: 0 22px 60px #000a; opacity: 0; transform: translate(-50%, -50%) scale(.78); }
.srt-design__vectors { position: absolute; top: 8%; right: 8%; bottom: 8%; left: 8%; width: 84%; height: 72%; fill: #fff; stroke: #0e1320; stroke-width: 6; }
.srt-design__artboard img { position: absolute; left: 50%; top: 50%; width: min(280px, 52%); height: auto; opacity: 0; transform: translate(-50%, -50%); }
.srt-design__mark { position: absolute; width: 26px; height: 26px; border: 4px solid; }
.srt-design__mark--one { left: 3%; top: 4%; border-color: #1ddfff; }
.srt-design__mark--two { right: 3%; top: 4%; border-color: #ff2eb3; }
.srt-design__mark--three { left: 3%; bottom: 4%; border-color: #ffe22b; }
.srt-design__mark--four { right: 3%; bottom: 4%; border-color: #0c111a; }
.srt-design__cursor { position: absolute; z-index: 5; right: 15%; bottom: 18%; width: 34px; height: 48px; background: #ff2eb3; clip-path: polygon(0 0, 100% 65%, 58% 69%, 76% 100%, 56% 100%, 41% 72%, 0 100%); opacity: 0; }

.srt.is-running .srt-apparel__press { animation: srt-machine 3s ease both; }
.srt.is-running .srt-apparel__platen { animation: srt-platen 3s ease both; }
.srt.is-running .srt-apparel__shirt { animation: srt-shirt 3s ease both; }
.srt.is-running .srt-apparel__shirt img { animation: srt-logo 3s linear both; }
.srt.is-running .srt-banner__printer, .srt.is-running .srt-print__press, .srt.is-running .srt-decal__plotter, .srt.is-running .srt-sign__gantry { animation: srt-machine 3s ease both; }
.srt.is-running .srt-banner__media { animation: srt-unfurl 3s ease both; }
.srt.is-running .srt-banner__roll { animation: srt-fade 3s ease both; }
.srt.is-running .srt-wrap__car, .srt.is-running .srt-window__frame { animation: srt-object 3s ease both; }
.srt.is-running .srt-wrap__film, .srt.is-running .srt-window__film { animation: srt-sweep 3s ease both; }
.srt.is-running .srt-wrap__squeegee, .srt.is-running .srt-window__squeegee { animation: srt-squeegee 3s ease both; }
.srt.is-running .srt-sign__board { animation: srt-sign 3s ease both; }
.srt.is-running .srt-sign__cutter, .srt.is-running .srt-decal__blade { animation: srt-tool 3s ease both; }
.srt.is-running .srt-decal__sheet { animation: srt-unfurl 3s ease both; }
.srt.is-running .srt-print__cards { animation: srt-cards 3s ease both; }
.srt.is-running .srt-display__tower, .srt.is-running .srt-display__panel { animation: srt-rise 3s ease both; }
.srt.is-running .srt-display__base, .srt.is-running .srt-display__light, .srt.is-running .srt-vault { animation: srt-fade 3s ease both; }
.srt.is-running .srt-vault__door--left { animation: srt-door-left 3s ease both; }
.srt.is-running .srt-vault__door--right { animation: srt-door-right 3s ease both; }
.srt.is-running .srt-specialty__tray { animation: srt-tray 3s ease both; }
.srt.is-running .srt-design__artboard { animation: srt-object 3s ease both; }
.srt.is-running .srt-design__artboard img { animation: srt-logo 3s linear both; }
.srt.is-running .srt-design__cursor { animation: srt-cursor 3s ease both; }

/* srt-shirt is Garland's own keyframe (kept verbatim). Every other srt-*
   keyframe below is 3 s long to match the "animation: … 3s" rules above,
   filling gaps his compiled CSS did not ship. */
@keyframes srt-shirt { 0% { opacity: 0; transform: translate(calc(-50% + var(--srt-start-x)), calc(-50% + var(--srt-start-y))) scale(.35) rotate(-10deg); } 6% { opacity: 1; } 27%, 64% { opacity: 1; transform: translate(-50%, -24%) scale(.9); } 80% { opacity: 1; transform: translate(-50%, -38%) scale(1.08); } to { opacity: 0; transform: translate(-50%, -46%) scale(3); } }

/* Shared by heterogeneous elements (apparel press + the banner/print/decal/
   sign gantries), so it only touches opacity/filter — never transform —
   to avoid clobbering each element's own base position. */
@keyframes srt-machine { 0% { opacity: 0; filter: blur(10px) brightness(1.6); } 20% { opacity: 1; filter: blur(0) brightness(1); } 100% { opacity: 1; filter: blur(0) brightness(1); } }
/* The heat-press platen: descends onto the shirt, holds, lifts away. */
@keyframes srt-platen { 0% { opacity: 0; transform: translateY(-34px); } 22% { opacity: 1; transform: translateY(-34px); } 34%, 66% { opacity: 1; transform: translateY(4px); } 82%, 100% { opacity: 0; transform: translateY(-34px); } }
/* Shared by the shirt logo and the design-artboard logo: a small print
   that "stamps in" partway through, after the machinery has arrived. */
@keyframes srt-logo { 0%, 42% { opacity: 0; } 52% { opacity: 1; } 100% { opacity: 1; } }
/* Shared by the banner media and the decal sheet: unrolls/unfurls down
   from its top edge. */
@keyframes srt-unfurl { 0% { opacity: 0; transform: translate(-50%) scaleY(.04); } 14% { opacity: 1; } 62%, 100% { opacity: 1; transform: translate(-50%) scaleY(1); } }
/* Generic fade-in, used by every element whose base transform already
   matches its finished position (roll, display base/light, vault). */
@keyframes srt-fade { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 1; } }
/* Shared by the wrap car, the window frame and the design artboard: a
   soft focus-pull arrival. Never touches transform (each element's base
   translate/scale differs), so it stays opacity + filter only. */
@keyframes srt-object { 0% { opacity: 0; filter: blur(6px); } 24% { opacity: 1; filter: blur(0); } 100% { opacity: 1; filter: blur(0); } }
/* Shared by the wrap film and window film: identical base clip-path, so
   this is a clean left-to-right wipe reveal. */
@keyframes srt-sweep { 0%, 12% { clip-path: inset(0 100% 0 0); } 78%, 100% { clip-path: inset(0 0 0 0); } }
/* Shared by the wrap and window squeegees (identical base rule): sweeps
   across the panel it is clearing. */
@keyframes srt-squeegee { 0% { opacity: 0; transform: translateX(-60px) rotate(-12deg); } 14% { opacity: 1; } 80% { opacity: 1; transform: translateX(220px) rotate(-8deg); } 100% { opacity: 0; transform: translateX(260px) rotate(-8deg); } }
/* Single-use: the finished sign board rises into place and settles with
   a brightness flicker as its face lights up. */
@keyframes srt-sign { 0% { opacity: 0; transform: translate(-50%, -35%) scale(.7); filter: brightness(1); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); filter: brightness(1); } 55% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.6); } 62% { filter: brightness(.9); } 70%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.15); opacity: 1; } }
/* Shared by the sign cutter and decal blade (identical base rule): a
   cutting tool sliding back and forth. */
@keyframes srt-tool { 0% { opacity: 0; transform: translateX(0); } 16% { opacity: 1; } 38% { transform: translateX(160px); } 60% { transform: translateX(20px); } 82% { transform: translateX(140px); } 100% { opacity: 0; transform: translateX(60px); } }
/* Single-use: the fanned card stack rises and settles into frame. */
@keyframes srt-cards { 0% { opacity: 0; transform: translate(-50%, 60px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 0); } }
/* Shared by the display towers and panel: grow up from the floor. */
@keyframes srt-rise { 0% { opacity: 0; transform: translate(-50%) scaleY(.05); } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%) scaleY(1); } }
/* Single-use vault doors: swing open on their own hinge edge. */
@keyframes srt-door-left { 0%, 30% { transform: rotateY(0deg); } 100% { transform: rotateY(-105deg); } }
@keyframes srt-door-right { 0%, 30% { transform: rotateY(0deg); } 100% { transform: rotateY(105deg); } }
/* Single-use: the specialty tray (mug/bottle/badge) rises into frame. */
@keyframes srt-tray { 0% { opacity: 0; transform: translate(-50%, 70px); } 34% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 0); } }
/* Single-use: the design cursor drags a stroke across the artboard. */
@keyframes srt-cursor { 0%, 30% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 1; } 100% { opacity: 1; transform: translate(-190px, -140px); } }

@media (max-width: 1100px) { }
@media (prefers-reduced-motion: reduce) { .sr-final, .sr-install, .sr-hotspot, .sr-category-nav, .srt, .srt *, .srt *:before, .srt *:after { transition: none !important; animation: none !important; } }

/* ---------------- Entrance (schafer_entrance) ---------------- */

.si-intro { --si-mask: 0%; --si-glow: 1; position: relative; z-index: 100000; width: 100%; height: 100svh; min-height: 540px; overflow: hidden; color: #fff; background: #050509; }
.si-intro[hidden] { display: none !important; }
.si-intro[data-enhanced=true] { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100svh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.si-intro[data-enhanced=true]::-webkit-scrollbar { display: none; }
.si-track { position: relative; height: 100%; }
.si-intro[data-enhanced=true] .si-track { height: 320svh; }
.si-stage { position: sticky; top: 0; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate; background: #050509; }
.si-canvas { position: absolute; inset: 50% auto auto 50%; width: max(100vw, 177.78svh); aspect-ratio: 16/9; transform: translate(-50%, -50%); background: #050509; }
.si-storefront { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.si-film { position: absolute; z-index: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #58e1ff73; background: linear-gradient(135deg, #0bf3, #ff00913d), #05060ee8; box-shadow: inset 0 0 45px #0009, 0 0 17px #19d8ff45; }
.si-film:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: linear-gradient(105deg, transparent 24%, #ffffff16 42%, transparent 58%), radial-gradient(circle at 25% 20%, #13d8ff1f, transparent 35%); mix-blend-mode: screen; }
.si-film-texture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .34; background-image: radial-gradient(circle, #ffffff6b 0 1px, transparent 1.25px); background-size: 5px 5px; }
.si-film img { position: relative; z-index: 1; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 0 12px #00cdff5c); }
.si-film--left { left: 13.35%; top: 27.3%; width: 24.25%; height: 36.6%; clip-path: inset(0 0 0 var(--si-mask)); }
.si-film--right { left: 61.9%; top: 27.3%; width: 23.9%; height: 36.6%; clip-path: inset(0 var(--si-mask) 0 0); }
.si-door-glow { position: absolute; z-index: 2; left: 41.35%; top: 34.7%; width: 17.3%; height: 36.1%; border: 3px solid transparent; border-radius: 7px; opacity: var(--si-glow); border-color: #00e5ff; outline: 2px solid #ff28b8; outline-offset: 3px; background: transparent; box-shadow: inset 0 0 14px #00e5ff70, inset 0 0 26px #ff28b866, 0 0 22px #00e5ff, 0 0 42px #ff28b8, 0 0 68px #ffe52f70; pointer-events: none; }
.si-enter, .si-fallback { position: absolute; z-index: 3; left: 50%; top: 52.5%; display: inline-flex; box-sizing: border-box; width: clamp(152px, 15.8%, 262px); max-width: calc(17.3% - 12px); min-width: 0; min-height: 56px; padding: 14px clamp(10px, 1vw, 20px); align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; transform: translate(-50%, -50%); color: #070711; background: linear-gradient(90deg, #00e5ff, #54ee8a 32%, #ffe52f 58%, #ff28b8); box-shadow: 0 0 0 3px #00e5ff, 0 0 0 6px #ff28b8, 0 0 38px #ffe52fb0; font: 950 clamp(.64rem, .82vw, 1rem)/1.1 var(--font-body); letter-spacing: .075em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.si-enter[hidden] { display: none !important; }
.si-enter:focus-visible, .si-fallback:focus-visible, .si-transition-skip:focus-visible, .si-skip:focus-visible { outline: 4px solid #fff; outline-offset: 6px; }
.si-intro[data-enhanced=true] .si-fallback { display: none; }
.si-intro[data-enhanced=true][data-state=capturing] { --si-mask: 100%; --si-glow: 0; }
.si-intro[data-enhanced=true][data-state=capturing] .si-enter { visibility: hidden; opacity: 0; pointer-events: none; }
.si-intro[data-state=ready] { overflow: hidden; }
.si-intro[data-state=ready] .si-enter { visibility: visible; opacity: 1; animation: si-cta-arrive .48s ease-out both; }
.si-skip { position: fixed; z-index: 8; top: 16px; left: 16px; padding: 12px 16px; border-radius: 8px; transform: translateY(-180%); color: #090910; background: #fff; font: 800 .9rem/1.2 var(--font-body); text-decoration: none; transition: transform .18s ease; }
.si-skip:focus { transform: translateY(0); }
.si-tunnel { position: fixed; z-index: 5; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; overflow: hidden; visibility: hidden; opacity: 0; background: radial-gradient(circle, #050509 0 5%, #020205 40%, #000); pointer-events: none; }
.si-intro[data-state=tunnel] .si-tunnel { visibility: visible; opacity: 1; }
.si-tunnel-streaks { position: absolute; width: 160vmax; aspect-ratio: 1; border-radius: 50%; opacity: .82; background: repeating-conic-gradient(from 0deg, #00e5ff 0 2deg, transparent 2deg 7deg, #ff28b8 7deg 9deg, transparent 9deg 14deg, #ffe52f 14deg 16deg, transparent 16deg 21deg); filter: blur(1px) saturate(1.35); mask-image: radial-gradient(circle, transparent 0 6%, #000 13% 100%); -webkit-mask-image: radial-gradient(circle, transparent 0 6%, #000 13% 100%); }
.si-tunnel-ring { position: absolute; width: 42vmin; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #0000 0 5%, #00e5ff 6% 8%, #0000 9% 13%, #ff28b8 14% 17%, #0000 18% 22%, #ffe52f 23% 26%, #0000 27% 31%), conic-gradient(from 30deg, #00e5ff, #080810 20%, #ff28b8 40%, #080810, #ffe52f 76%, #080810 90%, #00e5ff); filter: saturate(1.45) drop-shadow(0 0 22px #00e5ff); }
.si-tunnel-ring--two { width: 28vmin; opacity: .75; animation-delay: .08s; }
.si-tunnel-core { position: absolute; width: 8vmin; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 25px #fff, 0 0 70px #00e5ff, 0 0 110px #ff28b8; }
.si-intro[data-state=tunnel] .si-tunnel-streaks { animation: si-streak-pull 1.65s cubic-bezier(.2, .8, .2, 1) both; }
.si-intro[data-state=tunnel] .si-tunnel-ring { animation: si-tunnel-pull 1.65s cubic-bezier(.2, .8, .2, 1) both; }
.si-intro[data-state=tunnel] .si-tunnel-core { animation: si-core-pull 1.65s cubic-bezier(.45, 0, .8, .25) both; }
.si-transition-skip { position: fixed; z-index: 9; right: 20px; bottom: 20px; min-height: 44px; padding: 11px 16px; border: 2px solid #fff; border-radius: 999px; cursor: pointer; color: #fff; background: #090910; font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.si-transition-skip[hidden] { display: none !important; }
.si-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.si-status { z-index: -1; }
.si-intro[data-state=tunnel] .si-canvas { animation: si-scene-pull 1.65s cubic-bezier(.5, 0, .8, .3) both; }
.schafer-intro-active .site-header { visibility: hidden !important; }
/* At rest (data-state=rest): the storefront already branded, the door a plain link,
   no scroll capture. It sits in normal flow under the sticky header, so it must not
   outrank the header (the 100000 above is for the captured, fixed state), and it
   fits the viewport minus the header instead of overfilling it. --header-h is
   measured by main.js. */
.si-intro[data-state=rest], html:not(.js) .si-intro { z-index: 1; height: calc(100svh - var(--header-h, 60px)); min-height: 420px; }
.si-intro[data-state=rest] .si-stage, html:not(.js) .si-stage { height: 100%; min-height: 0; }
.si-intro[data-state=rest] .si-skip, .si-intro[data-state=rest] .si-enter, .si-intro[data-state=rest] .si-transition-skip { display: none !important; }
/* Portrait phones. The canvas is sized to FILL the viewport height, which on a
   16:9 image and a tall screen means roughly three times the screen's width —
   so a phone saw the door and almost nothing else, with the window graphics
   (the whole point of the animation) cropped off both edges. Fit the width
   instead and let the stage hug the storefront rather than the screen. */
@media (max-aspect-ratio: 4/5) {
  /* The desktop rule caps the pill to the door's width, and on a phone the door is
     about 90px wide while the label needs 116px, so the words spilled past the pill
     in every state. Let the pill size to its label here and sit across the door. */
  .si-enter, .si-fallback { width: auto; max-width: none; min-width: 0; min-height: 48px; padding: 10px 16px; font-size: .68rem; }
  .si-door-glow { border-width: 2px; }
  /* Cap the overscale at 1.36x the screen rather than fitting exactly: it keeps
     the storefront large while guaranteeing both window graphics stay in frame,
     since they span 13%-86% of the image's width. */
  .si-canvas { width: min(max(100vw, 177.78svh), 133vw); }
  .si-stage { height: 100svh; display: grid; align-content: center; }
  /* At rest the canvas is 133vw wide, so 16:9 makes it 75vw tall: hug that rather
     than leave black bands above and below a phone-width storefront. */
  .si-intro[data-state=rest], html:not(.js) .si-intro { height: min(calc(100svh - var(--header-h, 60px)), 75vw); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { html, .page-wrapper { scroll-behavior: auto !important; } .si-film--left, .si-film--right { clip-path: inset(0); } .si-door-glow { opacity: 1; } .si-enter, .si-fallback, .si-skip, .si-tunnel, .si-tunnel-ring, .si-tunnel-streaks, .si-tunnel-core, .si-canvas { animation: none !important; transition: none !important; } }

/* Single-use: the "Get branded now" CTA pops in once the entrance reaches
   ready state. */
@keyframes si-cta-arrive { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 65% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* The CMYK streak disc: spins up and zooms toward the viewer. */
@keyframes si-streak-pull { 0% { opacity: .35; transform: scale(.4) rotate(0deg); } 100% { opacity: .9; transform: scale(1.3) rotate(40deg); } }
/* The two tunnel rings: counter-rotate and rush past. */
@keyframes si-tunnel-pull { 0% { opacity: .15; transform: scale(.25) rotate(0deg); } 100% { opacity: 1; transform: scale(1.35) rotate(-60deg); } }
/* The white core: grows and blows past the camera (matches the rule's
   own accelerating easing). */
@keyframes si-core-pull { 0% { opacity: 0; transform: scale(.15); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
/* The storefront canvas itself: pulled inward and dimmed as the tunnel
   takes over. */
@keyframes si-scene-pull { 0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 100% { transform: translate(-50%, -50%) scale(1.6); filter: brightness(.15); } }
/* A hotspot's label pill: a quick bright flash settling to normal —
   opacity/filter only, so it never fights the hover translateY rule. */
@keyframes sr-glow-in { 0% { opacity: 0; filter: brightness(1.9) saturate(1.5); } 100% { opacity: 1; filter: brightness(1) saturate(1); } }