.eyebrow {
  margin: 0 0 clamp(18px, 2.5vw, 34px);
  color: var(--muted);
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 650;
  letter-spacing: .27em;
}
.hero__title {
  margin: 0;
  font-size: clamp(58px, 13.2vw, 238px);
  font-weight: 520;
  line-height: .76;
  letter-spacing: -.085em;
  transform: translateX(-.035em);
  text-shadow: 0 12px 60px rgba(0,0,0,.5);
}
.hero__lead {
  max-width: 540px;
  margin: clamp(28px, 4vw, 50px) auto 0;
  color: var(--muted);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.55;
}

.hud {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
  pointer-events: none;
}
.hud--left { left: clamp(24px, 4.6vw, 76px); }
.hud--right { right: clamp(24px, 4.6vw, 76px); text-align: right; }
.hud__label {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
}
.hud__value {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 430;
  letter-spacing: -.04em;
}

.target {
  --target-x: 72vw;
  --target-y: 32vh;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: crosshair;
  transform: translate3d(calc(var(--target-x) - 34px), calc(var(--target-y) - 34px), 0);
  transition: transform .44s cubic-bezier(.2,.75,.25,1), opacity .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.target__ring {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(241,238,231,.45);
  border-radius: inherit;
  box-shadow: inset 0 0 30px rgba(241,238,231,.045), 0 0 34px rgba(241,238,231,.06);
}
.target__ring::before,
.target__ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(241,238,231,.16);
  border-radius: inherit;
}
.target__ring::after { inset: 17px; }
.target__letter {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
}
.target:hover .target__ring { border-color: var(--text); }
.target.is-hit { animation: target-hit .34s ease; }

.hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 34px;
  margin: 0;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .16em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.hint b { color: var(--text); font-weight: 700; }
.hint.is-hidden { opacity: 0; transform: translate(-50%, 10px); }

.unlock {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: rgba(11,11,11,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -40%);
  transition: opacity .35s ease, transform .35s ease;
}
.unlock.is-visible { opacity: 1; transform: translate(-50%, -50%); }

.experience.is-unlocked .hero__title {
  animation: title-glitch 4.5s ease-in-out infinite;
}
.experience.is-unlocked .status-dot { animation: pulse 1.15s ease-in-out infinite; }

@keyframes target-hit {
  0% { scale: 1; }
  45% { scale: .72; }
  100% { scale: 1; }
}
@keyframes pulse {
  50% { opacity: .25; box-shadow: 0 0 32px rgba(241,238,231,.9); }
}
@keyframes title-glitch {
  0%, 94%, 100% { transform: translateX(-.035em); filter: none; }
  95% { transform: translateX(-.052em) skewX(-2deg); filter: blur(.3px); }
  96% { transform: translateX(-.018em) skewX(1deg); }
  97% { transform: translateX(-.035em); }
}

@media (max-width: 720px) {
  .hero__title { font-size: clamp(58px, 19vw, 122px); line-height: .84; }
  .hero__lead { width: min(88vw, 420px); font-size: 13px; }
  .hud { top: auto; bottom: 88px; transform: none; }
  .hud--left { left: 20px; }
  .hud--right { right: 20px; }
  .hint { bottom: 90px; max-width: 58vw; white-space: normal; text-align: center; line-height: 1.6; }
  .target { width: 62px; height: 62px; transform: translate3d(calc(var(--target-x) - 31px), calc(var(--target-y) - 31px), 0); }
}

/* --- Gravity unlock: intentionally obvious secret-state feedback --- */
.unlock {
  min-width: min(430px, calc(100vw - 40px));
  padding: 26px 30px 25px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  border-color: rgba(241,238,231,.46);
  box-shadow: 0 24px 100px rgba(0,0,0,.48), inset 0 0 50px rgba(241,238,231,.035);
}
.unlock__kicker,
.unlock__status {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
}
.unlock strong {
  font-size: clamp(34px, 6vw, 78px);
  font-weight: 450;
  line-height: .9;
  letter-spacing: -.05em;
}
.unlock.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: unlock-flash .9s cubic-bezier(.2,.8,.2,1) both;
}
.unlock.is-settled { background: rgba(11,11,11,.84); }

.gravity-mark {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: min(74vh, 62vw);
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241,238,231,.0);
  opacity: 0;
  transform: translate(-50%, -47%) scale(.72) rotate(-2deg);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,.84,.3,1), filter 1.1s ease, -webkit-text-stroke-color .9s ease;
}
.gravity-mark.is-visible {
  opacity: .17;
  transform: translate(-50%, -47%) scale(1) rotate(0deg);
  filter: blur(0);
  -webkit-text-stroke-color: rgba(241,238,231,.52);
}

.experience.is-unlocked::after {
  content: "GRAVITY MODE";
  position: fixed;
  z-index: 6;
  top: 50%;
  left: 18px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  color: rgba(241,238,231,.46);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .32em;
  pointer-events: none;
}
.experience.is-unlocked .target__ring {
  animation: gravity-ring 1.4s ease-in-out infinite;
}

@keyframes unlock-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); filter: blur(8px); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.045); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
@keyframes gravity-ring {
  50% { box-shadow: inset 0 0 34px rgba(241,238,231,.13), 0 0 42px rgba(241,238,231,.14); }
}

@media (max-width: 720px) {
  .unlock { padding: 22px 20px 21px; }
  .gravity-mark { font-size: min(62vh, 88vw); }
  .experience.is-unlocked::after { display: none; }
}

/* ==========================================================
   10/10 cinematic unlock
   A short physical sequence: shock -> vortex -> glyph collapse.
   ========================================================== */
.unlock-sequence {
  position: fixed;
  z-index: 48;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.unlock-sequence.is-active {
  opacity: 1;
  visibility: visible;
}

.unlock-sequence__flash {
  position: absolute;
  inset: 0;
  background: #f1eee7;
  opacity: 0;
}

.unlock-sequence.is-active .unlock-sequence__flash {
  animation: breach-flash .72s cubic-bezier(.16,.84,.3,1) both;
}

.unlock-sequence__scan {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 18vmax;
  aspect-ratio: 1;
  border: 1px solid rgba(241,238,231,.88);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.03);
  box-shadow:
    0 0 0 1px rgba(241,238,231,.12),
    0 0 90px rgba(241,238,231,.12),
    inset 0 0 70px rgba(241,238,231,.08);
}

.unlock-sequence.is-active .unlock-sequence__scan {
  animation: breach-ring 1.05s .08s cubic-bezier(.12,.82,.2,1) both;
}

.unlock-sequence__copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(860px, calc(100vw - 44px));
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.86);
}

.unlock-sequence__copy span {
  color: rgba(241,238,231,.58);
  font-size: clamp(8px, .75vw, 11px);
  font-weight: 750;
  letter-spacing: .34em;
}

.unlock-sequence__copy strong {
  position: relative;
  color: #f1eee7;
  font-size: clamp(62px, 10vw, 170px);
  font-weight: 470;
  line-height: .72;
  letter-spacing: -.075em;
  text-shadow: 0 0 55px rgba(241,238,231,.11);
}

.unlock-sequence__copy strong::before,
.unlock-sequence__copy strong::after {
  content: "GRAVITY\\A BREACH";
  position: absolute;
  inset: 0;
  white-space: pre;
  opacity: 0;
  pointer-events: none;
}

.unlock-sequence__copy strong::before { transform: translateX(-8px); }
.unlock-sequence__copy strong::after { transform: translateX(8px); }

.unlock-sequence.is-vortex .unlock-sequence__copy {
  animation: breach-copy-in 1.35s cubic-bezier(.16,.84,.3,1) both;
}

.unlock-sequence.is-vortex .unlock-sequence__copy strong::before {
  animation: breach-ghost-left .72s steps(2,end) 2;
}

.unlock-sequence.is-vortex .unlock-sequence__copy strong::after {
  animation: breach-ghost-right .58s steps(2,end) 2;
}

.unlock-sequence.is-forming .unlock-sequence__copy {
  opacity: .62;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16,.84,.3,1);
}

.unlock-sequence.is-out {
  opacity: 0;
  transition: opacity .62s ease;
}

/* The existing interface appears to be hit by the same physical event. */
.experience.is-cinematic .field {
  animation: field-impact .78s cubic-bezier(.2,.8,.2,1) both;
}

.experience.is-cinematic .noise {
  animation: noise-impact .82s steps(3,end) both;
}

.experience.is-cinematic .hero__center,
.experience.is-cinematic .header,
.experience.is-cinematic .footer,
.experience.is-cinematic .hud {
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}

.experience.is-vortex .hero__center {
  opacity: .16;
  filter: blur(5px);
  transform: scale(.94);
}

.experience.is-vortex .header,
.experience.is-vortex .footer,
.experience.is-vortex .hud {
  opacity: .22;
}

.experience.is-forming .hero__center {
  opacity: .06;
  filter: blur(9px);
  transform: scale(1.06);
}

.experience.is-forming .header,
.experience.is-forming .footer,
.experience.is-forming .hud {
  opacity: .08;
}

.target.is-locked {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.experience.is-resolved .hero__title {
  text-shadow: 0 0 80px rgba(241,238,231,.16), 0 14px 70px rgba(0,0,0,.55);
}

@keyframes breach-flash {
  0%   { opacity: 0; }
  8%   { opacity: .92; }
  16%  { opacity: .08; }
  25%  { opacity: .56; }
  42%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes breach-ring {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  12%  { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

@keyframes breach-copy-in {
  0%   { opacity: 0; transform: translate(-50%, -42%) scale(.72); filter: blur(16px); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.045); filter: blur(0); }
  48%  { transform: translate(-50%, -50%) scale(.985); }
  100% { opacity: .88; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes breach-ghost-left {
  0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  20% { opacity: .38; clip-path: inset(8% 0 62% 0); }
  45% { opacity: .14; clip-path: inset(48% 0 30% 0); transform: translateX(-15px); }
  70% { opacity: .32; clip-path: inset(72% 0 8% 0); transform: translateX(-5px); }
}

@keyframes breach-ghost-right {
  0%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); }
  24% { opacity: .28; clip-path: inset(18% 0 58% 0); }
  52% { opacity: .18; clip-path: inset(55% 0 20% 0); transform: translateX(14px); }
  78% { opacity: .35; clip-path: inset(76% 0 4% 0); transform: translateX(4px); }
}

@keyframes field-impact {
  0%   { filter: brightness(1) blur(0); transform: scale(1); }
  8%   { filter: brightness(2.5) blur(.5px); transform: scale(1.018); }
  17%  { filter: brightness(.55) blur(1px); transform: translate3d(-5px, 3px, 0) scale(1.012); }
  28%  { filter: brightness(1.55) blur(0); transform: translate3d(4px, -2px, 0) scale(1.008); }
  46%  { transform: translate3d(-2px, 1px, 0) scale(1.004); }
  100% { filter: brightness(1) blur(0); transform: scale(1); }
}

@keyframes noise-impact {
  0%   { opacity: .08; transform: scale(1); }
  10%  { opacity: .34; transform: scale(1.08); }
  22%  { opacity: .03; transform: translateX(-8px) scale(1.05); }
  36%  { opacity: .22; transform: translateX(7px) scale(1.03); }
  100% { opacity: .08; transform: scale(1); }
}

@media (max-width: 720px) {
  .unlock-sequence__copy { gap: 9px; }
  .unlock-sequence__copy strong {
    font-size: clamp(54px, 18vw, 108px);
    line-height: .76;
  }
  .unlock-sequence__copy span { letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .unlock-sequence.is-active .unlock-sequence__flash,
  .unlock-sequence.is-active .unlock-sequence__scan,
  .unlock-sequence.is-vortex .unlock-sequence__copy,
  .experience.is-cinematic .field,
  .experience.is-cinematic .noise {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}