/* =========================================================
   V151 — REALISTIC GARAGE MOTION
   Airbrush Some Stuff
   Premium industrial sectional-door navigation transition.
   ========================================================= */
:root{
  --garage-bg:#05080a;
  --garage-panel:#242b2f;
  --garage-panel-dark:#12171a;
  --garage-panel-light:#3a4348;
  --garage-seam:#050708;
  --garage-track:#161d21;
  --garage-track-edge:#3a464c;
  --garage-rubber:#020304;
  --garage-glow:#00e6e6;
  --garage-glow-2:#16bfff;
  --garage-close-duration:440ms;
  --garage-open-duration:390ms;
  --garage-impact:5px;
  --garage-shadow:rgba(0,0,0,.78);
  --garage-ease-close:cubic-bezier(.30,.72,.18,1);
  --garage-ease-open:cubic-bezier(.46,.02,.17,1);
}

/* V151 is the only page-transition surface. */
.v149-garage-transition,.v150-page-transition{display:none!important}

.v151-page-transition{
  position:fixed;
  inset:0;
  z-index:2147483600;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint style;
  --garage-tone:var(--garage-glow);
  --garage-tone2:var(--garage-glow-2);
}
.v151-page-transition.is-active,
.v151-arriving .v151-page-transition{
  visibility:visible;
  pointer-events:auto;
}
.v151-page-transition[data-tone="business"]{--garage-tone:#00c7c9;--garage-tone2:#6feff0}
.v151-page-transition[data-tone="shop"]{--garage-tone:#00f0e8;--garage-tone2:#24c7ff}
.v151-page-transition[data-tone="gallery"]{--garage-tone:#6beeff;--garage-tone2:#c9fbff}
.v151-page-transition[data-tone="kids"]{--garage-tone:#2af2e1;--garage-tone2:#65dfff}
.v151-page-transition[data-tone="silver"]{--garage-tone:#b8d6df;--garage-tone2:#7ee8ff}
.v151-page-transition[data-tone="gold"]{--garage-tone:#ddb85b;--garage-tone2:#fff0a8}

.v151-garage-frame{position:absolute;inset:0;perspective:1500px;background:transparent}

/* Fixed architectural pieces. */
.v151-garage-top{
  position:absolute;z-index:8;left:0;right:0;top:0;height:42px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 20%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 8px),
    linear-gradient(180deg,#20282c 0,#11171a 54%,#06090b 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 9px 28px rgba(0,0,0,.72),inset 0 -2px 0 rgba(0,0,0,.85);
}
.v151-garage-top::after{
  content:"";position:absolute;left:4%;right:4%;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--garage-tone),var(--garage-tone2),transparent);
  opacity:.26;filter:blur(.3px);box-shadow:0 0 12px color-mix(in srgb,var(--garage-tone) 45%,transparent);
}
.v151-top-bolt{position:absolute;top:14px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a9b3b7 0 12%,#4c575c 28%,#0e1214 70%);box-shadow:0 1px 2px #000}
.v151-top-bolt.b1{left:3%}.v151-top-bolt.b2{left:25%}.v151-top-bolt.b3{left:50%}.v151-top-bolt.b4{left:75%}.v151-top-bolt.b5{right:3%}

.v151-track{
  position:absolute;z-index:10;top:34px;bottom:0;width:22px;
  background:
    radial-gradient(circle at 50% 18px,#8c979c 0 2px,#252d31 2.6px 5px,transparent 5.5px) 0 0/100% 78px repeat-y,
    linear-gradient(90deg,#030506 0,#151c20 18%,#3b464b 48%,#11171a 72%,#020304 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),0 0 24px rgba(0,0,0,.6);
}
.v151-track.left{left:0}.v151-track.right{right:0;transform:scaleX(-1)}
.v151-track::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;background:linear-gradient(#4d5a60,#111719 8%,#2a3439 50%,#0c1114 92%,#4a565b);opacity:.8}

.v151-door-viewport{
  position:absolute;z-index:4;left:18px;right:18px;top:34px;bottom:0;
  overflow:hidden;background:transparent;perspective:1200px;
}
.v151-door{
  position:absolute;inset:-1px 0 -26px;
  display:flex;flex-direction:column;
  transform:translate3d(0,-104%,0);
  will-change:transform;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  filter:drop-shadow(0 30px 36px rgba(0,0,0,.45));
}
.v151-arriving .v151-door,
.v151-page-transition.is-opening .v151-door{transform:translate3d(0,0,0)}

.v151-panel{
  position:relative;flex:1 1 0;min-height:54px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.018) 9%,transparent 24%,rgba(0,0,0,.08) 77%,rgba(0,0,0,.32) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.015) 1px 4px),
    linear-gradient(90deg,#151b1e 0,#2f383d 7%,#20272b 20%,#343d42 48%,#22292d 72%,#30383c 93%,#121719 100%);
  border-top:1px solid rgba(255,255,255,.065);
  border-bottom:4px solid var(--garage-seam);
  box-shadow:
    inset 0 7px 10px rgba(255,255,255,.025),
    inset 0 -12px 14px rgba(0,0,0,.22),
    0 4px 4px rgba(0,0,0,.52);
  transform-origin:50% 0;
  backface-visibility:hidden;
}
.v151-panel::before{
  content:"";position:absolute;inset:11% 2.2% 14%;border-radius:2px;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 10px 22px rgba(0,0,0,.08),inset 0 -10px 18px rgba(255,255,255,.012);
  background:linear-gradient(90deg,rgba(0,0,0,.09),transparent 5%,transparent 95%,rgba(0,0,0,.1));
}
.v151-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 37%,rgba(255,255,255,.024),transparent 16%),
    radial-gradient(ellipse at 69% 65%,rgba(0,0,0,.055),transparent 17%),
    linear-gradient(110deg,transparent 0 34%,rgba(255,255,255,.024) 43%,transparent 53% 100%);
  mix-blend-mode:screen;opacity:.58;
}
.v151-panel:nth-child(2n){filter:brightness(.96)}
.v151-panel:nth-child(3n){filter:brightness(1.025)}

.v151-hinge{
  position:absolute;z-index:4;bottom:-7px;width:50px;height:17px;border-radius:2px;
  background:
    radial-gradient(circle at 8px 8px,#9aa4a8 0 1.3px,#414a4f 1.8px 3px,#0a0d0f 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at 42px 8px,#9aa4a8 0 1.3px,#414a4f 1.8px 3px,#0a0d0f 3.5px 4.5px,transparent 5px),
    linear-gradient(180deg,#414b50,#13191c 55%,#080b0d);
  border:1px solid #050708;box-shadow:0 2px 4px #000,inset 0 1px 0 rgba(255,255,255,.12);
}
.v151-hinge.h1{left:13%}.v151-hinge.h2{left:50%;transform:translateX(-50%)}.v151-hinge.h3{right:13%}

.v151-door-decal{
  position:absolute;z-index:12;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(390px,44vw);padding:18px 24px 16px;text-align:center;
  background:linear-gradient(180deg,rgba(2,7,9,.82),rgba(3,7,9,.66));
  border:1px solid rgba(177,220,224,.18);border-radius:5px;
  box-shadow:0 20px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(0,0,0,.5);
}
.v151-door-decal::before{content:"";position:absolute;left:18%;right:18%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--garage-tone),transparent);opacity:.58}
.v151-door-decal img{display:block;width:min(285px,31vw);height:auto;margin:0 auto 10px;opacity:.86;filter:drop-shadow(0 8px 11px rgba(0,0,0,.48))}
.v151-garage-kicker{display:block;color:#96a4aa;font-size:.62rem;font-weight:900;letter-spacing:.28em;text-transform:uppercase}
.v151-garage-status{margin-top:5px;color:#f2fcfd;font-size:clamp(.67rem,.9vw,.78rem);font-weight:900;letter-spacing:.19em;text-transform:uppercase;text-shadow:0 0 14px color-mix(in srgb,var(--garage-tone) 34%,transparent)}
.v151-garage-status b{color:var(--garage-tone);font-weight:950}

.v151-bottom-seal{
  position:absolute;z-index:14;left:0;right:0;bottom:0;height:28px;
  transform-origin:50% 100%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 18%),
    repeating-linear-gradient(90deg,#020304 0 22px,#080b0d 22px 44px),
    linear-gradient(#0a0d0f,#010203);
  border-top:2px solid #0d1113;
  box-shadow:0 -3px 10px rgba(0,0,0,.66),0 9px 18px rgba(0,0,0,.48);
}
.v151-bottom-seal::after{content:"";position:absolute;left:2%;right:2%;bottom:1px;height:2px;background:linear-gradient(90deg,transparent,var(--garage-tone),var(--garage-tone2),transparent);opacity:.15;box-shadow:0 0 10px var(--garage-tone)}

/* The destination light lives behind the moving door. */
.v151-underlight{
  position:absolute;z-index:2;left:-8%;right:-8%;bottom:-40px;height:180px;opacity:0;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--garage-tone) 36%,transparent),transparent 62%);
  filter:blur(8px);transform:translateY(30px) scaleX(.84);pointer-events:none;
}
.v151-floor-line{position:absolute;z-index:16;left:0;right:0;bottom:0;height:3px;opacity:0;background:linear-gradient(90deg,transparent 3%,var(--garage-tone) 38%,#fff 50%,var(--garage-tone2) 63%,transparent 97%);box-shadow:0 0 28px color-mix(in srgb,var(--garage-tone) 78%,transparent);transform:scaleX(.18)}
.v151-impact-haze{position:absolute;z-index:15;left:-8%;right:-8%;bottom:-100px;height:260px;opacity:0;background:radial-gradient(ellipse at 50% 100%,rgba(180,221,224,.09),color-mix(in srgb,var(--garage-tone) 9%,transparent) 28%,transparent 64%);filter:blur(10px);pointer-events:none}
.v151-moving-reflection{position:absolute;z-index:13;top:0;bottom:0;width:16%;left:-25%;opacity:0;transform:skewX(-9deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),rgba(255,255,255,.13),rgba(255,255,255,.025),transparent);pointer-events:none;mix-blend-mode:screen}

.v151-page-transition.is-closing .v151-door{animation:v151GarageClose var(--garage-close-duration) var(--garage-ease-close) forwards}
.v151-page-transition.is-opening .v151-door{animation:v151GarageOpen var(--garage-open-duration) var(--garage-ease-open) forwards}
.v151-page-transition.is-closing .v151-moving-reflection{animation:v151ReflectionClose var(--garage-close-duration) ease-out both}
.v151-page-transition.is-opening .v151-moving-reflection{animation:v151ReflectionOpen var(--garage-open-duration) ease-out both}
.v151-page-transition.is-opening .v151-underlight{animation:v151Underlight var(--garage-open-duration) ease-out both}
.v151-page-transition.is-opening .v151-panel{animation:v151PanelLift var(--garage-open-duration) cubic-bezier(.4,.02,.2,1) both}
.v151-page-transition.is-opening .v151-panel:nth-child(1){animation-delay:0ms}.v151-page-transition.is-opening .v151-panel:nth-child(2){animation-delay:8ms}.v151-page-transition.is-opening .v151-panel:nth-child(3){animation-delay:14ms}.v151-page-transition.is-opening .v151-panel:nth-child(4){animation-delay:20ms}.v151-page-transition.is-opening .v151-panel:nth-child(5){animation-delay:26ms}.v151-page-transition.is-opening .v151-panel:nth-child(6){animation-delay:32ms}.v151-page-transition.is-opening .v151-panel:nth-child(7){animation-delay:38ms}

.v151-page-transition.is-hit .v151-bottom-seal{animation:v151SealCompression 170ms cubic-bezier(.3,.8,.2,1)}
.v151-page-transition.is-hit .v151-floor-line{animation:v151ImpactLine 260ms ease-out}
.v151-page-transition.is-hit .v151-impact-haze{animation:v151ImpactHaze 360ms ease-out}
.v151-page-transition.is-hit .v151-panel{animation:v151PanelRattle 155ms linear}
.v151-page-transition.is-hit .v151-door-decal{animation:v151DecalRattle 150ms linear}
.v151-page-transition.is-hit .v151-garage-top::after{animation:v151TopFlicker 250ms linear}

body.v151-impacting #mainContent,
body.v151-impacting .site-header{animation:v151ViewportImpact 145ms linear}

@keyframes v151GarageClose{
  0%{transform:translate3d(0,-104%,0)}
  70%{transform:translate3d(0,1.5%,0)}
  83%{transform:translate3d(0,-.42%,0)}
  92%{transform:translate3d(0,.16%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes v151GarageOpen{
  0%{transform:translate3d(0,0,0)}
  10%{transform:translate3d(0,.35%,0)}
  27%{transform:translate3d(0,-4.5%,0)}
  100%{transform:translate3d(0,-106%,0)}
}
@keyframes v151PanelLift{0%,16%{transform:rotateX(0deg) scaleY(1)}35%{transform:rotateX(-1.25deg) scaleY(.997)}70%,100%{transform:rotateX(0deg) scaleY(1)}}
@keyframes v151ReflectionClose{0%{left:-24%;opacity:0}18%{opacity:.28}100%{left:112%;opacity:0}}
@keyframes v151ReflectionOpen{0%{left:110%;opacity:0}22%{opacity:.23}100%{left:-24%;opacity:0}}
@keyframes v151Underlight{0%{opacity:.04;transform:translateY(34px) scaleX(.7)}38%{opacity:.72;transform:translateY(7px) scaleX(1)}100%{opacity:0;transform:translateY(-38px) scaleX(1.12)}}
@keyframes v151SealCompression{0%,100%{transform:scaleY(1)}32%{transform:scaleY(.67)}65%{transform:scaleY(1.08)}}
@keyframes v151ImpactLine{0%{opacity:0;transform:scaleX(.15)}24%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
@keyframes v151ImpactHaze{0%{opacity:0;transform:translateY(28px) scaleX(.75)}24%{opacity:.8}100%{opacity:0;transform:translateY(-22px) scaleX(1.08)}}
@keyframes v151PanelRattle{0%,100%{transform:translateX(0)}20%{transform:translateX(-.6px)}42%{transform:translateX(.9px)}68%{transform:translateX(-.35px)}}
@keyframes v151DecalRattle{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 1px),calc(-50% + 1px))}55%{transform:translate(calc(-50% + 1px),calc(-50% - .5px))}}
@keyframes v151TopFlicker{0%,100%{opacity:.26}16%{opacity:.8}34%{opacity:.14}53%{opacity:.5}70%{opacity:.23}}
@keyframes v151ViewportImpact{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(0,var(--garage-impact),0)}58%{transform:translate3d(0,-2px,0)}82%{transform:translate3d(0,1px,0)}}

/* Arrival mode: before deferred JS executes, the destination remains safely covered. */
.v151-arriving{background:#05080a}
.v151-arriving body{overflow:hidden}
.v151-arriving .v151-door{transform:translate3d(0,0,0)}

/* Faster/lighter mobile treatment while preserving the physical door identity. */
@media(max-width:900px),(pointer:coarse){
  :root{--garage-close-duration:390ms;--garage-open-duration:345ms;--garage-impact:2px}
  .v151-garage-top{height:34px}.v151-door-viewport{top:28px;left:13px;right:13px}.v151-track{top:28px;width:16px}
  .v151-panel::after{opacity:.34}.v151-hinge{width:40px;height:15px}.v151-hinge.h1{left:9%}.v151-hinge.h3{right:9%}
  .v151-door-decal{width:min(360px,72vw);padding:14px 16px 13px}.v151-door-decal img{width:min(250px,52vw)}
  .v151-garage-kicker{font-size:.56rem;letter-spacing:.2em}.v151-garage-status{font-size:.62rem;letter-spacing:.13em}
  .v151-impact-haze{filter:blur(6px)}
  body.v151-impacting #mainContent,body.v151-impacting .site-header{animation-duration:110ms}
}
@media(max-width:520px){
  .v151-hinge.h1,.v151-hinge.h3{display:none}.v151-panel::before{inset:13% 3% 16%}.v151-bottom-seal{height:23px}
  .v151-door-decal{top:49%;width:min(310px,78vw)}
  .v151-top-bolt.b2,.v151-top-bolt.b4{display:none}
}

/* Accessibility: keep a short, elegant cover instead of the physical slam. */
@media(prefers-reduced-motion:reduce){
  .v151-page-transition{background:#060a0d;transition:opacity 120ms ease}
  .v151-page-transition .v151-garage-frame{display:none!important}
  .v151-page-transition.is-active,.v151-arriving .v151-page-transition{visibility:visible}
  .v151-page-transition.is-opening{opacity:0}
  body.v151-impacting #mainContent,body.v151-impacting .site-header{animation:none!important}
}
