/* =====================================================================
   gate.css – utseendet på låsskärmen. Fristående: använder inte style.css.
   1. Färger och grund     <- samma fem färger som resten av sidan
   2. Bakgrundslager (jättetext, våglinje, vinjett, rasterlinjer, korn)
   3. Hörn och mitten (nedräkning, rubrik, text, kodfält)
   4. Effekter (glitch, skakning, blixt)
   5. Mobil och "minska rörelse"
   ===================================================================== */

/* ---------- 1. Färger och grund ---------- */
:root {
  --bg:     #0D0F12;  /* Deep Amp Black */
  --card:   #2A2E35;  /* Slate Gray */
  --detail: #8C929D;  /* Anodized Silver */
  --text:   #F4F4F6;  /* Off-White */
  --accent: #E63946;  /* Tube Glow Red */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.gate {
  min-height: 100svh; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--font); -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. Bakgrundslager ---------- */
.ghost-word {                       /* jättestor kontur-text som glider förbi långt bak */
  position: fixed; top: 50%; left: 0; display: flex; width: max-content; transform: translateY(-50%);
  font-size: clamp(120px, 30vw, 420px); font-weight: 900; font-stretch: 125%; letter-spacing: -.03em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(140, 146, 157, .11); white-space: nowrap; pointer-events: none;
  animation: drift 90s linear infinite;
}
.ghost-word span { padding-right: .2em; }
@keyframes drift { to { transform: translate(-50%, -50%); } }

#wave { position: fixed; inset: 0; width: 100%; height: 100%; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(13, 15, 18, .88) 100%); }
.scan {                             /* tunna rasterlinjer, som en gammal skärm */
  position: fixed; inset: 0; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(to bottom, rgba(244, 244, 246, .028) 0 1px, transparent 1px 3px);
}
.grain {                            /* filmkorn. Själva brusbilden skapas av js/gate.js */
  position: fixed; inset: -60px; pointer-events: none; opacity: .09; background-size: 160px 160px;
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-30px, 18px); } 40% { transform: translate(22px, -26px); }
  60% { transform: translate(-14px, -10px); } 80% { transform: translate(28px, 24px); } 100% { transform: translate(0, 0); }
}
.flash { position: fixed; inset: 0; pointer-events: none; background: var(--accent); opacity: 0; mix-blend-mode: screen; }
.flash.go { animation: flash 1.1s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- 3. Hörn och mitten ---------- */
.stage { position: relative; z-index: 2; min-height: 100svh; padding: clamp(18px, 3vw, 36px); }
.corner { position: absolute; font-size: 11px; font-weight: 600; font-stretch: 112%; letter-spacing: .28em; text-transform: uppercase; color: var(--detail); display: flex; align-items: center; gap: 10px; }
.tl { top: clamp(18px, 3vw, 36px); left: clamp(18px, 3vw, 36px); color: var(--text); }
.tr { top: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 36px); }
.bl { bottom: clamp(18px, 3vw, 36px); left: clamp(18px, 3vw, 36px); }
.br { bottom: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 36px); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.center {
  min-height: calc(100svh - 2 * clamp(18px, 3vw, 36px)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(14px, 2.6vh, 26px); padding-block: 56px;
}
.eyebrow { font-size: 12px; font-weight: 600; font-stretch: 112%; letter-spacing: .5em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 14px rgba(230, 57, 70, .6); margin-right: -.5em; }

.clock { display: flex; align-items: flex-start; justify-content: center; gap: clamp(4px, 1.4vw, 18px); }
.unit { display: grid; gap: 10px; justify-items: center; }
.num {
  font-size: clamp(46px, 12.5vw, 168px); line-height: .95; font-weight: 800; font-stretch: 125%; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 0 40px rgba(244, 244, 246, .14);
}
.num.tick { animation: tick .35s ease-out; }
@keyframes tick { 0% { color: var(--accent); text-shadow: 0 0 36px rgba(230, 57, 70, .9); } 100% { color: var(--text); } }
.lab { font-size: 10px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--detail); margin-right: -.38em; }
.sep { font-size: clamp(40px, 10vw, 140px); line-height: .95; font-weight: 300; color: var(--accent); text-shadow: 0 0 24px rgba(230, 57, 70, .8); animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.clock.final .num { color: var(--accent); text-shadow: 0 0 44px rgba(230, 57, 70, .9); animation: throb .5s ease-in-out infinite alternate; }
@keyframes throb { to { transform: scale(1.03); } }

.title {
  position: relative; font-size: clamp(18px, 3vw, 34px); font-weight: 700; font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase;
  margin-right: -.3em; max-width: 22ch; line-height: 1.25; color: var(--text); min-height: 1.25em;
}
.title.big { font-size: clamp(34px, 8.5vw, 112px); letter-spacing: .08em; margin-right: -.08em; max-width: 14ch; line-height: 1.02; font-weight: 800; }
.title.glitch::before, .title.glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.title.glitch::before { color: var(--accent); transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); animation: cut1 .32s steps(2) both; }
.title.glitch::after  { color: var(--detail); transform: translate(3px, 0);  clip-path: inset(58% 0 6% 0);  animation: cut2 .32s steps(2) both; }
@keyframes cut1 { 0% { clip-path: inset(8% 0 70% 0); } 50% { clip-path: inset(40% 0 30% 0); } 100% { clip-path: inset(72% 0 6% 0); } }
@keyframes cut2 { 0% { clip-path: inset(66% 0 8% 0); } 50% { clip-path: inset(20% 0 52% 0); } 100% { clip-path: inset(4% 0 80% 0); } }

.text { max-width: 44ch; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; color: var(--detail); }
.text:empty { display: none; }

.code { margin-top: clamp(6px, 2vh, 20px); display: grid; justify-items: center; gap: 12px; }
.codebox {
  display: flex; align-items: center; width: min(340px, 82vw); border-bottom: 1px solid rgba(140, 146, 157, .45);
  transition: border-color .2s, box-shadow .2s;
}
.codebox:focus-within { border-color: var(--accent); box-shadow: 0 10px 28px -14px rgba(230, 57, 70, .9); }
.codebox input {
  flex: 1; min-width: 0; padding: 12px 4px; background: transparent; border: 0; outline: 0; color: var(--text); text-align: center;
  font: 600 18px/1 var(--font); font-stretch: 112%; letter-spacing: .45em; text-transform: uppercase; padding-left: calc(4px + .45em);
}
.codebox input::placeholder { color: rgba(140, 146, 157, .6); letter-spacing: .5em; }
.codebox button { background: none; border: 0; color: var(--detail); font: 400 24px/1 var(--font); cursor: pointer; padding: 6px 4px 6px 10px; transition: color .2s, transform .2s; }
.codebox button:hover, .codebox button:focus-visible { color: var(--accent); transform: translateX(3px); outline: 0; }
.codebox button:disabled { opacity: .4; }
.err { min-height: 1.2em; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 12px rgba(230, 57, 70, .6); }

/* ---------- 4. Effekter ---------- */
.codebox.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); border-color: var(--accent); }
@keyframes shake { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(6px); } 45%, 55% { transform: translateX(-8px); } }
body.granted .center > * { animation: granted 1s ease-in forwards; }
@keyframes granted { 40% { filter: blur(0); } 100% { opacity: 0; filter: blur(8px); transform: scale(1.06); } }

/* ---------- 5. Mobil och minskad rörelse ---------- */
@media (max-width: 600px) {
  .corner { font-size: 9px; letter-spacing: .2em; }
  .lab { font-size: 8px; letter-spacing: .24em; margin-right: -.24em; }
  .eyebrow { letter-spacing: .4em; margin-right: -.4em; }
  .title { letter-spacing: .2em; margin-right: -.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost-word, .grain, .dot, .sep, .num.tick, .clock.final .num, .title.glitch::before, .title.glitch::after { animation: none !important; }
}
[hidden] { display: none !important; }