@font-face {
  font-family: "Avital";
  src: url("../fonts/Avital-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --ink: #171717;
  --paper: #f3efec;
  --red: #a9362f;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }

body { font-family: Arial, Helvetica, sans-serif; }

a { color: inherit; text-decoration: none; }

.site-header {
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 50px);
  background: linear-gradient(180deg, #f8f5f3 0%, #f3efec 72%, #eee9e6 100%);
  box-shadow: inset 0 -1px rgba(255, 255, 255, .72);
  position: relative;
  z-index: 10;
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(180deg, rgba(238, 233, 230, .92), rgba(238, 233, 230, 0));
  pointer-events: none;
}

.header-title {
  font-family: "Snell Roundhand", "Apple Chancery", cursive;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}

.header-title span {
  display: inline-block;
  font-size: 35px;
  line-height: .7;
}

.scene__hint {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bag {
  justify-self: end;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 180ms ease, transform 180ms ease;
}

.bag:hover,
.bag:focus-visible {
  background: rgba(23, 23, 23, .06);
  transform: translateY(-1px);
  outline: none;
}

.bag svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.locker-hero { width: 100%; overflow: hidden; }

.locker-hero::-webkit-scrollbar { display: none; }

.scene {
  --scene-ratio: 1.7777778;
  position: relative;
  width: 100vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e1de;
  isolation: isolate;
}

.scene__base,
.scene__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.scene__base { z-index: 0; }

.mobile-scroll-guide { display: none; }

.scene__open {
  z-index: 1;
  opacity: 0;
  will-change: clip-path, opacity;
  transition: clip-path 520ms cubic-bezier(.22, .72, .18, 1), opacity 90ms ease, filter 260ms ease;
}

.scene__open--tops { clip-path: inset(15.46% 85.11% 53.89% 14.64%); }
.scene__open--accessories { clip-path: inset(45% 75.01% 30.09% 24.74%); }
.scene__open--bottoms { clip-path: inset(15.46% 21.21% 30.1% 78.54%); }


.scene:has(.locker--tops:is(:hover, :focus-visible, .is-open)) .scene__open--tops,
.scene:has(.locker--accessories:is(:hover, :focus-visible, .is-open)) .scene__open--accessories,
.scene:has(.locker--bottoms:is(:hover, :focus-visible, .is-open)) .scene__open--bottoms {
  opacity: 1;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .16));
}

.scene:has(.locker--tops:is(:hover, :focus-visible, .is-open)) .scene__open--tops {
  clip-path: inset(15.46% 77.55% 53.89% 14.64%);
}

.scene:has(.locker--accessories:is(:hover, :focus-visible, .is-open)) .scene__open--accessories {
  clip-path: inset(45% 67.45% 30.09% 24.74%);
}

.scene:has(.locker--bottoms:is(:hover, :focus-visible, .is-open)) .scene__open--bottoms {
  clip-path: inset(15.46% 13.7% 30.1% 78.54%);
}

.lockers { position: absolute; inset: 0; z-index: 3; }

.shop-all-zone {
  position: absolute;
  left: 42%;
  top: 70%;
  width: 16%;
  height: 24%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1.5%;
}

.shop-all {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  color: white;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(9px) scale(1);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22, .72, .18, 1), background 220ms ease;
}

.shop-all-zone:is(:hover, .is-open) .shop-all,
.shop-all:focus-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(20, 20, 20, .34);
  backdrop-filter: blur(5px);
}

.shop-all-zone .shop-all:is(:hover, :focus-visible) {
  transform: translateY(0) scale(1.07);
  outline: none;
}

.product-hotspot {
  position: absolute;
  outline: none;
}

.product-hotspot--bottle { left: 1%; top: 61%; width: 7%; height: 17%; }
.product-hotspot--bag { left: 87%; top: 62%; width: 12%; height: 17%; }

.product-hotspot span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
  transition: width 320ms cubic-bezier(.22, .72, .18, 1), height 220ms ease, transform 320ms cubic-bezier(.22, .72, .18, 1), background 220ms ease;
}

.product-hotspot em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

.product-hotspot--bottle:is(:hover, :focus-visible, .is-open) span {
  width: 136px;
  height: 30px;
  background: rgba(20, 20, 20, .34);
  transform: translate(0, -50%);
}

.product-hotspot--bag:is(:hover, :focus-visible, .is-open) span {
  width: 108px;
  height: 30px;
  background: rgba(20, 20, 20, .34);
  transform: translate(-100%, -50%);
}

.product-hotspot:is(:hover, :focus-visible, .is-open) em {
  opacity: 1;
  transition-delay: 110ms;
}

.locker {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 12px;
  color: white;
  outline: 0;
}

.locker::after {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent 48%);
  opacity: 0;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.locker:is(:hover, :focus-visible, .is-open)::after {
  opacity: 1;
  border-color: rgba(255, 255, 255, .7);
}

.locker--tops { left: 14.64%; top: 15.46%; width: 7.81%; height: 30.65%; }
.locker--accessories { left: 24.74%; top: 45%; width: 7.81%; height: 24.91%; }
.locker--bottoms { left: 78.54%; top: 15.46%; width: 7.76%; height: 54.44%; }

.locker__number,
.locker__enter { display: none; }

.locker__label {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 16px;
  color: white;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, .82vw, 16px);
  font-weight: 700;
  letter-spacing: .25em;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(-50% + 8px)) scale(.97);
  transition: opacity 200ms ease 150ms, transform 280ms cubic-bezier(.22, .72, .18, 1) 120ms, background 220ms ease;
}

.locker--tops .locker__label { left: -37%; width: 44%; height: 83%; }
.locker--accessories .locker__label { left: -30%; width: 40%; height: 82%; font-size: clamp(8px, .62vw, 12px); letter-spacing: .12em; }
.locker--bottoms .locker__label { left: -30%; width: 40%; height: 88%; }

.locker:is(:hover, :focus-visible, .is-open) .locker__label {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: rgba(20, 20, 20, .34);
  backdrop-filter: blur(5px);
}

.scene__hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(14px, 2.6vw, 40px);
  transform: translateX(-50%);
  padding: 10px 14px;
  color: rgba(255, 255, 255, .92);
  background: rgba(17, 17, 17, .72);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  font-size: 9px;
}

.scene__hint-mobile { display: none; }

@media (max-width: 700px) {
  .site-header { height: 58px; }
  .header-title { font-size: 22px; }
  .header-title span { font-size: 32px; }
  .locker-hero {
    height: calc(100svh - 58px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .scene {
    width: calc((100svh - 58px) * 1.7777778);
    height: calc(100svh - 58px);
    max-width: none;
    aspect-ratio: 16 / 9;
  }
  .scene__base,
  .scene__open {
    width: 100%;
    height: 100%;
    max-width: none;
    left: 0;
    right: auto;
    transform: none;
  }
  .lockers {
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
  }
  .mobile-scroll-guide {
    position: absolute;
    z-index: 4;
    left: 35.4%;
    top: 56.3%;
    width: 29.2%;
    height: 4.6%;
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    color: #aa9c96;
    font-family: "Avital", "Snell Roundhand", cursive;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, .78), 1px 1px 1px rgba(105, 88, 81, .28);
    pointer-events: none;
  }
  .mobile-scroll-guide strong {
    font-size: clamp(13px, 4vw, 18px);
    font-weight: 400;
    letter-spacing: .015em;
    text-align: center;
    white-space: nowrap;
  }
  .mobile-scroll-guide span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
  }
  .locker { padding: 7px; }
  .locker__label { font-size: clamp(9px, 2.2vw, 13px); }
  .locker--accessories .locker__label { font-size: clamp(7px, 1.7vw, 10px); }
  .scene__hint-desktop { display: none; }
  .scene__hint-mobile { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}