/* ==========================================================================
   Shop-shutter load reveal  (.sdoor)
   A roller shutter made of real slats: unlock tug → peek → pause → motor roll-up
   into a hood, with light spilling under the bottom rail. Transforms/opacity only.

   Timeline (total 2.6s)
   0.00–0.37  closed (painted on first paint, so there is no flash)
   0.37–0.49  lock lets go: curtain drops a few px, slats + rail rattle
   0.49–0.76  pull: lifts ~11% (the "peek"), small overshoot
   0.76–1.10  pause
   1.10–2.12  motor: accelerates and hits the hood at speed
   2.12–2.28  rail hits the hood (thud)  →  hood slides away by 2.52
   Hero content starts at --intro (set on <html>, default 1.8s).
   ========================================================================== */

:root { --shutter-h: 100vh; --intro: 1.8s; }
@supports (height: 100lvh) { :root { --shutter-h: 100lvh; } }

.sdoor {
  --rail: 56px;
  --hood: clamp(22px, 3.2vh, 34px);
  --n: 24;
  --fab-h: calc(var(--shutter-h) - var(--rail));
  --slat-h: calc(var(--fab-h) / var(--n));
  position: fixed; top: 0; left: 0; right: 0; height: var(--shutter-h); z-index: 200;
  pointer-events: none; overflow: hidden;
  animation: sdoor-gone 0s linear 2.65s forwards;
}

/* the dark "inside of the shop" that brightens as the gap opens */
.sdoor__dim { position: absolute; inset: 0; background: rgba(5, 6, 9, .88); animation: sdoor-dim 2.6s linear both; }

/* ---------- curtain = slats + painted logo + bottom rail ---------- */
.sdoor__curtain {
  position: absolute; inset: 0; will-change: transform;
  animation: sdoor-lift 2.6s linear both;
}
.sdoor__fabric { position: absolute; left: 0; right: 0; top: 0; bottom: var(--rail); }
.sdoor__slats { position: absolute; left: -10px; right: -10px; top: 0; bottom: 0; display: flex; flex-direction: column; }
.sdoor__slats i {
  --s: var(--red, #D20000); --sg: 1;
  position: relative; display: block; flex: none; height: var(--slat-h);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .30) 0, rgba(255, 255, 255, .09) 9%, rgba(255, 255, 255, 0) 24%,
      rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .24) 82%, rgba(0, 0, 0, .66) 100%),
    var(--s);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  animation: sdoor-jolt .6s linear .37s both, sdoor-buzz .09s steps(1, end) calc(1.1s + var(--d, 0ms)) 11 alternate;
}
.sdoor__slats i:nth-child(odd)  { --sg: 1; }
.sdoor__slats i:nth-child(even) { --sg: -1; }
.sdoor__slats i:nth-child(4n+1) { --s: #D20000; --d: 0ms; }
.sdoor__slats i:nth-child(4n+2) { --s: #C40000; --d: 22ms; }
.sdoor__slats i:nth-child(4n+3) { --s: #DB0B0B; --d: 11ms; }
.sdoor__slats i:nth-child(4n)   { --s: #CA0202; --d: 33ms; }
/* brushed-metal streaks + a little depth towards the edges */
.sdoor__slats::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .42) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, rgba(0, 0, 0, .02) 2px 5px);
}

/* the logo is painted on the slats: the grooves cut across it */
.sdoor__logo { position: absolute; inset: 0; display: grid; place-items: center; }
.sdoor__logo img { width: clamp(180px, 26vw, 340px); height: auto; filter: brightness(0) invert(1); opacity: .94; }
.sdoor__logo::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--slat-h) - 3px), rgba(70, 0, 0, .62) calc(var(--slat-h) - 3px) var(--slat-h));
}

/* ---------- bottom rail: handle, lock plates, light spilling underneath ---------- */
.sdoor__rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail);
  background: linear-gradient(180deg, #8f949d 0, #565a63 6%, #2d3037 20%, #1b1d23 62%, #0c0d11 100%);
  border-top: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 -7px 18px rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .45);
  transform-origin: 50% 0; animation: sdoor-swing .75s ease-out .37s both;
}
.sdoor__handle {
  position: absolute; left: 50%; top: 50%; width: clamp(72px, 8vw, 124px); height: 16px; margin: -7px 0 0 calc(clamp(72px, 8vw, 124px) / -2);
  border-radius: 8px; background: linear-gradient(#050608, #15171c);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .14);
}
.sdoor__lock {
  position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #727781, #1b1d23 70%);
  box-shadow: inset 0 0 0 2px #0a0b0e, 0 1px 0 rgba(255, 255, 255, .12);
}
.sdoor__lock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; margin: -6px 0 0 -3px; border-radius: 3px; background: #050608; }
.sdoor__lock--l { left: 18%; }
.sdoor__lock--r { right: 18%; }

/* ---------- fixed frame: guide tracks + hood ---------- */
.sdoor__track {
  position: absolute; top: 0; bottom: 0; width: clamp(10px, 1.4vw, 18px); animation: sdoor-fade 2.6s linear both;
  background: linear-gradient(90deg, #08090c, #2a2d34 55%, #0c0d11);
}
.sdoor__track--l { left: 0; box-shadow: 4px 0 10px rgba(0, 0, 0, .5); }
.sdoor__track--r { right: 0; transform: scaleX(-1); box-shadow: 4px 0 10px rgba(0, 0, 0, .5); }
.sdoor__hood {
  position: absolute; top: 0; left: 0; right: 0; height: var(--hood);
  background:
    radial-gradient(circle at 14px 50%, #3c4048 0 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 14px) 50%, #3c4048 0 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #3a3d45 0, #1c1e24 40%, #090a0d 100%);
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .7);
  animation: sdoor-hood 2.6s linear both;
}

/* ---------- keyframes ---------- */
@keyframes sdoor-lift {
  0%    { transform: translate3d(0, 0, 0);      animation-timing-function: linear; }
  14.2% { transform: translate3d(0, 0, 0);      animation-timing-function: cubic-bezier(.3, 0, .4, 1); }   /* lock lets go */
  18.8% { transform: translate3d(0, 7px, 0);    animation-timing-function: cubic-bezier(.2, .7, .2, 1); }   /* the pull */
  29.2% { transform: translate3d(0, -11%, 0);   animation-timing-function: ease-in-out; }
  32.3% { transform: translate3d(0, -11.8%, 0); animation-timing-function: ease-in-out; }                    /* overshoot */
  36.9% { transform: translate3d(0, -11%, 0);   animation-timing-function: linear; }
  42.3% { transform: translate3d(0, -11%, 0);   animation-timing-function: cubic-bezier(.35, 0, .75, .6); }  /* motor: speeds up and hits the hood at full speed */
  81.5% { transform: translate3d(0, -100%, 0); }
  100%  { transform: translate3d(0, -100%, 0); }
}
@keyframes sdoor-dim {
  0%, 13.8% { opacity: 1; }
  29.2%     { opacity: .92; }
  42.3%     { opacity: .84; }
  80%       { opacity: 0; }
  100%      { opacity: 0; }
}
@keyframes sdoor-fade { 0%, 76% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sdoor-hood {
  0%, 78%  { transform: translate3d(0, 0, 0);    animation-timing-function: ease-out; }
  81.5%    { transform: translate3d(0, 4px, 0);  animation-timing-function: ease-in-out; }   /* rail hits the hood */
  84.6%    { transform: translate3d(0, -1px, 0); animation-timing-function: ease-out; }
  87%      { transform: translate3d(0, 0, 0);    animation-timing-function: linear; }
  89.2%    { transform: translate3d(0, 0, 0);    animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  96.9%, 100% { transform: translate3d(0, -115%, 0); }
}
@keyframes sdoor-jolt {
  0%   { transform: translate3d(0, 0, 0); }
  14%  { transform: translate3d(calc(var(--sg) * 1.8px), 0, 0); }
  30%  { transform: translate3d(calc(var(--sg) * -1.8px), 0, 0); }
  46%  { transform: translate3d(calc(var(--sg) * 1.3px), 0, 0); }
  62%  { transform: translate3d(calc(var(--sg) * -1px), 0, 0); }
  80%  { transform: translate3d(calc(var(--sg) * .5px), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes sdoor-buzz {
  from { transform: translate3d(calc(var(--sg) * .9px), 0, 0); }
  to   { transform: translate3d(calc(var(--sg) * -.9px), 0, 0); }
}
@keyframes sdoor-swing {
  0%   { transform: rotate(0); }
  18%  { transform: rotate(.32deg); }
  44%  { transform: rotate(-.26deg); }
  70%  { transform: rotate(.1deg); }
  100% { transform: rotate(0); }
}
@keyframes sdoor-gone { to { visibility: hidden; } }


/* ---------- slat count follows the viewport height (desktop/tablet: pitch ≈ 32–36px) ---------- */
@media (min-width: 700px) and (max-height: 759px)                         { .sdoor { --n: 20; } .sdoor__slats i:nth-child(n+21) { display: none; } }
@media (min-width: 700px) and (min-height: 760px) and (max-height: 959px)  { .sdoor { --n: 24; } .sdoor__slats i:nth-child(n+25) { display: none; } }
@media (min-width: 700px) and (min-height: 960px) and (max-height: 1159px) { .sdoor { --n: 28; } .sdoor__slats i:nth-child(n+29) { display: none; } }
@media (min-width: 700px) and (min-height: 1160px) and (max-height: 1359px){ .sdoor { --n: 34; } .sdoor__slats i:nth-child(n+35) { display: none; } }
@media (min-width: 700px) and (min-height: 1360px)                         { .sdoor { --n: 40; } }

/* ---------- phones: thinner slats (pitch ≈ 21px), slimmer rail and hardware ---------- */
@media (max-width: 699px) {
  .sdoor { --rail: 46px; --n: 36; }
  .sdoor__slats i:nth-child(n+37) { display: none; }
  .sdoor__handle { height: 13px; margin-top: -6px; }
  .sdoor__lock { width: 22px; height: 22px; margin-top: -9px; }
  .sdoor__logo::after { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--slat-h) - 2px), rgba(70, 0, 0, .62) calc(var(--slat-h) - 2px) var(--slat-h)); }
}
@media (max-width: 699px) and (max-height: 700px) { .sdoor { --n: 30; } .sdoor__slats i:nth-child(n+31) { display: none; } }
@media (max-width: 699px) and (min-height: 860px) { .sdoor { --n: 40; } .sdoor__slats i:nth-child(n+37) { display: block; } }

@media (prefers-reduced-motion: reduce) { .sdoor { display: none; } }