/* ACCESS digital kiosk ---------------------------------------------------
   The supplied ARIA hardware is staged as an installed foreground unit over
   the purpose-built mall plate. Its live HTML screen can move independently
   while the physical kiosk remains grounded and crisp. */

.access-kiosk {
  position: absolute;
  z-index: 3;
  top: auto;
  bottom: clamp(52px, 6.2svh, 68px);
  left: 50%;
  width: min(25vw, 480px, 74svh);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 30px 38px rgba(23, 31, 38, .26));
  transform: translate3d(-50%, 18svh, 0) scale(.94);
  transform-origin: 50% 92%;
  will-change: opacity, transform;
}

.access-kiosk::before {
  position: absolute;
  z-index: -1;
  inset: 8% 11% 5%;
  border-radius: 48%;
  content: "";
  background: radial-gradient(ellipse at center, rgba(220, 239, 249, .58), rgba(255, 238, 224, .25) 46%, transparent 72%);
  filter: blur(28px);
  opacity: .34;
}

.access-kiosk::after {
  position: absolute;
  z-index: 0;
  bottom: 1.2%;
  left: 50%;
  width: 62%;
  height: 4.4%;
  border-radius: 50%;
  content: "";
  background: radial-gradient(ellipse at center, rgba(36, 27, 20, .5), rgba(36, 27, 20, .16) 48%, transparent 74%);
  filter: blur(7px);
  mix-blend-mode: multiply;
  opacity: .82;
  transform: translate3d(-50%, 44%, 0);
}

.access-kiosk-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 88%;
  will-change: transform;
}

.access-kiosk-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: sepia(.055) saturate(.9) brightness(1.015);
}

.access-kiosk-screen-motion {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 23.5%;
  width: 53.2%;
  height: 83.7%;
  border-radius: 4.5% / 3%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  opacity: .995;
  background: #070a0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.access-kiosk-ui {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  color: #15191e;
  background:
    radial-gradient(circle at 50% 8%, rgba(77, 92, 105, .28), transparent 28%),
    linear-gradient(180deg, #11161b, #070a0d 22%, #050708);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform: translate3d(0, 0, 0);
  will-change: filter;
}

.access-kiosk-ui-brand {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  place-items: center;
  height: 14.4%;
}

.access-kiosk-ui-brand img {
  display: block;
  width: 58%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, .2));
}

.access-kiosk-ui-panel {
  position: absolute;
  top: 14.4%;
  right: 6.1%;
  bottom: 7.3%;
  left: 6.1%;
  border-radius: 5.2cqw;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(224, 211, 198, .22), transparent 28%),
    linear-gradient(145deg, #fdfcfb, #f6f3f0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .92) inset,
    0 0 0 1px rgba(255, 255, 255, .24),
    0 8px 18px rgba(0, 0, 0, .16);
}

.access-kiosk-story-window {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 58%;
  overflow: hidden;
}

.access-kiosk-story {
  --kiosk-story-phase: 0s;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 6cqw 6cqw 0;
  opacity: 0;
  transform: translate3d(0, 3cqw, 0);
  will-change: opacity, transform;
}

.access-kiosk-story-two { --kiosk-story-phase: -10s; }
.access-kiosk-story-three { --kiosk-story-phase: -5s; }

.access-kiosk-story-copy {
  position: relative;
  flex: 0 0 17cqw;
  text-align: center;
}

.access-kiosk-story-copy > span {
  position: absolute;
  top: .5cqw;
  right: 0;
  color: rgba(21, 25, 30, .42);
  font-size: 2.25cqw;
  font-weight: 700;
  letter-spacing: .13em;
}

.access-kiosk-story-copy strong,
.access-kiosk-story-copy small {
  display: block;
}

.access-kiosk-story-copy strong {
  padding: 0 9cqw;
  font-size: 6.35cqw;
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}

.access-kiosk-story-copy small {
  width: 82%;
  margin: 2cqw auto 0;
  color: rgba(21, 25, 30, .78);
  font-size: 3.15cqw;
  font-weight: 470;
  letter-spacing: -.012em;
  line-height: 1.2;
}

.access-kiosk-hero {
  position: relative;
  flex: 0 0 43cqw;
  border-radius: 4.6cqw;
  overflow: hidden;
  background: #eee7e0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset;
}

.access-kiosk-hero img,
.access-kiosk-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access-kiosk-story-two .access-kiosk-hero img { object-position: 50% 24%; }
.access-kiosk-story-three .access-kiosk-hero img { object-position: 50% 19%; }

.access-kiosk-source-hero,
.access-kiosk-source-bag,
.access-kiosk-source-sunglasses,
.access-kiosk-source-fragrance,
.access-kiosk-source-qr {
  background-image: url('/assets/digitalkiosk.png');
  background-repeat: no-repeat;
}

.access-kiosk-source-hero {
  background-position: 50% 27.76%;
  background-size: 245% 573.13%;
}

.access-kiosk-product-window {
  flex: 0 0 27cqw;
  margin-top: 3cqw;
  overflow: hidden;
}

.access-kiosk-product-rail {
  display: flex;
  gap: 3cqw;
  width: max-content;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.access-kiosk-product {
  flex: 0 0 27cqw;
  height: 100%;
  border-radius: 3.8cqw;
  overflow: hidden;
  background-color: #eee7e0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .72) inset,
    0 1px 3px rgba(56, 44, 35, .08);
}

.access-kiosk-source-bag,
.access-kiosk-source-sunglasses,
.access-kiosk-source-fragrance {
  background-size: 800% 1017.22%;
}

.access-kiosk-source-bag { background-position: 33.82% 46.3%; }
.access-kiosk-source-sunglasses { background-position: 50% 46.3%; }
.access-kiosk-source-fragrance { background-position: 66.07% 46.3%; }

.access-kiosk-ui-cta {
  position: absolute;
  z-index: 2;
  top: 59.2%;
  right: 0;
  left: 0;
  text-align: center;
}

.access-kiosk-ui-cta strong,
.access-kiosk-ui-cta span {
  display: block;
}

.access-kiosk-ui-cta strong {
  font-size: 6.25cqw;
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}

.access-kiosk-ui-cta span {
  margin-top: 2cqw;
  color: rgba(21, 25, 30, .82);
  font-size: 3.75cqw;
  font-weight: 470;
  line-height: 1;
}

.access-kiosk-source-qr {
  position: absolute;
  z-index: 1;
  bottom: 3.1%;
  left: 50%;
  width: 70%;
  aspect-ratio: 330 / 295;
  border-radius: 5cqw;
  background-color: #fff;
  background-position: 50% 73.24%;
  background-size: 310.3% 520.68%;
  box-shadow: 0 3px 12px rgba(55, 44, 35, .08);
  transform: translateX(-50%);
}

.access-kiosk-screen-motion::before {
  position: absolute;
  z-index: 3;
  top: -32%;
  right: -55%;
  width: 76%;
  height: 170%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .23) 45%, rgba(196, 229, 247, .12) 57%, transparent);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(8deg);
  will-change: opacity, transform;
}

.access-kiosk-screen-motion::after {
  position: absolute;
  z-index: 4;
  top: -8%;
  right: 4%;
  left: 4%;
  height: 7%;
  border-radius: 50%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(174, 220, 245, .18) 40%, rgba(255, 255, 255, .72) 72%, transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity, transform;
}

.access-kiosk-qr-cue {
  position: absolute;
  z-index: 4;
  top: 68.6%;
  left: 50%;
  width: 30.8%;
  aspect-ratio: 1;
  border: 1px solid rgba(181, 224, 246, .78);
  border-radius: 11%;
  opacity: 0;
  box-shadow:
    0 0 0 0 rgba(181, 224, 246, .36),
    inset 0 0 18px rgba(255, 255, 255, .2);
  transform: translate3d(-50%, -50%, 0) scale(.94);
  will-change: box-shadow, opacity, transform;
}

.panel-access.is-active .access-kiosk {
  animation: access-kiosk-arrive 1.45s cubic-bezier(.2, .78, .22, 1) .08s both;
}

.panel-access.is-active .access-kiosk-stage {
  animation: none;
}

.panel-access.is-active .access-kiosk-ui {
  animation: access-kiosk-screen-story 15s cubic-bezier(.45, 0, .55, 1) infinite;
}

.panel-access.is-active .access-kiosk-story {
  animation: access-kiosk-story-cycle 15s cubic-bezier(.42, 0, .2, 1) var(--kiosk-story-phase) infinite both;
}

.panel-access.is-active .access-kiosk-story .access-kiosk-product-rail {
  animation: access-kiosk-product-rail 15s cubic-bezier(.42, 0, .2, 1) var(--kiosk-story-phase) infinite both;
}

.panel-access.is-active .access-kiosk-story .access-kiosk-hero img {
  animation: access-kiosk-hero-drift 15s cubic-bezier(.42, 0, .2, 1) var(--kiosk-story-phase) infinite both;
}

.panel-access.is-active .access-kiosk-screen-motion::before {
  animation: access-kiosk-sheen 8.5s cubic-bezier(.2, .7, .3, 1) 1.35s infinite;
}

.panel-access.is-active .access-kiosk-screen-motion::after {
  animation: access-kiosk-scan-line 6.2s cubic-bezier(.45, 0, .55, 1) 1.55s infinite;
}

.panel-access.is-active .access-kiosk-qr-cue {
  animation: access-kiosk-qr-pulse 3.4s cubic-bezier(.33, 0, .2, 1) 1.75s infinite;
}

@keyframes access-kiosk-arrive {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 18svh, 0) scale(.94);
  }

  38% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes access-kiosk-idle {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes access-kiosk-screen-story {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  31% {
    filter: brightness(1.035) saturate(1.025);
  }

  65% {
    filter: brightness(.985) saturate(1.015);
  }
}

@keyframes access-kiosk-story-cycle {
  0% {
    opacity: 0;
    transform: translate3d(0, 3cqw, 0);
  }

  2.6%,
  27.2% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  32.4%,
  100% {
    opacity: 0;
    transform: translate3d(0, -2.4cqw, 0);
  }
}

@keyframes access-kiosk-product-rail {
  0%,
  5% {
    transform: translate3d(0, 0, 0);
  }

  25%,
  32.4% {
    transform: translate3d(-30cqw, 0, 0);
  }

  32.5%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes access-kiosk-hero-drift {
  0%,
  3% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  27.2%,
  32.4% {
    transform: translate3d(0, -1.2%, 0) scale(1.055);
  }

  32.5%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes access-kiosk-sheen {
  0%,
  14% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(8deg);
  }

  20% { opacity: .8; }

  43% {
    opacity: 0;
    transform: translate3d(-260%, 0, 0) rotate(8deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(-260%, 0, 0) rotate(8deg);
  }
}

@keyframes access-kiosk-scan-line {
  0%,
  20% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  25% { opacity: .74; }

  61% {
    opacity: .16;
    transform: translate3d(0, 1280%, 0);
  }

  66%,
  100% {
    opacity: 0;
    transform: translate3d(0, 1280%, 0);
  }
}

@keyframes access-kiosk-qr-pulse {
  0%,
  20%,
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 0 rgba(181, 224, 246, .34),
      inset 0 0 18px rgba(255, 255, 255, .16);
    transform: translate3d(-50%, -50%, 0) scale(.94);
  }

  28% { opacity: .72; }

  58% {
    opacity: .18;
    box-shadow:
      0 0 0 18px rgba(181, 224, 246, 0),
      inset 0 0 24px rgba(255, 255, 255, .22);
    transform: translate3d(-50%, -50%, 0) scale(1.055);
  }

  64% { opacity: 0; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .access-kiosk {
    bottom: clamp(48px, 5.8svh, 60px);
    width: min(27vw, 330px, 64svh);
  }
}

@media (max-width: 900px) {
  .access-kiosk {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-access.is-active .access-kiosk {
    opacity: 1;
    animation: none;
    transform: translate3d(-50%, 0, 0);
  }

  .panel-access.is-active .access-kiosk-stage,
  .panel-access.is-active .access-kiosk-ui,
  .panel-access.is-active .access-kiosk-story,
  .panel-access.is-active .access-kiosk-product-rail,
  .panel-access.is-active .access-kiosk-hero img,
  .panel-access.is-active .access-kiosk-screen-motion::before,
  .panel-access.is-active .access-kiosk-screen-motion::after,
  .panel-access.is-active .access-kiosk-qr-cue {
    animation: none;
  }

  .panel-access.is-active .access-kiosk-story-one {
    opacity: 1;
    transform: none;
  }

  .panel-access.is-active .access-kiosk-story-two,
  .panel-access.is-active .access-kiosk-story-three {
    opacity: 0;
  }
}