/*
   777777   77     77 77        777777  77777777    777    77    77
  77    77  77     77 77       77    77    77      77 77   777   77
  77        77     77 77       77          77     77   77  7777  77
  77   7777 77     77 77        777777     77    77     77 77 77 77
  77    77  77     77 77             77    77    777777777 77  7777
  77    77  77     77 77       77    77    77    77     77 77   777
   777777    7777777  77777777  777777     77    77     77 77    77
*/

/* Base, the background field and its frame. */

:root {
  --field-lit: #8c2148;
  --field-core: #7c193b;
  --field-mid: #66112c;
  --field-side: #52071c;
  --field-deep: #35040f;
  --field-glow: rgba(140, 33, 72, 0.48);

  --ink: #fff6ea;
  --ink-soft: rgba(255, 246, 234, 0.72);
  --ink-mute: rgba(255, 246, 234, 0.4);
  --frame-line: rgba(218, 200, 176, 0.36);
  --frame-reveal: rgba(26, 5, 12, 0.32);

  --font: "Cinzel", "Times New Roman", Times, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-draw: cubic-bezier(0.19, 1, 0.22, 1);

  --name-size: clamp(0.92rem, 1.55vw, 1.15rem);
  --name-track: 0.38em;

  --enter-name: 0.45s;

  --lamp: #fdf0da;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  height: 100%;
  min-height: 100dvh;
  background: var(--field-side);
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Field */
.field {
  --frame-step: clamp(0.6rem, 1.5vw, 1.05rem);
  --lip-radius: clamp(0.25rem, 0.55vw, 0.45rem);
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: url("/cursor.svg") 3 3, auto;
}

.field__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      70% 64% at 58% 46%,
      var(--field-lit) 0%,
      var(--field-glow) 32%,
      transparent 66%
    ),
    linear-gradient(
      105deg,
      var(--field-deep) 0%,
      transparent 34%,
      transparent 70%,
      var(--field-deep) 100%
    ),
    linear-gradient(
      180deg,
      var(--field-side) 0%,
      var(--field-mid) 18%,
      var(--field-core) 52%,
      var(--field-mid) 84%,
      var(--field-side) 100%
    );
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.field.is-ready .field__base {
  opacity: 1;
}

.field__pattern {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--frame-step));
  right: calc(env(safe-area-inset-right, 0px) + var(--frame-step));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--frame-step));
  left: calc(env(safe-area-inset-left, 0px) + var(--frame-step));
  overflow: hidden;
  border-radius: var(--lip-radius);
  z-index: 1;
  pointer-events: none;
}

.field__stage {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  opacity: 0;
  transition: opacity 1.3s var(--ease) 0.15s;
}

.field.is-ready .field__stage {
  opacity: 1;
  animation: drift 80s ease-in-out 1.5s infinite alternate;
}

.field__canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: var(--cam-x, 50%) var(--cam-y, 50%);
  -webkit-mask-image: radial-gradient(
    88% 78% at 62% 52%,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.4) 36%,
    rgba(0, 0, 0, 0.88) 68%,
    #000 94%
  );
  mask-image: radial-gradient(
    88% 78% at 62% 52%,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.4) 36%,
    rgba(0, 0, 0, 0.88) 68%,
    #000 94%
  );
}

.field__weave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      63.4deg,
      rgba(255, 255, 255, 0.008) 0 1.5px,
      transparent 1.5px 4px
    ),
    repeating-linear-gradient(
      -63.4deg,
      rgba(0, 0, 0, 0.012) 0 1.5px,
      transparent 1.5px 4px
    );
  -webkit-mask-image: radial-gradient(
    100% 92% at 60% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 34%,
    rgba(0, 0, 0, 0.72) 60%,
    #000 86%
  );
  mask-image: radial-gradient(
    100% 92% at 60% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 34%,
    rgba(0, 0, 0, 0.72) 60%,
    #000 86%
  );
  opacity: 0;
}

@keyframes pattern-edge-bloom {
  0% {
    opacity: 0;
  }
  28% {
    opacity: var(--bloom-peak, 1);
  }
  100% {
    opacity: var(--bloom-rest, 0.7);
  }
}

.field.is-ready .field__weave {
  --bloom-peak: 0.95;
  --bloom-rest: 0.7;
  animation: pattern-edge-bloom 3.5s var(--ease) 0.5s both;
}

.field__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      38deg,
      var(--frame-line) 0 0.55px,
      transparent 0.55px 11px
    ),
    repeating-linear-gradient(
      -38deg,
      var(--frame-line) 0 0.55px,
      transparent 0.55px 11px
    );
  background-position: 0 0, 5.5px 0;
  -webkit-mask-image: radial-gradient(
    52% 50% at 60% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.14) 34%,
    rgba(0, 0, 0, 0.55) 62%,
    #000 88%
  );
  mask-image: radial-gradient(
    52% 50% at 60% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.14) 34%,
    rgba(0, 0, 0, 0.55) 62%,
    #000 88%
  );
  opacity: 0;
}

.field.is-ready .field__lines {
  --bloom-peak: 0.4;
  --bloom-rest: 0.11;
  animation: pattern-edge-bloom 3.9s var(--ease) 0.65s both;
}

.field__lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 0% 0%,
      var(--frame-line) 0 1px,
      transparent 1px 18px
    ),
    repeating-radial-gradient(
      circle at 100% 0%,
      var(--frame-line) 0 1px,
      transparent 1px 18px
    ),
    repeating-radial-gradient(
      circle at 0% 100%,
      var(--frame-line) 0 1px,
      transparent 1px 18px
    ),
    repeating-radial-gradient(
      circle at 100% 100%,
      var(--frame-line) 0 1px,
      transparent 1px 18px
    );
  -webkit-mask-image:
    radial-gradient(32% 36% at 0% 0%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 100% 0%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 0% 100%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 100% 100%, #000 0%, transparent 78%);
  mask-image:
    radial-gradient(32% 36% at 0% 0%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 100% 0%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 0% 100%, #000 0%, transparent 78%),
    radial-gradient(32% 36% at 100% 100%, #000 0%, transparent 78%);
}

.field__grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.02  0 0 0 0 0.06  0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.field__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(42, 4, 12, 0.16) 0%,
      transparent 24%,
      transparent 78%,
      rgba(42, 4, 12, 0.1) 100%
    ),
    linear-gradient(
      180deg,
      rgba(42, 4, 12, 0.14) 0%,
      transparent 22%,
      transparent 70%,
      rgba(42, 4, 12, 0.22) 100%
    );
}

/* Frame */
.field__frame {
  position: absolute;
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.8s var(--ease) 0.2s;
}

.field.is-ready .field__frame {
  opacity: 1;
}

.field__frame-well {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.field__frame-well::after {
  content: "";
  position: absolute;
  inset: var(--frame-step);
  border-radius: var(--lip-radius);
  box-shadow:
    0 0 0 calc(var(--frame-step) + 2px) var(--frame-reveal),
    inset 0 1px 3px rgba(10, 2, 6, 0.2);
}

.field__frame-rise {
  position: absolute;
  inset: var(--frame-step);
  border: 1px solid var(--frame-line);
  border-radius: var(--lip-radius);
  box-shadow:
    inset 0 0 0 1px rgba(28, 6, 14, 0.12),
    inset 0 1px 0 rgba(255, 248, 238, 0.08);
}

/* Chamber and wordmark */
.chamber {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--frame-step));
  right: calc(env(safe-area-inset-right, 0px) + var(--frame-step));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--frame-step));
  left: calc(env(safe-area-inset-left, 0px) + var(--frame-step));
  z-index: 5;
  overflow: hidden;
  border-radius: var(--lip-radius);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chamber__plate {
  position: absolute;
  top: clamp(1.35rem, 3.8vw, 2.75rem);
  left: clamp(1.35rem, 3.8vw, 2.75rem);
  z-index: 2;
}

.chamber__name {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--name-size);
  font-synthesis: none;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}

.chamber__name-inner {
  display: inline-block;
  letter-spacing: var(--name-track);
  margin-inline-end: calc(-1 * var(--name-track));
  opacity: 0;
  transform: translate3d(0, 0.4em, 0);
  transition:
    opacity 1.05s var(--ease) var(--enter-name),
    transform 1.2s var(--ease-draw) var(--enter-name);
}

.field.is-ready .chamber__name-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Scene and overlays */
.chamber__scene {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.fade-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--lamp);
  opacity: 0;
  pointer-events: none;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-12px, 10px, 0);
  }
}

/* Responsive */
@media (hover: none), (pointer: coarse) {
  .field.is-ready .field__stage {
    animation: none;
  }

  .field__grain {
    mix-blend-mode: normal;
    opacity: 0.045;
  }
}

@media (max-width: 760px) {
  :root {
    --name-size: clamp(0.85rem, 3.6vw, 1.05rem);
    --name-track: 0.3em;
    --enter-name: 0.4s;
  }

  .field {
    --frame-step: clamp(0.45rem, 2.2vw, 0.75rem);
  }

  .field.is-ready .field__stage {
    animation: none;
  }

  .field__canvas {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.84;
  }

  .chamber__plate {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field__base,
  .field__stage,
  .field__weave,
  .field__lines,
  .field__frame,
  .chamber__name-inner {
    transition: none !important;
    animation: none !important;
  }

  .field.is-ready .field__base,
  .field.is-ready .field__stage,
  .field.is-ready .field__frame,
  .field.is-ready .chamber__name-inner {
    opacity: 1;
    transform: none;
  }

  .field.is-ready .field__weave,
  .field.is-ready .field__lines {
    opacity: 0.5;
  }
}