:root {
  /* Field colour ladder — centre lift to side falloff */
  --field-lit: #871e44;
  --field-core: #7c193b;
  --field-mid: #6a122e;
  --field-side: #5a0b20;
  --field-edge: #56081d;
  --field-glow: rgba(124, 25, 59, 0.55);
  --field-curtain: rgba(42, 4, 12, 0.055);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.78);
  --ink-line: rgba(255, 255, 255, 0.4);
  --frame-line: rgba(218, 200, 176, 0.42);
  --frame-reveal: rgba(32, 8, 16, 0.28);
  /* Keep in sync with the canvas font in field.js */
  --font: "Cinzel", "Times New Roman", Times, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --track-title: 0.18em;
}

/* Screen-reader / crawler copy — kept off the field composition */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*,
*::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;
  -ms-overflow-style: none;
}

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

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

body {
  height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: var(--field-side);
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-touch-callout: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.field {
  /* Frame inset / step / soft inner corners */
  --frame-inset: 0px;
  --frame-step: clamp(0.55rem, 1.35vw, 0.95rem);
  --frame-inner: calc(var(--frame-inset) + var(--frame-step));
  --frame-radius: clamp(0.35rem, 0.65vw, 0.55rem);
  --lip-radius: min(var(--frame-radius), calc(var(--frame-step) * 0.75));
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: url("./cursor.svg") 3 3, auto;
}

/* Centre lift with soft side falloff */
.field__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      85% 80% at 50% 46%,
      var(--field-lit) 0%,
      var(--field-glow) 38%,
      transparent 72%
    ),
    linear-gradient(
      90deg,
      var(--field-side) 0%,
      var(--field-mid) 14%,
      transparent 42%,
      transparent 58%,
      var(--field-mid) 86%,
      var(--field-side) 100%
    ),
    linear-gradient(
      180deg,
      var(--field-side) 0%,
      var(--field-mid) 12%,
      transparent 40%,
      transparent 60%,
      var(--field-mid) 88%,
      var(--field-side) 100%
    ),
    var(--field-core);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

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

/*
  Pattern stays inside the raised panel —
  field marks do not cross the frame.
*/
.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: -6%;
  width: 112%;
  height: 112%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s var(--ease) 0.35s;
  animation: none;
}

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

.field__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /*
    Marks denser at the margins, softer behind the title.
    Panel clip still ends at the frame.
  */
  -webkit-mask-image: radial-gradient(102% 96% at 50% 46%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0.85) 66%, #000 92%);
  mask-image: radial-gradient(102% 96% at 50% 46%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0.85) 66%, #000 92%);
}

.field__vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--field-curtain) 0%,
      transparent 20%,
      transparent 80%,
      var(--field-curtain) 100%
    ),
    linear-gradient(
      180deg,
      var(--field-curtain) 0%,
      transparent 18%,
      transparent 82%,
      var(--field-curtain) 100%
    );
}

/*
  Fine diagonal grain — low contrast so it reads as surface, not motif.
*/
.field__weave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      63.4deg,
      rgba(255, 255, 255, 0.009) 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
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.006) 0 2px,
      transparent 2px 5px
    );
  background-size: 4px 4px, 4px 4px, 5px 5px;
  /* Stronger at edges; soft under the title */
  -webkit-mask-image: radial-gradient(
    112% 106% at 50% 46%,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 30%,
    rgba(0, 0, 0, 0.72) 56%,
    #000 82%
  );
  mask-image: radial-gradient(
    112% 106% at 50% 46%,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 30%,
    rgba(0, 0, 0, 0.72) 56%,
    #000 82%
  );
  opacity: 0;
}

/*
  Edge layers bloom on load, then settle to rest opacity.
*/
@keyframes pattern-edge-bloom {
  0% {
    opacity: 0;
  }
  28% {
    opacity: var(--bloom-peak, 1);
  }
  100% {
    opacity: var(--bloom-rest, 0.75);
  }
}

.field.is-ready .field__weave {
  --bloom-peak: 1;
  --bloom-rest: 0.75;
  animation: pattern-edge-bloom 3.2s var(--ease) 0.45s both;
}

/*
  Crossed hairline grain on the field body; corner rings in ::after.
*/
.field__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      38deg,
      var(--frame-line) 0 0.6px,
      transparent 0.6px 9px
    ),
    repeating-linear-gradient(
      -38deg,
      var(--frame-line) 0 0.6px,
      transparent 0.6px 9px
    );
  /* Offset passes so the lines interlace */
  background-position:
    0 0,
    4.5px 0;
  /* Soft under the title */
  -webkit-mask-image: radial-gradient(
    64% 60% at 50% 46%,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 30%,
    rgba(0, 0, 0, 0.6) 58%,
    #000 84%
  );
  mask-image: radial-gradient(
    64% 60% at 50% 46%,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 30%,
    rgba(0, 0, 0, 0.6) 58%,
    #000 84%
  );
  opacity: 0;
}

.field.is-ready .field__lines {
  --bloom-peak: 0.48;
  --bloom-rest: 0.15;
  animation: pattern-edge-bloom 3.6s var(--ease) 0.6s both;
}

/*
  Corner rings — keep the margins from reading empty.
*/
.field__lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 0% 0%,
      var(--frame-line) 0 1px,
      transparent 1px 16px
    ),
    repeating-radial-gradient(
      circle at 100% 0%,
      var(--frame-line) 0 1px,
      transparent 1px 16px
    ),
    repeating-radial-gradient(
      circle at 0% 100%,
      var(--frame-line) 0 1px,
      transparent 1px 16px
    ),
    repeating-radial-gradient(
      circle at 100% 100%,
      var(--frame-line) 0 1px,
      transparent 1px 16px
    );
  -webkit-mask-image:
    radial-gradient(38% 42% at 0% 0%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 100% 0%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 0% 100%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 100% 100%, #000 0%, transparent 78%);
  mask-image:
    radial-gradient(38% 42% at 0% 0%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 100% 0%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 0% 100%, #000 0%, transparent 78%),
    radial-gradient(38% 42% at 100% 100%, #000 0%, transparent 78%);
}

.field__grain {
  position: absolute;
  inset: 0;
  /* Keep grain light once weave + lines are present */
  opacity: 0.07;
  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.1' 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;
}

/*
  Stepped frame — outer edge flush; soft radius on the inner panel.
*/
.field__frame {
  --step: var(--frame-step);
  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.7s var(--ease) 0.25s;
}

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

/*
  Outer shelf — soft inner cut matching the panel radius.
*/
.field__frame-well {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
}

.field__frame-well::after {
  content: "";
  position: absolute;
  inset: var(--step);
  border-radius: var(--lip-radius);
  box-shadow:
    0 0 0 100vmax var(--frame-reveal),
    inset 0 1px 3px rgba(10, 2, 6, 0.18),
    inset 0 -1px 0 rgba(218, 200, 176, 0.04);
}

/* Inner border — same radius as the pattern clip */
.field__frame-rise {
  position: absolute;
  inset: var(--step);
  border: 1px solid var(--frame-line);
  border-radius: var(--lip-radius);
  box-shadow:
    inset 0 0 0 1px rgba(28, 6, 14, 0.14),
    inset 0 1px 0 rgba(255, 248, 238, 0.12),
    inset 0 -1px 0 rgba(20, 4, 10, 0.1);
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.4vw, 0.9rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
}

/* Retired — field stays continuous behind type */
.hero__scrim {
  display: none;
}

.hero__brand,
.hero__suite {
  position: relative;
  z-index: 1;
}

.hero__brand {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2.85rem, 10.5vw, 7rem);
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 0;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

/*
  G mark opens, then the rest of the title draws out.

  Use baseline alignment (not centre) so the bitmap sits with the type.
*/
.hero__lockup {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
  padding-inline-end: var(--track-title);
  text-shadow: 0 1px 0 rgba(42, 6, 18, 0.22);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s;
}

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

.hero__g {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  line-height: 0;
  letter-spacing: 0;
  margin-inline-end: 0;
  transition: margin-inline-end 1.65s cubic-bezier(0.19, 1, 0.22, 1) 1.15s;
}

.hero__g-mark {
  display: block;
  /* Cap height matched to title type; slight Y nudge for bitmap padding */
  height: 0.73em;
  width: auto;
  transform: translateY(0.0137em);
  filter: drop-shadow(0 1px 0 rgba(42, 6, 18, 0.22));
}

.field.is-ready .hero__g {
  margin-inline-end: var(--track-title);
}

.hero__rest {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  transition: max-width 1.65s cubic-bezier(0.19, 1, 0.22, 1) 1.15s;
}

.field.is-ready .hero__rest {
  max-width: 12em;
}

.hero__rest-inner {
  display: inline-block;
  letter-spacing: var(--track-title);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.4em);
  transition:
    opacity 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) 1.35s,
    transform 1.65s cubic-bezier(0.19, 1, 0.22, 1) 1.15s;
}

.field.is-ready .hero__rest-inner {
  opacity: 1;
  transform: translateX(0);
}

.hero__suite {
  --suite-gap: clamp(1.25rem, 3.5vw, 2.5rem);
  --dx-com: -8rem;
  --dx-org: 8rem;
  --suite-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: 100%;
  min-height: 1.35em;
  pointer-events: auto;
}

.hero__domain {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.78rem, 1.55vw, 0.95rem);
  font-synthesis: none;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  cursor: url("./cursor-link.svg") 9 1, pointer;
}

.hero__domain:hover,
.hero__domain:focus-visible {
  text-decoration: none;
}

.hero__suite.is-spread .hero__domain:hover,
.hero__suite.is-spread .hero__domain:focus-visible,
.hero__suite.is-reel .hero__domain.is-active:hover,
.hero__suite.is-reel .hero__domain.is-active:focus-visible {
  opacity: 0.72;
}

.hero__domain:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 6px;
}

.hero__domain:active {
  transform: scale(0.985);
}

/* Reel and spread both stack domains at the suite centre */
.hero__suite.is-reel .hero__domain,
.hero__suite.is-spread .hero__domain {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
}

/* Reel: first domain enters, then .com → .org → .co.uk */
.hero__suite.is-reel .hero__domain {
  opacity: 0;
  transform: translate(-50%, 55%);
  transition:
    opacity 0.7s var(--suite-ease),
    transform 0.75s var(--suite-ease);
}

/* First domain starts above centre before entering */
.hero__suite.is-reel .hero__domain.is-enter {
  opacity: 0;
  transform: translate(-50%, -175%);
  transition: none;
}

.hero__suite.is-reel .hero__domain.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.hero__suite.is-reel .hero__domain.is-prev {
  opacity: 0;
  transform: translate(-50%, -155%);
}

/* Spread: move from centre to measured seats */

.hero__suite.is-spread .hero__domain {
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.85s var(--suite-ease),
    transform 1.35s var(--suite-ease);
}

.hero__suite.is-spread .hero__domain[data-tld="com"] {
  transform: translate(calc(-50% + var(--dx-com)), -50%);
}

.hero__suite.is-spread .hero__domain[data-tld="couk"] {
  transform: translate(-50%, -50%);
}

.hero__suite.is-spread .hero__domain[data-tld="org"] {
  transform: translate(calc(-50% + var(--dx-org)), -50%);
}

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

/* Narrow screens — same row layout, tighter spacing */
@media (max-width: 640px) {
  :root {
    --track-title: 0.12em;
  }

  .field {
    --frame-step: clamp(0.45rem, 2.4vw, 0.7rem);
    --frame-radius: clamp(0.3rem, 1.4vw, 0.45rem);
  }

  .field__frame {
    --step: var(--frame-step);
    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);
  }

  .hero {
    gap: 1rem;
    padding: max(1.25rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      max(1.25rem, env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
  }

  .hero__brand {
    font-size: clamp(2.15rem, 11.5vw, 3.25rem);
    max-width: 100%;
  }

  .hero__lockup {
    max-width: 100%;
  }

  .hero__suite {
    --suite-gap: clamp(0.45rem, 2.2vw, 0.85rem);
    width: 100%;
    max-width: min(100%, 22rem);
    min-height: 2.5rem;
  }

  .hero__domain {
    font-size: clamp(0.62rem, 2.7vw, 0.78rem);
    letter-spacing: 0.08em;
    padding: 0.65rem 0.15rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
  }

  .hero__domain:focus-visible {
    outline-offset: 3px;
  }
}

/* Very narrow — tighter title and suite */
@media (max-width: 360px) {
  .hero__brand {
    font-size: clamp(1.85rem, 12vw, 2.35rem);
  }

  :root {
    --track-title: 0.09em;
  }

  .hero__suite {
    --suite-gap: 0.35rem;
  }

  .hero__domain {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    padding-inline: 0.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field__base,
  .field__stage,
  .hero__lockup,
  .hero__rest-inner,
  .hero__domain {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .hero__lockup {
    opacity: 1 !important;
  }

  .hero__g {
    margin-inline-end: var(--track-title) !important;
  }

  .hero__rest {
    max-width: 12em !important;
  }

  .hero__rest-inner {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__suite {
    gap: 0.65rem !important;
  }

  .hero__suite .hero__domain {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  @media (max-width: 640px) {
    .hero__suite {
      gap: var(--suite-gap, 0.45rem) !important;
      justify-content: center;
    }
  }

  .field__stage {
    animation: none !important;
  }

  /* Skip bloom; show resting texture opacity */
  .field.is-ready .field__weave {
    opacity: 0.75;
    animation: none !important;
  }

  .field.is-ready .field__lines {
    opacity: 0.15;
    animation: none !important;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

::selection {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}