/* ME&U. — landing page
   Palette: #F1F1F1 / #B23E1D / #721417 / #F19340 / #231F20 */

:root {
  --white: #F1F1F1;
  --rust: #B23E1D;
  --blood: #721417;
  --amber: #F19340;
  --ink: #231F20;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  height: 100dvh;
  background: #0d0b0b;
  color: var(--white);
  font-family: var(--font-body);
  overflow: hidden;
}

/* ================= Scene (intro + ambient) ================= */

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0d0b0b;
}

.shot-wrap {
  position: absolute;
  inset: -5%;
  opacity: 0;
  transition: opacity 1.97s cubic-bezier(.4, 0, .25, 1);
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  transform-origin: center center;
}

.shot-wrap.on { opacity: 1; }

.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}

.ghost {
  opacity: 0;
  mix-blend-mode: screen;
}

/* Drunk drift — slow continuous motion, no hard resets. Each shot's start
   scale roughly matches the previous shot's mid scale so cuts feel connected. */
.w1.on { animation: drift1 16s cubic-bezier(.3, 0, .4, 1) forwards; }
.w2.on { animation: drift2 16s cubic-bezier(.35, 0, .4, 1) forwards; }
.w3.on { animation: drift3 16s cubic-bezier(.3, 0, .4, 1) forwards; }
.w4.on { animation: drift4 16s cubic-bezier(.35, 0, .4, 1) forwards; }
.w5.on { animation: drift5 16s cubic-bezier(.3, 0, .4, 1) forwards; }

.w1.on .ghost { animation: ghost1 8s ease-in-out infinite; }
.w2.on .ghost { animation: ghost2 9s ease-in-out infinite; }
.w3.on .ghost { animation: ghost1 8.5s ease-in-out infinite; }
.w4.on .ghost { animation: ghost2 9.5s ease-in-out infinite; }
.w5.on .ghost { animation: ghost1 8s ease-in-out infinite; }

@keyframes drift1 { /* walking in — eyes slowly find focus */
  0%   { transform: scale(1.28) rotate(.7deg) translate(1.6%, .8%);   filter: blur(16px) brightness(.72) saturate(1.12); }
  18%  { filter: blur(2px) brightness(.98) saturate(1.12); }
  55%  { transform: scale(1.2) rotate(-.5deg) translate(-.6%, -.4%);  filter: blur(3px) brightness(.94); }
  100% { transform: scale(1.14) rotate(.3deg) translate(.2%, .6%);    filter: blur(6px) brightness(.85) saturate(1.15); }
}
@keyframes drift2 { /* drifting through the crowd */
  0%   { transform: scale(1.16) rotate(-.6deg) translate(-1.4%, .5%); filter: blur(7px) brightness(.85); }
  25%  { filter: blur(2px) brightness(1); }
  60%  { transform: scale(1.24) rotate(.5deg) translate(.8%, -.5%);   filter: blur(3.5px); }
  100% { transform: scale(1.3) rotate(-.3deg) translate(-.3%, .4%);   filter: blur(6px) brightness(.86); }
}
@keyframes drift3 { /* the dancer pulls you in */
  0%   { transform: scale(1.3) rotate(.5deg) translate(1%, -.7%);     filter: blur(7px) brightness(.82) saturate(1.18); }
  28%  { filter: blur(1.5px) brightness(1) saturate(1.18); }
  62%  { transform: scale(1.2) rotate(-.5deg) translate(-.5%, .5%);   filter: blur(3px); }
  100% { transform: scale(1.14) rotate(.25deg) translate(.2%, 1%);    filter: blur(6px) brightness(.85); }
}
@keyframes drift4 { /* the red room */
  0%   { transform: scale(1.16) rotate(-.5deg) translate(-1%, .8%);   filter: blur(7px) brightness(.85); }
  30%  { filter: blur(2px); }
  100% { transform: scale(1.28) rotate(.5deg) translate(.9%, -.5%);   filter: blur(5px) brightness(.88); }
}
@keyframes drift5 { /* the lights carry you away */
  0%   { transform: scale(1.26) rotate(.4deg) translate(1.5%, 0);     filter: blur(6px) brightness(.9); }
  35%  { filter: blur(2.5px) brightness(1.04); }
  100% { transform: scale(1.4) rotate(-.7deg) translate(-1.2%, .5%);  filter: blur(8px) brightness(.8); }
}

/* Double vision — subtle, slow, continuous */
@keyframes ghost1 {
  0%, 100% { opacity: 0;   transform: translate(0, 0); }
  30%      { opacity: .18; transform: translate(9px, -4px); }
  55%      { opacity: .05; transform: translate(3px, 1px); }
  80%      { opacity: .16; transform: translate(-8px, 4px); }
}
@keyframes ghost2 {
  0%, 100% { opacity: 0;   transform: translate(0, 0); }
  35%      { opacity: .16; transform: translate(-10px, 4px); }
  60%      { opacity: .04; transform: translate(-2px, -1px); }
  85%      { opacity: .15; transform: translate(8px, -4px); }
}

/* Ambient mode: after the intro each shot dream-pans slowly across the
   frame — always visibly in motion, never stopping between fades.
   The .dream class is only given to shots that fade in AFTER the intro
   hands over, so the shot already on screen never has its animation
   swapped mid-flight (which would visibly jump). */
#scene.ambient .shot-wrap { transition: opacity 4.5s ease-in-out; }
#scene.ambient .grain { opacity: 0; transition: opacity 2.4s ease; }

.w1.dream.on { animation: dream-a 19s ease-in-out infinite alternate; }
.w2.dream.on { animation: dream-b 22s ease-in-out infinite alternate; }
.w3.dream.on { animation: dream-c 20s ease-in-out infinite alternate; }
.w4.dream.on { animation: dream-b 18s ease-in-out infinite alternate; }
.w5.dream.on { animation: dream-a 23s ease-in-out infinite alternate; }

@keyframes dream-a { /* drift right and slowly lean in */
  from { transform: scale(1.24) translate(-2.4%, 1%) rotate(-.4deg);  filter: blur(3.5px) brightness(.92); }
  to   { transform: scale(1.34) translate(2.2%, -.8%) rotate(.4deg);  filter: blur(2.5px) brightness(.96); }
}
@keyframes dream-b { /* drift left and ease away */
  from { transform: scale(1.34) translate(2.2%, -.9%) rotate(.4deg);  filter: blur(2.5px) brightness(.95); }
  to   { transform: scale(1.22) translate(-2.4%, 1.1%) rotate(-.45deg); filter: blur(3.5px) brightness(.9); }
}
@keyframes dream-c { /* slow diagonal rise */
  from { transform: scale(1.26) translate(-1.6%, 2%) rotate(.3deg);   filter: blur(3px) brightness(.93); }
  to   { transform: scale(1.36) translate(1.8%, -1.8%) rotate(-.35deg); filter: blur(2.5px) brightness(.96); }
}

.shot-wrap.dream .ghost { animation: none !important; opacity: 0 !important; }

/* Passing club lights */
.flare {
  position: absolute;
  z-index: 10;
  inset: -20%;
  background:
    radial-gradient(38% 30% at 20% 60%, rgba(241, 147, 64, .5), transparent 70%),
    radial-gradient(30% 26% at 80% 30%, rgba(178, 62, 29, .55), transparent 70%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: flare 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes flare {
  0%   { transform: translate(-6%, 3%) scale(1);    opacity: .35; }
  45%  { transform: translate(5%, -3%) scale(1.15); opacity: .68; }
  100% { transform: translate(-3%, -5%) scale(.95); opacity: .4; }
}

/* Dim layer for the logo phase */
.dim {
  position: absolute;
  z-index: 11;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(13, 11, 11, .58) 0%, rgba(13, 11, 11, .9) 78%);
  opacity: 0;
  transition: opacity 1.81s ease;
  pointer-events: none;
}
#scene.dimmed .dim { opacity: 1; }

/* Film grain */
.grain {
  position: absolute;
  z-index: 12;
  inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .11;
  mix-blend-mode: overlay;
  animation: grain .42s steps(4) infinite;
  pointer-events: none;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-38px, 22px); }
  50% { transform: translate(22px, -30px); }
  75% { transform: translate(-14px, -18px); }
  100% { transform: translate(30px, 14px); }
}

.vignette {
  position: absolute;
  z-index: 13;
  inset: 0;
  background: radial-gradient(115% 100% at 50% 45%, transparent 48%, rgba(0, 0, 0, .62) 100%);
  pointer-events: none;
}

/* ================= Hero ================= */

#hero {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  z-index: 2;
  pointer-events: none;
}

#mark-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo {
  width: min(430px, 72vw);
  height: auto;
  opacity: 0;
  transform: scale(1);
  transition: opacity 5.29s ease, filter 5.29s ease, transform 5.29s cubic-bezier(.16, 1, .3, 1);
  filter: blur(14px);
}

/* Let the mark emerge gradually across almost the full intro. */
#hero.emerge #logo {
  opacity: 1;
  transform: scale(1.14);
  filter: none;
}

#hero.logo-in #logo {
  opacity: 1;
  transform: scale(1.14);
  filter: none;
}
#hero.intro-skipped #logo,
#hero.intro-skipped #tagline,
#hero.intro-skipped #hint { transition-duration: .4s; transition-delay: 0s; }

#tagline {
  font-family: var(--font-heading); font-style: var(--font-heading-style); font-synthesis: style;
  font-size: clamp(20px, 2.8vw, 27px);
  letter-spacing: .06em;
  color: rgba(241, 241, 241, .82);
  margin-top: 26px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.36s ease, transform 1.36s ease;
}
#hero.tagline-in #tagline { opacity: 1; transform: none; }

#tagline .faux-italic {
  display: inline-block;
  font-style: normal;
  font-weight: var(--font-heading-weight);
  transform: skewX(var(--font-heading-skew));
  transform-origin: center;
}

#tagline .rnb-lock {
  letter-spacing: -.035em;
}

#register-btn {
  pointer-events: auto;
  margin-top: 42px;
  padding: 17px 52px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(135deg, var(--rust), var(--blood));
  border: 1px solid rgba(241, 147, 64, .45);
  border-radius: 999px;
  cursor: pointer;
  min-height: 50px;
  touch-action: manipulation;
  opacity: 0;
  transform: scale(.55);
  transition: box-shadow .35s ease, background .35s ease;
}
#hero.btn-in #register-btn {
  box-shadow: 0 0 28px rgba(178, 62, 29, .4), 0 0 64px rgba(241, 147, 64, .14);
  animation: btn-pop .756s cubic-bezier(.22, 1.6, .36, 1) forwards;
}
@keyframes btn-pop {
  0% { opacity: 0; transform: scale(.55); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
#register-btn:hover {
  background: linear-gradient(135deg, var(--amber), var(--rust));
  box-shadow: 0 0 60px rgba(241, 147, 64, .55) !important;
}
#register-btn:active { transform: scale(.97); }

#hint {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 241, 241, .4);
  margin-top: 26px;
  opacity: 0;
  transition: opacity 1.51s ease .454s;
}
#hero.btn-in #hint { opacity: 1; }

#skip {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 3;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(241, 241, 241, .3);
  color: rgba(241, 241, 241, .45);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 4px 2px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  transition: color .3s, opacity .6s;
}
#skip:hover { color: var(--amber); }
#skip.gone { opacity: 0; pointer-events: none; }

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

body.form-open .shot-wrap,
body.form-open .ghost,
body.form-open .flare,
body.form-open .grain {
  animation-play-state: paused !important;
}

/* ================= Form overlay ================= */

#form-overlay[hidden] { display: none; }

#form-overlay {
  position: fixed;
  inset: 0;
  height: 100%;
  height: 100dvh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(13, 11, 11, .72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transition: opacity .45s ease;
}
#form-overlay.open { opacity: 1; }

#form-card {
  --card-pad: clamp(28px, 5vw, 52px);
  --card-pad-top: var(--card-pad);
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(160deg, rgba(178, 62, 29, .14), transparent 42%),
    #1b1717;
  border: 1px solid rgba(241, 147, 64, .28);
  border-radius: 18px;
  padding: var(--card-pad);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 90px rgba(114, 20, 23, .3);
  transform: translateY(26px) scale(.97);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
#form-overlay.open #form-card { transform: none; }

#form-close {
  position: sticky;
  z-index: 2;
  top: 0;
  display: block;
  width: 44px;
  height: 44px;
  margin:
    calc(14px - var(--card-pad-top))
    calc(14px - var(--card-pad))
    -44px
    auto;
  background: rgba(27, 23, 23, .88);
  border: none;
  border-radius: 50%;
  color: rgba(241, 241, 241, .5);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .25s, transform .25s;
}
#form-close:hover { color: var(--amber); transform: rotate(90deg); }

#form-title, #form-success h2 {
  font-family: var(--font-heading); font-style: var(--font-heading-style); font-synthesis: style;
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 42px);
  letter-spacing: .01em;
  color: var(--white);
}

#form-title { text-transform: uppercase; }

.form-sub {
  font-size: 13.5px;
  color: rgba(241, 241, 241, .55);
  margin: 10px 0 34px;
  letter-spacing: .03em;
}

.hp { position: absolute; left: -9999px; opacity: 0; }

.row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
@media (max-width: 460px) { .row.two { grid-template-columns: 1fr; } }

.field {
  position: relative;
  margin-bottom: 26px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241, 241, 241, .22);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  /* iOS zooms the entire page when focused controls are below 16px. */
  font-size: 16px;
  padding: 20px 0 9px;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  caret-color: var(--amber);
}
.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23F19340' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.field select option { background: #1b1717; color: var(--white); }

.field input:focus, .field select:focus {
  border-bottom-color: var(--amber);
  box-shadow: 0 1px 0 0 var(--amber);
}

.field label {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 15px;
  letter-spacing: .04em;
  color: rgba(241, 241, 241, .45);
  pointer-events: none;
  transition: all .25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field label.lbl-select,
.field .has-at:focus ~ label.lbl-at,
.field .has-at:not(:placeholder-shown) ~ label.lbl-at {
  top: 0;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}

.field .at {
  position: absolute;
  left: 0;
  bottom: 10px;
  color: rgba(241, 147, 64, .7);
  font-size: 15.5px;
  opacity: 0;
  transition: opacity .25s;
}
/* input[type] beats a plain class on specificity, so match it here. */
.field input.has-at[type="text"] { padding-left: 20px; }
.field:focus-within .at,
.field:has(.has-at:not(:placeholder-shown)) .at { opacity: 1; }
.field label.lbl-at { left: 0; }

.err {
  display: block;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #ff9d7e;
  margin-top: 6px;
  min-height: 0;
}
.err:empty { display: none; }

.field.invalid input, .field.invalid select { border-bottom-color: var(--blood); }

.consent {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  cursor: pointer;
  margin: 6px 0 4px;
}
.consent input { position: absolute; opacity: 0; }
.consent .box {
  flex: 0 0 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid rgba(241, 147, 64, .5);
  border-radius: 5px;
  position: relative;
  transition: background .25s, border-color .25s;
}
.consent input:checked + .box {
  background: var(--rust);
  border-color: var(--amber);
}
.consent input:focus-visible + .box {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.consent input:checked + .box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.consent .txt {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(241, 241, 241, .6);
}


.male-photo-section {
  margin: -3px 0 24px;
  padding: 17px;
  border: 1px solid rgba(241, 147, 64, .2);
  border-radius: 12px;
  background: rgba(241, 147, 64, .045);
}
.male-photo-section[hidden] { display: none; }
.public-account { margin: 0 0 16px; }
.public-account .txt { color: rgba(241, 241, 241, .78); }

.photo-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(150px, .9fr);
  gap: 15px;
  align-items: start;
}
.upload-field { min-width: 0; margin: 0; }
.field .upload-label {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  inset: auto;
  min-height: 47px;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  background: transparent;
  border: 1px solid rgba(241, 241, 241, .22);
  border-radius: 9px;
  color: rgba(241, 241, 241, .72);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .05em;
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .25s, background .25s;
}
#photo-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.upload-action {
  flex: 0 0 auto;
  color: var(--amber);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.upload-field input[type="file"][hidden] {
  display: none !important;
}
.upload-field:focus-within .upload-label {
  border-color: var(--amber);
  background: rgba(241, 147, 64, .06);
}
.upload-field.invalid .upload-label { border-color: var(--blood); }
.file-name {
  display: block;
  margin-top: 7px;
  color: rgba(241, 241, 241, .42);
  font-size: 10.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.photo-note {
  color: #ffb98d;
  font-size: 11.5px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .photo-row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  #form-overlay {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
  #form-card {
    --card-pad: 20px;
    --card-pad-top: 28px;
    padding: 28px var(--card-pad) 24px;
    border-radius: 14px;
  }
  .form-sub {
    margin-top: 18px;
    padding-right: 52px;
  }
  .male-photo-section { padding: 14px; }
  .field label.upload-label { gap: 8px; }
}
#submit-btn {
  width: 100%;
  margin-top: 28px;
  padding: 17px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(135deg, var(--rust), var(--blood));
  border: 1px solid rgba(241, 147, 64, .4);
  border-radius: 999px;
  cursor: pointer;
  min-height: 50px;
  touch-action: manipulation;
  transition: box-shadow .3s, background .3s, opacity .3s;
}
#submit-btn:hover {
  background: linear-gradient(135deg, var(--amber), var(--rust));
  box-shadow: 0 0 46px rgba(241, 147, 64, .4);
}
#submit-btn:disabled { opacity: .55; cursor: wait; }

/* Success state */
#form-success { text-align: center; padding: 26px 0 12px; }
.success-logo { width: 150px; margin-bottom: 26px; opacity: .95; }
#form-success p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(241, 241, 241, .65);
  letter-spacing: .03em;
}
#form-success.pop { animation: success-in .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes success-in {
  0% { opacity: 0; transform: translateY(18px) scale(.96); }
  100% { opacity: 1; transform: none; }
}

/* Shake on error */
#form-card.shake { animation: shake .5s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  .shot-wrap, .ghost, .flare, .grain { animation: none !important; }
  .ghost { opacity: 0 !important; }
  #logo, #tagline, #register-btn, .dim { transition-duration: .4s; }
}

/* Link-in-bio browsers often have a very shallow viewport in landscape. */
@media (max-height: 500px) and (orientation: landscape) {
  #hero { padding-block: 10px; }
  #logo { width: min(260px, 36vw); }
  #tagline { margin-top: 6px; font-size: 18px; }
  #register-btn { margin-top: 12px; padding-block: 12px; }
  #hint { margin-top: 8px; }
}