:root {
  --vvv-sator-bg: #211b17;
  --vvv-sator-bg-2: #30261e;
  --vvv-sator-bg-3: #433226;
  --vvv-sator-ink: #f1e5d0;
  --vvv-sator-border: rgba(202, 177, 142, 0.18);
  --vvv-sator-accent: #b98d4e;
  --vvv-sator-tile-top: #b59b7d;
  --vvv-sator-tile-mid: #9a8064;
  --vvv-sator-tile-bot: #7d6450;
  --vvv-sator-tile: clamp(42px, 7.6vw, 72px);
  --vvv-sator-gap: clamp(6px, 1vw, 10px);
  --vvv-sator-step: calc(var(--vvv-sator-tile) + var(--vvv-sator-gap));
  --vvv-sator-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  --vvv-sator-pits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23000' fill-opacity='.11'%3E%3Ccircle cx='13' cy='16' r='1.4'/%3E%3Ccircle cx='45' cy='25' r='1.2'/%3E%3Ccircle cx='90' cy='18' r='1.1'/%3E%3Ccircle cx='100' cy='42' r='1.7'/%3E%3Ccircle cx='30' cy='52' r='1.3'/%3E%3Ccircle cx='73' cy='62' r='1.5'/%3E%3Ccircle cx='21' cy='92' r='1.2'/%3E%3Ccircle cx='88' cy='88' r='1.3'/%3E%3Ccircle cx='60' cy='103' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --vvv-sator-cracks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%23311e10' stroke-opacity='.11' stroke-width='1.1' fill='none' stroke-linecap='round'%3E%3Cpath d='M16 30 L30 34 L42 46 L50 49'/%3E%3Cpath d='M70 18 L68 28 L76 36 L71 47'/%3E%3Cpath d='M26 78 L35 71 L48 79 L56 76'/%3E%3Cpath d='M82 82 L94 88 L101 84 L108 91'/%3E%3C/g%3E%3C/svg%3E");
}

html.vvv-sator-active,
html.vvv-sator-active body {
  overflow: hidden !important;
}

.vvv-sator-intro,
.vvv-sator-intro * {
  box-sizing: border-box;
}

.vvv-sator-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--vvv-sator-ink);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,241,218,.05), transparent 14rem),
    radial-gradient(circle at 50% 60%, rgba(185,141,78,.05), transparent 20rem),
    radial-gradient(circle at 50% 82%, rgba(110,28,24,.06), transparent 18rem),
    linear-gradient(180deg, var(--vvv-sator-bg), var(--vvv-sator-bg-2) 48%, var(--vvv-sator-bg-3));
  transition: opacity 620ms ease 120ms, visibility 0s linear 760ms;
  isolation: isolate;
}

.vvv-sator-intro::before,
.vvv-sator-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vvv-sator-intro::before {
  opacity: .36;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,250,238,.20), transparent 12rem),
    radial-gradient(circle at 82% 15%, rgba(203,159,101,.12), transparent 10rem),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(20deg, rgba(106,71,40,.015) 0 2px, transparent 2px 9px);
  mix-blend-mode: soft-light;
}

.vvv-sator-intro::after {
  opacity: .10;
  background: linear-gradient(90deg,
    transparent 0, transparent 10%, rgba(103,74,44,.18) 10.5%, transparent 11%,
    transparent 49%, rgba(210,180,120,.10) 50%, transparent 51%,
    transparent 89%, rgba(103,74,44,.18) 89.5%, transparent 90%, transparent 100%);
  transform: scale(1.06);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.15,.8,.2,1);
}

.vvv-sator-intro.is-opening::after {
  opacity: .15;
  transform: scale(1.12);
}

.vvv-sator-intro.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vvv-sator-unlock {
  position: relative;
  width: min(95vw, calc(var(--vvv-sator-step) * 11 + 2rem));
  height: min(95vh, calc(var(--vvv-sator-step) * 11 + 2rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.vvv-sator-unlock::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: min(74vw, calc(var(--vvv-sator-step) * 8.1));
  height: min(14vh, calc(var(--vvv-sator-step) * 1.45));
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,63,35,.18), rgba(92,63,35,0) 72%);
  filter: blur(10px);
  opacity: .44;
  pointer-events: none;
}

.vvv-sator-unlock:focus-visible {
  outline: 1px solid rgba(185,141,78,.55);
  outline-offset: .7rem;
  border-radius: .2rem;
}

.vvv-sator-cross-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vvv-sator-step) * 8.4);
  height: calc(var(--vvv-sator-step) * 8.4);
  transform: translate(-50%, -50%) scale(.60);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms ease, transform 560ms cubic-bezier(.16,.84,.19,1), filter 560ms cubic-bezier(.16,.84,.19,1);
  filter: blur(10px);
  z-index: 0;
}

.vvv-sator-cross-light__v,
.vvv-sator-cross-light__h,
.vvv-sator-cross-light__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.vvv-sator-cross-light__v,
.vvv-sator-cross-light__h {
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,247,222,.48), 0 0 48px rgba(255,239,202,.40), 0 0 96px rgba(226,177,92,.54), 0 0 168px rgba(226,177,92,.36), 0 0 250px rgba(226,177,92,.20);
}

.vvv-sator-cross-light__v {
  width: calc(var(--vvv-sator-step) * 1.42);
  height: calc(var(--vvv-sator-step) * 10.9);
  background: linear-gradient(180deg, transparent, rgba(255,242,210,.26) 10%, rgba(237,188,91,.96) 52%, rgba(255,242,210,.26) 90%, transparent);
  clip-path: polygon(40% 0%,60% 0%,72% 16%,72% 84%,60% 100%,40% 100%,28% 84%,28% 16%);
}

.vvv-sator-cross-light__h {
  width: calc(var(--vvv-sator-step) * 10.9);
  height: calc(var(--vvv-sator-step) * 1.42);
  background: linear-gradient(90deg, transparent, rgba(255,242,210,.26) 10%, rgba(237,188,91,.96) 52%, rgba(255,242,210,.26) 90%, transparent);
  clip-path: polygon(0% 40%,16% 28%,84% 28%,100% 40%,100% 60%,84% 72%,16% 72%,0% 60%);
}

.vvv-sator-cross-light__core {
  width: calc(var(--vvv-sator-step) * 2.8);
  height: calc(var(--vvv-sator-step) * 2.8);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,236,.68), rgba(237,188,91,.25) 56%, transparent 78%);
  box-shadow: 0 0 38px rgba(255,246,220,.28), 0 0 105px rgba(226,177,92,.24);
}

.vvv-sator-tile {
  --x: 0px;
  --y: 0px;
  --lift: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --turn: 0deg;
  --tile-delay: 0ms;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--vvv-sator-tile);
  height: var(--vvv-sator-tile);
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,205,170,.24);
  border-radius: clamp(2px,.42vw,5px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 28% 22%, rgba(252,242,223,.20), transparent 21%),
    radial-gradient(circle at 78% 78%, rgba(60,40,24,.20), transparent 28%),
    var(--vvv-sator-cracks),
    var(--vvv-sator-pits),
    var(--vvv-sator-noise),
    linear-gradient(180deg, var(--vvv-sator-tile-top), var(--vvv-sator-tile-mid) 56%, var(--vvv-sator-tile-bot));
  color: var(--vvv-sator-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(45,29,17,.20) inset, 0 0 0 1px rgba(62,40,23,.08), 0 10px 22px rgba(0,0,0,.28);
  font-size: calc(var(--vvv-sator-tile) * .47);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  text-shadow: 0 1px 0 rgba(48,30,16,.92), 0 0 9px rgba(0,0,0,.12);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translate3d(var(--x), calc(var(--y) + var(--lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--turn));
  transition: transform 100ms cubic-bezier(.2,.8,.2,1), border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
  will-change: transform;
  user-select: none;
  z-index: 2;
  overflow: hidden;
}

.vvv-sator-tile::before,
.vvv-sator-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.vvv-sator-tile::before {
  inset: 10%;
  border-radius: 10%;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.10), inset -2px -2px 2.4px rgba(52,34,20,.35), inset 0 0 0 1px rgba(84,58,34,.08), inset 0 10px 11px rgba(255,255,255,.02);
}

.vvv-sator-tile::after {
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 31%), linear-gradient(315deg, rgba(67,43,24,.15), transparent 51%);
  mix-blend-mode: soft-light;
  opacity: .62;
}

.vvv-sator-unlock:not(.is-transforming):not(.is-locking) .vvv-sator-tile.is-near {
  border-color: rgba(238,215,179,.48);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 18px 30px rgba(0,0,0,.34), 0 0 22px rgba(226,177,92,.12);
  filter: brightness(1.08);
}

.vvv-sator-unlock.is-transforming {
  cursor: default;
}

.vvv-sator-unlock.is-transforming .vvv-sator-tile {
  transition: transform 760ms cubic-bezier(.16,.84,.19,1) var(--tile-delay), border-color 420ms ease var(--tile-delay), color 420ms ease var(--tile-delay), box-shadow 560ms ease var(--tile-delay), filter 420ms ease var(--tile-delay), opacity 420ms ease var(--tile-delay);
  border-color: rgba(229,205,170,.34);
  box-shadow: 0 1px 0 rgba(255,255,255,.11) inset, 0 12px 24px rgba(69,47,27,.26);
}

.vvv-sator-unlock.is-locking .vvv-sator-cross-light,
.vvv-sator-unlock.is-locked .vvv-sator-cross-light {
  opacity: 1;
}

.vvv-sator-unlock.is-locking .vvv-sator-cross-light {
  transform: translate(-50%, -50%) scale(1.06);
  filter: blur(8px);
  animation: vvvSatorCrossPulse 460ms cubic-bezier(.17,.88,.3,1) 1;
}

.vvv-sator-unlock.is-locked .vvv-sator-cross-light {
  transform: translate(-50%, -50%) scale(1.12);
  filter: blur(10px);
}

.vvv-sator-unlock.is-locking .vvv-sator-tile[data-cross="true"] {
  animation: vvvSatorTileLock 300ms cubic-bezier(.18,.82,.2,1) 1;
}

.vvv-sator-unlock.is-locked .vvv-sator-tile {
  transition: transform 300ms cubic-bezier(.2,.75,.2,1), border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, filter 300ms ease, opacity 300ms ease;
}

.vvv-sator-unlock.is-locked .vvv-sator-tile[data-cross="true"] {
  border-color: rgba(238,215,179,.54);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 14px 31px rgba(0,0,0,.32), 0 0 24px rgba(237,188,91,.18);
  filter: brightness(1.08);
}

.vvv-sator-unlock.is-locked .vvv-sator-tile[data-center="true"] {
  border-color: rgba(245,209,144,.78);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 15px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(226,177,92,.28), 0 0 38px rgba(226,177,92,.38);
  filter: brightness(1.13);
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(1.045);
}

.vvv-sator-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes vvvSatorTileLock {
  0% { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(1); }
  45% { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(1.05); }
  70% { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(.985); }
  100% { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(1); }
}

@keyframes vvvSatorCrossPulse {
  0% { opacity: 0; }
  30% { opacity: .78; }
  100% { opacity: 1; }
}

@media (max-height: 680px) {
  :root {
    --vvv-sator-tile: clamp(36px, 8vh, 58px);
    --vvv-sator-gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vvv-sator-intro *,
  .vvv-sator-intro *::before,
  .vvv-sator-intro *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}