html:has(.konami-page),
body:has(.konami-page) {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  overflow: hidden !important;
  background: #020202;
}

html:has(.konami-page) {
  --cx: 0;
  --cy: 0;
  --controller-rx: 0deg;
  --controller-ry: 0deg;
}

.konami-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 40% 36% at 50% 45%, rgba(255, 255, 255, .07), rgba(255, 255, 255, .014) 47%, transparent 74%),
    radial-gradient(ellipse 120% 62% at 50% 112%, rgba(255, 255, 255, .032), transparent 61%),
    #020202;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.grain,
.sheen,
.horizon,
.cursor-glow,
.ambient-light {
  position: absolute;
  pointer-events: none;
}

.grain {
  z-index: 40;
  inset: 0;
  opacity: .14;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.sheen {
  z-index: -2;
  top: -38vh;
  left: 30%;
  width: 38vw;
  min-width: 420px;
  height: 175vh;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .012) 18%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .018) 65%, transparent);
  filter: blur(28px);
  transform: translateX(calc(var(--cx) * 2vw)) rotate(19deg);
  animation: glint 11s cubic-bezier(.16, 1, .3, 1) both;
}

.horizon {
  z-index: -1;
  top: 60%;
  right: -10%;
  left: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .085), transparent);
  box-shadow: 0 0 76px 18px rgba(255, 255, 255, .022);
  transform: perspective(500px) rotateX(72deg);
}

.cursor-glow {
  z-index: -1;
  top: calc(var(--cy) * 1px);
  left: calc(var(--cx) * 1px);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  opacity: .8;
  background: radial-gradient(circle, rgba(255, 255, 255, .035), transparent 66%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
}

@keyframes glint {
  from { opacity: 0; translate: -34vw 0; }
  18% { opacity: 1; }
  to { opacity: .7; translate: 34vw 0; }
}

.ambient-light {
  z-index: 1;
  inset: -18%;
  opacity: .82;
  background:
    radial-gradient(ellipse 36% 28% at 50% 37%, rgba(255, 255, 255, .105), rgba(255, 255, 255, .028) 45%, transparent 76%),
    radial-gradient(ellipse 27% 33% at 25% 51%, rgba(183, 197, 210, .035), transparent 72%),
    radial-gradient(ellipse 30% 38% at 78% 48%, rgba(214, 222, 226, .03), transparent 74%);
  filter: blur(34px);
  transform: scale(1.03);
  animation: ambient-breathe 10s ease-in-out infinite alternate;
}

@keyframes ambient-breathe {
  from { opacity: .7; transform: translate3d(-.7%, .4%, 0) scale(1.02); }
  to { opacity: .9; transform: translate3d(.8%, -.5%, 0) scale(1.055); }
}

.core {
  position: absolute;
  z-index: 20;
  top: 34%;
  left: 50%;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  transition: transform .18s ease-out;
  animation: core-in 1.25s cubic-bezier(.16, 1, .3, 1) both;
}

.core::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(68vw, 920px);
  height: min(30vw, 390px);
  background: radial-gradient(ellipse, rgba(255, 255, 255, .105), rgba(255, 255, 255, .024) 45%, transparent 74%);
  filter: blur(24px);
  transform: translate(-50%, -50%);
}

.logo-lockup {
  position: relative;
  width: clamp(270px, 32vw, 480px);
}

.core img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .12)) drop-shadow(0 0 80px rgba(255, 255, 255, .065)) drop-shadow(0 32px 55px rgba(0, 0, 0, .8));
  animation: ambient-mark 8s ease-in-out infinite alternate;
}

@keyframes ambient-mark {
  from { opacity: .94; filter: drop-shadow(0 0 16px rgba(255, 255, 255, .1)) drop-shadow(0 0 72px rgba(255, 255, 255, .05)) drop-shadow(0 32px 55px rgba(0, 0, 0, .8)); }
  to { opacity: 1; filter: drop-shadow(0 0 23px rgba(255, 255, 255, .15)) drop-shadow(0 0 92px rgba(255, 255, 255, .075)) drop-shadow(0 32px 55px rgba(0, 0, 0, .8)); }
}

@keyframes core-in {
  from { opacity: 0; filter: blur(8px); transform: translate(-50%, calc(-50% + 15px)) scale(.98); }
}

.controller-shell {
  position: absolute;
  z-index: 18;
  top: 64%;
  left: 50%;
  width: clamp(300px, 35vw, 500px);
  color: inherit;
  text-decoration: none;
  transform: translate(-50%, -50%);
  animation: controller-arrive 1.35s .45s cubic-bezier(.16, 1, .3, 1) both, controller-float 6.8s 1.8s ease-in-out infinite alternate;
}

.controller-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% 8% 12%;
  opacity: .76;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .09), rgba(255, 255, 255, .018) 42%, transparent 70%);
  filter: blur(28px);
}

@keyframes controller-arrive {
  from { opacity: 0; filter: blur(12px); transform: translate(-50%, calc(-50% + 34px)) scale(.86); }
}

@keyframes controller-float {
  from { transform: translate(-50%, calc(-50% - 8px)) rotate(-.7deg); }
  to { transform: translate(-50%, calc(-50% + 9px)) rotate(.7deg); }
}

.mobile-atmosphere { display: contents; }

.field {
  position: absolute;
  z-index: 14;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand {
  --size: 140px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: clamp(72px, var(--size), 224px);
  min-height: 52px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: brand-in 1s var(--intro, 0s) cubic-bezier(.16, 1, .3, 1) forwards;
}

.brand img {
  display: block;
  width: 100%;
  max-height: 68px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 10px 26px rgba(0, 0, 0, .86));
  pointer-events: none;
  user-select: none;
}

.brand.unilever { --size: 112px; }
.brand.dq { --size: 42px; }
.brand.dq img { max-height: 70px; }

@keyframes brand-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: .62; filter: none; }
}

@media (max-width: 760px) {
  .konami-page {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  .core {
    position: absolute;
    top: 25%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) !important;
  }

  .logo-lockup { width: min(76vw, 310px); }

  .controller-shell {
    position: absolute;
    top: 57%;
    left: 50%;
    width: min(94vw, 410px);
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .controller-render { transform: rotateZ(-4deg); }

  .mobile-atmosphere {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }

  .field { z-index: 0; inset: 0; }
  .brand { min-height: 0; opacity: .24 !important; transform: none !important; filter: none !important; }
  .brand img { max-width: none; max-height: 42px; }
  .brand:nth-child(1) { left: -7%; top: 7%; width: 82px; }
  .brand:nth-child(2) { left: 37%; top: 7%; width: 105px; }
  .brand:nth-child(3) { left: 75%; top: 16%; width: 132px; }
  .brand:nth-child(4) { left: -8%; top: 27%; width: 67px; }
  .brand:nth-child(5),
  .brand:nth-child(9),
  .brand:nth-child(13) { display: none; }
  .brand:nth-child(6) { left: 78%; top: 34%; width: 106px; }
  .brand:nth-child(7) { left: 1%; top: 35%; width: 112px; }
  .brand:nth-child(8) { left: 2%; top: 48%; width: 30px; }
  .brand:nth-child(10) { left: 77%; top: 66%; width: 94px; }
  .brand:nth-child(11) { left: 83%; top: 80%; width: 58px; }
  .brand:nth-child(12) { left: -7%; top: 75%; width: 88px; }
  .brand:nth-child(14) { left: 63%; top: 92%; width: 146px; }
  .horizon { top: 69%; opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .sheen,
  .ambient-light,
  .core,
  .core img,
  .brand,
  .controller-shell {
    animation: none;
    transition: none;
  }

  .brand { opacity: .64; }
}