/* Opening page. One page for every store: the store's name, logo and links
   come from Admin through window.__STORE__; nothing here names a store.
   A fixed overlay that scrolls on its own: the hero fills the viewport, the
   garments and the footer follow, and the customizer waits underneath. */
.opening{display:none}
html.opening-active,html.opening-active body{overflow:hidden}
html.opening-active .opening{
  --ink:#f5f7fa;--ink-soft:#a3aab6;--line:#272b33;--accent:#ee2034;--ground:#08090b;
  --px:0;--py:0;--sbw:0px;--gx:65vw;--gy:50vh;--hem-y:80vh;--ring-y:60vh;--ring-rx:0px;--ring-ry:0px;--ring-rot:0deg;--garment-h:60vh;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --gutter:clamp(20px,5.2vw,96px);--radius:14px;--ease:cubic-bezier(.2,.8,.2,1);
  --hairline:rgba(245,247,250,.09);--hairline-strong:rgba(245,247,250,.18);
  display:block;position:fixed;inset:0;z-index:5000;overflow:hidden auto;overscroll-behavior:contain;isolation:isolate;
  scroll-behavior:smooth;
  background:var(--ground);color:var(--ink);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
.opening *{box-sizing:border-box}
.opening-hero{position:relative;height:100%;min-height:640px;overflow:hidden;isolation:isolate;cursor:grab;touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none}
.opening-hero:focus-visible{box-shadow:inset 0 0 0 2px rgba(245,247,250,.5)}
.opening.is-grabbing .opening-hero{cursor:grabbing}
.opening-copy{-webkit-user-select:text;user-select:text}
/* Drag to spin: shown once the opening has played, retired by the first spin. */
.opening-spin-hint{position:absolute;z-index:4;right:clamp(24px,5vw,72px);bottom:calc(clamp(40px,11vh,128px) + 52px);margin:0;display:flex;align-items:center;gap:10px;pointer-events:none;
  font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#cfd4dc;
  opacity:0;transform:translateY(12px);transition:opacity .7s ease .25s,transform .9s var(--ease) .25s}
.opening-spin-hint svg{width:18px;height:18px;flex:none}
.opening.is-copy .opening-spin-hint{opacity:1;transform:none}
.opening.is-spun .opening-spin-hint{opacity:0;transition-delay:0s}
/* The floor fades into the page below instead of ending on an edge. */
.opening-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:14vh;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--ground))}

/* Masthead: the store's logo or name, one link down the page, one action.
   Transparent over the hero, solid once the hero is behind the reader. */
.opening-bar{position:fixed;top:0;left:0;right:var(--sbw,0px);z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:18px var(--gutter);border-bottom:1px solid transparent;
  transition:background-color .4s ease,border-color .4s ease,padding .4s var(--ease)}
.opening-bar::before{content:"";position:absolute;inset:0 0 -60% 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,5,7,.8),transparent);transition:opacity .4s ease}
.opening.is-past .opening-bar{background:rgba(8,9,11,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hairline);padding-block:12px}
.opening.is-past .opening-bar::before{opacity:0}
.opening-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none}
.opening-brand-logo{display:block;max-height:52px;max-width:min(220px,40vw);width:auto;height:auto}
.opening-brand-name{font-weight:800;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.opening-bar-nav{display:flex;gap:clamp(20px,2.6vw,40px)}
.opening-bar-nav a{position:relative;padding:8px 0;font:600 .8rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:#c9ced7;text-decoration:none}
.opening-bar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.opening-bar-nav a:hover{color:var(--ink)}
.opening-bar-nav a:hover::after{transform:scaleX(1)}
.opening-bar-action{justify-self:end;padding:12px 20px;border:1px solid var(--hairline-strong);border-radius:999px;cursor:pointer;
  background:rgba(10,11,14,.55);color:var(--ink);font:700 .8rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,border-color .25s ease}
.opening-bar-action:hover{background:var(--accent);border-color:var(--accent)}
.opening-bar-action:focus-visible,.opening-bar-nav a:focus-visible,.opening-brand:focus-visible,.opening-more:focus-visible,.opening-card:focus-visible,.opening-foot-cols a:focus-visible,.opening-foot-cols button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* Far plane: charcoal stage light, a receding floor grid and a contact pad. */
.opening-far{position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:translate3d(calc(var(--px) * -6px),calc(var(--py) * -4px),0)}
.opening-glow{position:absolute;inset:0;
  background:
    radial-gradient(calc(var(--garment-h) * .9) calc(var(--garment-h) * .75) at var(--gx) var(--gy),rgba(64,68,76,.55),rgba(24,26,30,.35) 55%,transparent 75%),
    radial-gradient(120vmax 70vmax at 50% 118%,rgba(238,32,52,.10),transparent 60%);
  opacity:0;transition:opacity 1.6s ease .3s}
.opening-floor{position:absolute;left:calc(var(--gx) - 90vmax);top:var(--hem-y);width:180vmax;height:70vmax;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:4.5vmax 4.5vmax;background-position:center top;
  transform-origin:50% 0;transform:perspective(40vmax) rotateX(72deg);
  -webkit-mask-image:radial-gradient(38% 55% at 50% 0,#000 20%,transparent 100%);mask-image:radial-gradient(38% 55% at 50% 0,#000 20%,transparent 100%);
  opacity:0;transition:opacity 1.2s ease .9s}
.opening-pad{position:absolute;left:calc(var(--gx) - var(--ring-rx) * .9);top:calc(var(--hem-y) - var(--ring-ry) * .7);
  width:calc(var(--ring-rx) * 1.8);height:calc(var(--ring-ry) * 1.4);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),rgba(238,32,52,.14) 70%,transparent);
  opacity:0;transition:opacity 1.2s ease 1.2s}
.opening.is-live .opening-glow,.opening.is-live .opening-floor,.opening.is-live .opening-pad{opacity:1}

/* Mid plane: a giant outlined word the garment stands in front of. */
.opening-word{position:absolute;z-index:1;left:var(--gx);top:var(--gy);margin:0;pointer-events:none;user-select:none;
  font-weight:900;font-size:clamp(7rem,24vw,26rem);line-height:.8;letter-spacing:-.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(245,247,250,.13);
  transform:translate3d(calc(-50% + var(--px) * -18px),calc(-50% + var(--py) * -10px),0) scale(1.06);
  opacity:0;transition:opacity 1.4s ease,transform 2.4s cubic-bezier(.2,.8,.2,1)}
.opening.is-copy .opening-word{opacity:1;transform:translate3d(calc(-50% + var(--px) * -18px),calc(-50% + var(--py) * -10px),0) scale(1)}

/* Focal plane: the live garment. */
.opening-stage{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none}
.opening-poster{position:absolute;z-index:2;left:65%;top:50%;height:74vh;width:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.opening:not(.is-fallback) .opening-poster{display:none}
.opening.is-fallback .opening-glow{opacity:1}

/* Near plane: an orbit ring split around the garment, back half behind it. */
.opening-ring{position:absolute;pointer-events:none;
  left:calc(var(--gx) - var(--ring-rx));top:calc(var(--ring-y) - var(--ring-ry));
  width:calc(var(--ring-rx) * 2);height:calc(var(--ring-ry) * 2);border-radius:50%;
  background:repeating-conic-gradient(from var(--ring-rot),rgba(245,247,250,.42) 0 .5deg,transparent .5deg 7.5deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px),#000 calc(100% - 1px),transparent 100%);
  mask-image:radial-gradient(closest-side,transparent calc(100% - 7px),#000 calc(100% - 6px),#000 calc(100% - 1px),transparent 100%);
  opacity:0;transition:opacity 1s ease 1.6s}
.opening-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(245,247,250,.16)}
.opening-ring-back{z-index:1;clip-path:inset(0 0 50% 0)}
.opening-ring-front{z-index:3;clip-path:inset(50% 0 0 0);transform:translate3d(calc(var(--px) * 10px),calc(var(--py) * 6px),0)}
.opening-ring-front::before{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--accent)}
.opening.is-live .opening-ring{opacity:1}

/* The laser: a 1.5px core with a soft light band, spanning the screen. */
.opening-laser{position:absolute;z-index:3;left:0;right:0;top:0;height:0;pointer-events:none;opacity:0;transform-origin:50% 0;will-change:transform,opacity}
.opening-laser::before{content:"";position:absolute;left:0;right:0;top:-.75px;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(238,32,52,.85) 12%,#ffd9dd 50%,rgba(238,32,52,.85) 88%,transparent)}
.opening-laser::after{content:"";position:absolute;left:4%;right:4%;top:-14px;height:28px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(238,32,52,.34),transparent);
}
.opening-laser-tag{position:absolute;right:clamp(16px,5vw,72px);bottom:10px;margin:0;
  font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#ffb3bb;
  opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.opening.is-printing .opening-laser-tag{opacity:1;transform:none}
/* Once the copy is up, later passes stay clear of the headline column. */
.opening.is-looping .opening-laser{
  -webkit-mask-image:linear-gradient(90deg,transparent 46vw,#000 54vw);mask-image:linear-gradient(90deg,transparent 46vw,#000 54vw)}

/* Type and the one action. */
.opening-copy{position:absolute;z-index:4;left:clamp(24px,6vw,104px);bottom:clamp(40px,11vh,128px);width:min(35rem,40vw)}
.opening-kicker{margin:0 0 20px;font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.opening-kicker::before{content:"";display:inline-block;width:8px;height:8px;margin-right:12px;border-radius:50%;background:var(--accent);vertical-align:-1px}
.opening-title{margin:0;font-weight:800;font-size:clamp(2.75rem,5.6vw,5.75rem);line-height:.96;letter-spacing:-.04em;color:var(--ink)}
.opening-line{display:block;overflow:hidden;padding-bottom:.06em;color:inherit}
.opening-line>span{display:block;color:inherit;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.opening-line:nth-child(2)>span{transition-delay:.12s}
.opening-sub{max-width:31rem;margin:28px 0 36px;font-size:clamp(1rem,1.15vw,1.1875rem);line-height:1.55;color:var(--ink-soft)}
.opening-cta{display:inline-flex;align-items:center;gap:14px;min-height:58px;padding:0 26px 0 30px;border:0;border-radius:12px;cursor:pointer;
  background:var(--accent);color:#fff;font:700 1.2rem/1 var(--font-sans);letter-spacing:-.01em;
  box-shadow:0 18px 36px -16px rgba(238,32,52,.6),0 2px 6px rgba(0,0,0,.35);
  transition:background-color .2s ease,transform .2s ease}
.opening-cta svg{width:22px;height:22px;flex:none;transition:transform .25s ease}
.opening-cta:hover{background:#ff3348}
.opening-cta:hover svg{transform:translateX(4px)}
.opening-cta:active{transform:translateY(1px)}
.opening-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.opening-kicker,.opening-sub,.opening-cta{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.opening.is-copy .opening-kicker{opacity:1;transform:none}
.opening.is-copy .opening-line>span{transform:none}
.opening.is-copy .opening-sub{opacity:1;transform:none;transition-delay:.35s}
.opening.is-copy .opening-cta{opacity:1;transform:none;transition-delay:.5s,.5s,0s}
.opening-hud{position:absolute;z-index:4;right:clamp(24px,5vw,72px);bottom:clamp(40px,11vh,128px);margin:0;
  font:600 11px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-align:right;
  opacity:0;transition:opacity 1s ease 1s}
.opening-hud span{display:block;color:#868d99}
.opening.is-copy .opening-hud{opacity:1}

/* Hand-off: the stage recedes, the customizer is already underneath. */
.opening.is-leaving{opacity:0;transition:opacity .6s ease .05s}
.opening.is-leaving .opening-stage,.opening.is-leaving .opening-ring,.opening.is-leaving .opening-word{transform:scale(.94);transition:transform .65s cubic-bezier(.4,0,.2,1)}
.opening.is-leaving .opening-copy{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}

/* The one scroll cue, once the opening has played; it steps aside as soon as
   the reader starts scrolling. */
.opening-more{position:absolute;z-index:4;left:50%;bottom:clamp(20px,4vh,40px);display:grid;justify-items:center;gap:10px;
  margin-left:-40px;width:80px;font:600 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:#dfe3e9;text-decoration:none;
  opacity:0;transform:translateY(14px);transition:opacity .8s ease .45s,transform 1s var(--ease) .45s}
.opening-more svg{width:54px;height:54px;padding:15px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  border:1px solid rgba(245,247,250,.34);background:rgba(8,9,12,.62);transition:background-color .25s ease,border-color .25s ease}
.opening-more:hover{color:#fff}
.opening-more:hover svg{background:var(--accent);border-color:var(--accent)}
.opening.is-copy .opening-more{opacity:1;transform:none}
.opening.is-copy .opening-more svg{animation:opening-nudge 2.2s var(--ease) 1.2s infinite}
@keyframes opening-nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(6px)}}
.opening.is-scrolled .opening-more{opacity:0;pointer-events:none;transition-delay:0s}

/* Below the hero: the garments, then the footer. */
.opening-garments{padding:clamp(84px,13vh,168px) var(--gutter);scroll-margin-top:72px}
.opening-section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(44px,6vw,88px)}
.opening-section-head h2{margin:0;font-weight:800;font-size:clamp(2.3rem,4.2vw,4.4rem);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.opening-section-head p{margin:0;max-width:44ch;color:var(--ink-soft);font-size:clamp(1rem,1.1vw,1.14rem);line-height:1.6}
.opening-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,22px)}
.opening-card{position:relative;display:grid;grid-template-rows:auto 1fr auto auto;width:100%;padding:22px 24px 24px;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;text-align:left;color:var(--ink);font-family:var(--font-sans);
  background:radial-gradient(70% 55% at 50% 52%,#1c1f25,transparent 72%),linear-gradient(180deg,#0f1115,#0a0b0e);
  transition:border-color .35s ease,transform .45s var(--ease)}
.opening-card::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.opening-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;margin:4px 0 8px;
  filter:drop-shadow(0 26px 24px rgba(0,0,0,.55));transition:transform .6s var(--ease)}
.opening-card-type{font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#8d95a2}
.opening-card-name{font-weight:800;font-size:clamp(1.4rem,1.9vw,1.9rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.opening-card-go{margin-top:10px;display:inline-flex;align-items:center;gap:10px;font:600 .85rem/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:#ff5364}
.opening-card-go::after{content:"\2192";transition:transform .3s var(--ease)}
.opening-card:hover{border-color:var(--hairline-strong);transform:translateY(-4px)}
.opening-card:hover img{transform:scale(1.035)}
.opening-card:hover::after{transform:scaleX(1)}
.opening-card:hover .opening-card-go::after{transform:translateX(4px)}

.opening-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:clamp(56px,8vh,96px) var(--gutter) clamp(40px,6vh,64px);border-top:1px solid var(--hairline)}
.opening-foot-brand .opening-brand-logo{max-height:48px;max-width:180px}
.opening-foot-brand .opening-brand-name:not([hidden]){display:block;font-size:1.35rem}
.opening-foot-brand p{margin:16px 0 0;max-width:36ch;color:var(--ink-soft);line-height:1.6}
.opening-foot-brand p:empty{display:none}
.opening-foot-cols{display:grid;grid-template-columns:repeat(2,auto);gap:64px}
.opening-foot-cols div{display:grid;gap:12px;align-content:start;justify-items:start}
.opening-foot-cols h3{margin:0 0 6px;font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#8d95a2}
.opening-foot-cols a,.opening-foot-cols button{padding:0;border:0;background:none;cursor:pointer;font:400 1rem/1.5 var(--font-sans);color:#d4d9e1;text-decoration:none;text-align:left}
.opening-foot-cols a:hover,.opening-foot-cols button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* A store with nothing to link to has no second column. */
.opening-foot-store:not(:has(a:not([hidden]))){display:none}

/* Phones and narrow portrait screens: garment above, copy below. */
@media (max-width:759px),(max-aspect-ratio:9/10){
  .opening-copy{left:20px;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));width:auto}
  .opening-bar{grid-template-columns:1fr auto;padding:14px var(--gutter)}
  .opening-bar-nav{display:none}
  .opening-bar-action{padding:10px 16px;font-size:.72rem}
  .opening-more{bottom:18px}
  .opening-spin-hint{right:var(--gutter);bottom:auto;top:84px}
  .opening-section-head{grid-template-columns:1fr}
  /* The garments become a swipeable rail on a phone. */
  .opening-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scrollbar-width:none}
  .opening-cards::-webkit-scrollbar{display:none}
  .opening-cards li{scroll-snap-align:start}
  .opening-foot{grid-template-columns:1fr}
  .opening-foot-cols{gap:32px}
  .opening-kicker{margin-bottom:14px;font-size:11px}
  .opening-title{font-size:clamp(2.4rem,11vw,3.6rem)}
  .opening-sub{margin:16px 0 22px;font-size:1rem;line-height:1.5}
  .opening-cta{display:flex;width:100%;justify-content:center;min-height:56px}
  .opening-word{font-size:clamp(5rem,34vw,14rem)}
  .opening-hud{display:none}
  .opening-poster{left:50%;top:32%;height:46vh}
  .opening.is-fallback{--gx:50vw;--gy:32vh}
  .opening-laser-tag{display:none}
  .opening.is-looping .opening-laser{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:759px) and (max-height:700px){
  .opening-sub{display:none}
  .opening-title{font-size:clamp(2.1rem,10vw,2.8rem)}
}

@media (max-width:1080px) and (min-width:760px){
  .opening-bar{grid-template-columns:1fr auto}
  .opening-bar-nav{display:none}
  .opening-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Reduced motion: a complete, still composition. */
.opening.is-static *,.opening.is-static *::before,.opening.is-static *::after{transition:none!important;animation:none!important}
.opening.is-static .opening-laser{display:none}
.opening.is-static{scroll-behavior:auto}