:root {
  --vvv-sator-bg: #171310;
  --vvv-sator-bg-2: #241c17;
  --vvv-sator-bg-3: #38291f;
  --vvv-sator-ink: #f3e6cf;
  --vvv-sator-border: rgba(232, 207, 170, 0.22);
  --vvv-sator-accent: #d9a95a;
  --vvv-sator-accent-2: #f0c878;
  --vvv-sator-tile-top: #b89f81;
  --vvv-sator-tile-mid: #9b8166;
  --vvv-sator-tile-bot: #755c47;
  --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");
  --vvv-sator-fine-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.14'/%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;
  }
}


/* Monolithic surrounds — visual layer only; the approved SATOR sequence is unchanged. */
@property --vvv-sator-ambient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.vvv-sator-intro {
  --vvv-sator-env-x-back: 0px;
  --vvv-sator-env-y-back: 0px;
  --vvv-sator-env-x-light: 0px;
  --vvv-sator-env-y-light: 0px;
  --vvv-sator-env-x-chamber: 0px;
  --vvv-sator-env-y-chamber: 0px;
  --vvv-sator-env-x-edge: 0px;
  --vvv-sator-env-y-edge: 0px;
  --vvv-sator-env-x-floor: 0px;
  --vvv-sator-env-y-floor: 0px;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(255,231,183,.18), transparent 38%),
    radial-gradient(circle at 50% 48%, rgba(203,146,76,.07), transparent 35%),
    linear-gradient(165deg, #241b16 0%, #30241c 45%, #443226 100%);
}

.vvv-sator-intro::before {
  inset: -18%;
  z-index: -2;
  background:
    conic-gradient(from var(--vvv-sator-ambient-angle) at 50% 46%,
      transparent 0 12%, rgba(240,200,122,.065) 18%, transparent 27% 48%,
      rgba(152,76,48,.045) 57%, transparent 66% 84%,
      rgba(240,200,122,.04) 92%, transparent 100%);
  filter: blur(72px) saturate(1.1);
  opacity: .95;
  animation: vvvSatorAmbientOrbit 24s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 82%);
  mix-blend-mode: normal;
}

.vvv-sator-intro::after {
  inset: 0;
  z-index: -1;
  opacity: .30;
  background:
    var(--vvv-sator-fine-grain),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.16) 78%, rgba(0,0,0,.36) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px);
  mix-blend-mode: soft-light;
}

.vvv-sator-intro.is-opening::before { opacity: .45; filter: blur(96px) saturate(1.2); }
.vvv-sator-intro.is-opening::after { opacity: .18; transform: none; }

.vvv-sator-surrounds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.vvv-sator-surrounds__backdrop,
.vvv-sator-surrounds__lightwell,
.vvv-sator-surrounds__chamber,
.vvv-sator-surrounds__floor,
.vvv-sator-surrounds__veil,
.vvv-sator-surrounds__edge,
.vvv-sator-surrounds__dust {
  position: absolute;
  pointer-events: none;
}

.vvv-sator-surrounds__backdrop {
  inset: -6%;
  transform: translate3d(var(--vvv-sator-env-x-back), var(--vvv-sator-env-y-back), -80px) scale(1.05);
  background:
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, transparent 15%, transparent 85%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(237,196,129,.028) calc(12.5% - 1px) 12.5%),
    radial-gradient(ellipse at 50% 44%, rgba(255,232,190,.10), transparent 37%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.08));
  filter: saturate(.9);
  opacity: .95;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 650ms ease;
}

.vvv-sator-surrounds__lightwell {
  left: 50%; top: -18vh; width: min(78vw, 980px); height: 58vh;
  transform: translate3d(calc(-50% + var(--vvv-sator-env-x-light)), var(--vvv-sator-env-y-light), -20px);
  background: radial-gradient(ellipse at 50% 20%, rgba(255,247,224,.36), rgba(242,193,111,.13) 35%, transparent 72%);
  filter: blur(12px); opacity: .86;
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 620ms ease;
}
.vvv-sator-surrounds__lightwell::before,
.vvv-sator-surrounds__lightwell::after {
  content: ""; position: absolute; top: 9%; width: 38%; height: 120%;
  background: linear-gradient(180deg, rgba(255,232,188,.18), rgba(233,183,98,.035) 45%, transparent 88%);
  filter: blur(19px); opacity: .72; mix-blend-mode: screen;
}
.vvv-sator-surrounds__lightwell::before { left: 13%; transform: rotate(11deg) skewX(-7deg); transform-origin: 50% 0; }
.vvv-sator-surrounds__lightwell::after { right: 13%; transform: rotate(-11deg) skewX(7deg); transform-origin: 50% 0; }

.vvv-sator-surrounds__chamber {
  left: 50%; top: 50%; width: min(88vw, 1120px); height: min(86vh, 860px);
  transform: translate3d(calc(-50% + var(--vvv-sator-env-x-chamber)), calc(-50% + var(--vvv-sator-env-y-chamber)), -35px);
  clip-path: polygon(4% 0, 96% 0, 100% 7%, 100% 93%, 96% 100%, 4% 100%, 0 93%, 0 7%);
  background: linear-gradient(90deg, rgba(255,255,255,.018), transparent 13% 87%, rgba(255,255,255,.018)), linear-gradient(180deg, rgba(255,255,255,.028), transparent 18% 80%, rgba(0,0,0,.05)), rgba(31,23,18,.17);
  border: 1px solid rgba(232,196,137,.11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), inset 0 0 90px rgba(0,0,0,.15), 0 42px 100px rgba(0,0,0,.24);
  backdrop-filter: blur(2px);
  transition: transform 310ms cubic-bezier(.2,.8,.2,1), opacity 650ms ease;
}
.vvv-sator-surrounds__chamber::before,
.vvv-sator-surrounds__chamber::after { content: ""; position: absolute; pointer-events: none; }
.vvv-sator-surrounds__chamber::before { inset: 4.5%; clip-path: inherit; border: 1px solid rgba(231,185,108,.105); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 0 46px rgba(217,169,90,.035); }
.vvv-sator-surrounds__chamber::after { left: 50%; top: 7%; bottom: 7%; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(244,201,131,.10) 22%, rgba(244,201,131,.15) 50%, rgba(244,201,131,.10) 78%, transparent); box-shadow: 0 0 20px rgba(225,177,92,.08); opacity: .55; }

.vvv-sator-surrounds__edge {
  top: 7vh; bottom: 7vh; width: min(19vw, 260px);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 18% 82%, rgba(0,0,0,.08)), linear-gradient(90deg, rgba(255,255,255,.018), rgba(145,93,52,.05));
  border: 1px solid rgba(230,192,132,.08);
  box-shadow: inset 0 0 60px rgba(0,0,0,.11), 0 30px 70px rgba(0,0,0,.16);
  opacity: .88;
  transition: transform 330ms cubic-bezier(.2,.8,.2,1), opacity 650ms ease;
}
.vvv-sator-surrounds__edge--left { left: -2vw; clip-path: polygon(0 0, 82% 0, 100% 8%, 100% 92%, 82% 100%, 0 100%); transform: translate3d(var(--vvv-sator-env-x-edge), var(--vvv-sator-env-y-edge), -10px) rotateY(4deg); }
.vvv-sator-surrounds__edge--right { right: -2vw; clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 92%, 0 8%); transform: translate3d(var(--vvv-sator-env-x-edge), var(--vvv-sator-env-y-edge), -10px) rotateY(-4deg); }
.vvv-sator-surrounds__edge::before,
.vvv-sator-surrounds__edge::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(236,196,130,.18), transparent); }
.vvv-sator-surrounds__edge::before { top: 18%; }
.vvv-sator-surrounds__edge::after { bottom: 18%; }

.vvv-sator-surrounds__floor {
  left: 50%; bottom: -38vh; width: 150vw; height: 78vh; transform-origin: 50% 100%;
  transform: translate3d(calc(-50% + var(--vvv-sator-env-x-floor)), var(--vvv-sator-env-y-floor), 0) rotateX(69deg);
  background: radial-gradient(ellipse at 50% 0%, rgba(240,194,113,.09), transparent 42%), repeating-linear-gradient(90deg, transparent 0 calc(8.33% - 1px), rgba(222,176,101,.055) calc(8.33% - 1px) 8.33%), repeating-linear-gradient(0deg, transparent 0 74px, rgba(222,176,101,.042) 74px 75px), linear-gradient(180deg, rgba(53,39,29,.44), rgba(24,18,14,.12));
  border-top: 1px solid rgba(237,195,125,.08); filter: blur(.15px); opacity: .67;
  -webkit-mask-image: linear-gradient(180deg, #000 0 56%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 56%, transparent 100%);
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 650ms ease;
}
.vvv-sator-surrounds__floor::before { content: ""; position: absolute; left: 50%; top: -8%; width: min(54vw, 700px); height: 34%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(246,205,133,.11), rgba(227,174,88,.035) 46%, transparent 72%); filter: blur(20px); mix-blend-mode: screen; }

.vvv-sator-surrounds__dust {
  inset: 0; opacity: .48; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,234,194,.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 64%, rgba(255,226,176,.35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 18%, rgba(255,239,207,.40) 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 72%, rgba(255,225,170,.34) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 30%, rgba(255,236,201,.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 58%, rgba(255,225,171,.35) 0 1px, transparent 1.6px);
  background-size: 270px 310px, 330px 290px, 410px 380px, 350px 430px, 470px 360px, 390px 460px;
  animation: vvvSatorDustDrift 28s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 48%, transparent 82%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 0 48%, transparent 82%);
}

.vvv-sator-surrounds__veil { inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.20), transparent 16% 84%, rgba(0,0,0,.20)), linear-gradient(180deg, transparent 0 70%, rgba(0,0,0,.18) 100%), radial-gradient(ellipse at 50% 46%, transparent 36%, rgba(0,0,0,.12) 74%, rgba(0,0,0,.31) 100%), var(--vvv-sator-fine-grain); mix-blend-mode: soft-light; opacity: .54; }

.vvv-sator-surrounds__corner { position: absolute; width: clamp(72px, 10vw, 132px); height: clamp(72px, 10vw, 132px); opacity: .32; pointer-events: none; }
.vvv-sator-surrounds__corner::before,
.vvv-sator-surrounds__corner::after { content: ""; position: absolute; background: linear-gradient(90deg, rgba(239,198,128,.42), transparent); box-shadow: 0 0 16px rgba(225,177,92,.06); }
.vvv-sator-surrounds__corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.vvv-sator-surrounds__corner::after { width: 1px; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(239,198,128,.42), transparent); }
.vvv-sator-surrounds__corner--tl { top: 5vh; left: 5vw; }
.vvv-sator-surrounds__corner--tr { top: 5vh; right: 5vw; transform: scaleX(-1); }
.vvv-sator-surrounds__corner--bl { bottom: 5vh; left: 5vw; transform: scaleY(-1); }
.vvv-sator-surrounds__corner--br { bottom: 5vh; right: 5vw; transform: scale(-1); }

.vvv-sator-unlock { z-index: 5; perspective: 1300px; filter: drop-shadow(0 34px 45px rgba(0,0,0,.17)) drop-shadow(0 0 70px rgba(217,169,90,.035)); }
.vvv-sator-unlock::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(78vw, calc(var(--vvv-sator-step) * 8.5)); height: min(78vw, calc(var(--vvv-sator-step) * 8.5)); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(255,236,194,.040) 0 30%, rgba(217,169,90,.025) 46%, transparent 70%); filter: blur(15px); opacity: .52; }
.vvv-sator-unlock::after { bottom: 8%; width: min(76vw, calc(var(--vvv-sator-step) * 8.6)); height: min(15vh, calc(var(--vvv-sator-step) * 1.55)); background: radial-gradient(ellipse, rgba(0,0,0,.34), rgba(92,63,35,.12) 38%, transparent 72%); filter: blur(14px); opacity: .72; }

.vvv-sator-cross-light { width: calc(var(--vvv-sator-step) * 9.3); height: calc(var(--vvv-sator-step) * 9.3); transform: translate(-50%, -50%) scale(.58); }
.vvv-sator-cross-light::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 10%, rgba(255,226,160,.14) 12%, transparent 15% 35%, rgba(255,226,160,.10) 38%, transparent 41% 60%, rgba(255,226,160,.12) 63%, transparent 66% 85%, rgba(255,226,160,.08) 88%, transparent 91% 100%); filter: blur(18px); opacity: .68; mix-blend-mode: screen; }
.vvv-sator-cross-light::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,249,231,.32), rgba(240,198,112,.12) 42%, transparent 72%); filter: blur(12px); }

.vvv-sator-tile { border-color: rgba(238,217,184,.26); border-radius: clamp(3px,.46vw,6px); isolation: isolate; background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 26%), radial-gradient(circle at 25% 20%, rgba(255,250,236,.24), transparent 23%), radial-gradient(circle at 82% 80%, rgba(45,29,18,.23), transparent 30%), var(--vvv-sator-cracks), var(--vvv-sator-pits), var(--vvv-sator-noise), linear-gradient(162deg, var(--vvv-sator-tile-top), var(--vvv-sator-tile-mid) 55%, var(--vvv-sator-tile-bot)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.16), inset -1px -1px 0 rgba(41,25,14,.28), inset 0 0 0 1px rgba(255,255,255,.025), 0 4px 6px rgba(0,0,0,.12), 0 15px 26px rgba(0,0,0,.30), 0 0 0 1px rgba(66,43,25,.10); font-family: "Palatino Linotype", Palatino, Georgia, serif; filter: saturate(.94) contrast(1.02); }
.vvv-sator-tile::before { inset: 9%; border-radius: 11%; z-index: -1; box-shadow: inset 1px 1px 1px rgba(255,255,255,.12), inset -2.2px -2.2px 2.8px rgba(49,31,18,.36), inset 0 0 0 1px rgba(92,63,37,.09), inset 0 12px 14px rgba(255,255,255,.025), inset 0 -10px 16px rgba(49,31,18,.05); }
.vvv-sator-tile::after { z-index: 3; background: linear-gradient(112deg, transparent 18%, rgba(255,250,231,0) 34%, rgba(255,250,231,.20) 47%, rgba(255,250,231,.04) 54%, transparent 68%), linear-gradient(315deg, rgba(55,35,20,.16), transparent 48%); background-size: 240% 100%, 100% 100%; background-position: 145% 0, 0 0; opacity: .50; transition: background-position 420ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
.vvv-sator-unlock:not(.is-transforming):not(.is-locking) .vvv-sator-tile.is-near { border-color: rgba(248,226,190,.52); box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(41,25,14,.25), 0 7px 10px rgba(0,0,0,.15), 0 22px 38px rgba(0,0,0,.36), 0 0 26px rgba(217,169,90,.16); filter: brightness(1.09) saturate(.98) contrast(1.03); }
.vvv-sator-unlock:not(.is-transforming):not(.is-locking) .vvv-sator-tile.is-near::after { background-position: 72% 0, 0 0; opacity: .74; }
.vvv-sator-unlock.is-locking .vvv-sator-tile[data-cross="true"]::after { animation: vvvSatorTileSheen 620ms cubic-bezier(.2,.75,.2,1) 1; }
.vvv-sator-unlock.is-locked .vvv-sator-tile[data-cross="true"] { border-color: rgba(248,225,184,.58); box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(41,25,14,.24), 0 15px 30px rgba(0,0,0,.32), 0 0 26px rgba(237,188,91,.20); filter: brightness(1.08) saturate(.96); }
.vvv-sator-unlock.is-locked .vvv-sator-tile[data-center="true"] { border-color: rgba(255,222,156,.82); box-shadow: inset 1px 1px 0 rgba(255,255,255,.20), inset -1px -1px 0 rgba(41,25,14,.22), 0 16px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(217,169,90,.30), 0 0 42px rgba(237,188,91,.42); filter: brightness(1.14) saturate(.98); }

.vvv-sator-intro.is-opening .vvv-sator-surrounds__backdrop,
.vvv-sator-intro.is-opening .vvv-sator-surrounds__chamber,
.vvv-sator-intro.is-opening .vvv-sator-surrounds__edge,
.vvv-sator-intro.is-opening .vvv-sator-surrounds__floor { opacity: .22; filter: blur(6px); }
.vvv-sator-intro.is-opening .vvv-sator-surrounds__lightwell { opacity: .30; filter: blur(22px); }
.vvv-sator-intro.is-opening .vvv-sator-surrounds__dust { opacity: .10; }
.vvv-sator-intro.is-opening .vvv-sator-surrounds__corner { opacity: .10; }

@keyframes vvvSatorAmbientOrbit { to { --vvv-sator-ambient-angle: 360deg; } }
@keyframes vvvSatorTileSheen { 0% { background-position: 145% 0,0 0; opacity:.35; } 48% { background-position:48% 0,0 0; opacity:.82; } 100% { background-position:-35% 0,0 0; opacity:.50; } }
@keyframes vvvSatorDustDrift { 0% { background-position:0 0,0 0,0 0,0 0,0 0,0 0; } 50% { background-position:18px -34px,-22px -28px,30px -18px,-15px -42px,25px -31px,-20px -24px; } 100% { background-position:36px -68px,-44px -56px,60px -36px,-30px -84px,50px -62px,-40px -48px; } }

@media (max-width:760px) {
  .vvv-sator-surrounds__edge { width:22vw; opacity:.56; }
  .vvv-sator-surrounds__chamber { width:96vw; height:90vh; }
  .vvv-sator-surrounds__corner { opacity:.20; }
  .vvv-sator-surrounds__floor { bottom:-43vh; width:180vw; }
}

@media (prefers-reduced-motion:reduce) {
  .vvv-sator-surrounds__dust { animation:none !important; }
  .vvv-sator-surrounds__backdrop,
  .vvv-sator-surrounds__lightwell,
  .vvv-sator-surrounds__chamber,
  .vvv-sator-surrounds__edge,
  .vvv-sator-surrounds__floor { transition:none !important; }
}