/* AIMED RESEARCH — TIME LAB (experimental) */
:root {
  --bg: #0f0f12;
  --amber: #ffb142;
  --gold: #e1ce8a;
  --ink: #e8e4da;
  --mut: #8a8478;
  --mono: "Consolas", "SFMono-Regular", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.6 "Segoe UI", Arial, sans-serif; overflow-x: hidden; }

#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}

/* ---- boot sequence ---- */
#boot {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease .1s;
}
#boot.done { opacity: 0; pointer-events: none; }
#boot-inner { text-align: center; }
#boot-logo { width: 280px; max-width: 60vw; opacity: 0;
  animation: bootin 1.1s cubic-bezier(.16,1,.3,1) .15s forwards; }
#boot-line { font-family: var(--mono); font-size: 12px; letter-spacing: .4em;
  color: var(--amber); margin-top: 22px; opacity: 0;
  animation: bootin .8s ease .5s forwards; }
#boot-c { animation: led .7s infinite; }
@keyframes bootin { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
@keyframes clockin { from { opacity: 0; transform: translateX(-50%) translateY(26px); }
  to { opacity: 1; transform: translateX(-50%); } }

/* brand mark */
#brand { position: fixed; top: 16px; left: 18px; z-index: 50; opacity: .8;
  transition: opacity .3s; }
#brand:hover { opacity: 1; }
#brand img { height: 42px; display: block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.9)); }

/* ---- master clock bar ---- */
#clockbar {
  animation: clockin .9s cubic-bezier(.16,1,.3,1) 2.1s backwards;
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 12px;
  background: rgba(10,10,14,.82); backdrop-filter: blur(8px);
  border: 1px solid #3a3220; border-radius: 10px; padding: 10px 16px;
  font-family: var(--mono); font-size: 12px; color: var(--gold);
  box-shadow: 0 6px 30px rgba(0,0,0,.6);
}
#clock-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 10px var(--amber);
  animation: led 1.2s infinite;
}
@keyframes led { 50% { opacity: .35; } }
#clock-led.frozen { animation: none; background: #5ad0ff; box-shadow: 0 0 10px #5ad0ff; }
#clock-rate { width: 180px; accent-color: var(--amber); }
#clock-readout { min-width: 64px; text-align: right; color: var(--amber); }
#clock-trigger {
  background: var(--amber); color: #000; border: none; border-radius: 5px;
  font: bold 12px var(--mono); padding: 6px 12px; cursor: pointer;
  letter-spacing: .1em;
}
#clock-trigger:hover { background: #ffc46b; }

/* ---- content panels ---- */
#content { position: relative; z-index: 10; }
.panel {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 12vh 8vw; position: relative;
  pointer-events: none;
}
.panel a, .panel button, .panel input { pointer-events: auto; }
.big {
  font-size: 11vw; line-height: .92; margin: 0; letter-spacing: -.02em;
  color: var(--ink); font-weight: 800;
  text-shadow: 0 2px 30px rgba(0,0,0,.7);
  will-change: transform;
}
.kicker {
  font-family: var(--mono); color: var(--amber); letter-spacing: .35em;
  font-size: 13px; margin-top: 3vh;
}
.hint { color: var(--mut); font-family: var(--mono); font-size: 12px; }
.panel h2 {
  font-size: 4.2vw; margin: 0 0 2vh 0; color: var(--gold);
  letter-spacing: -.01em;
}
.panel p { max-width: 520px; color: var(--ink); }

/* services cards — glass on dark */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; }
.card {
  display: block; padding: 22px 18px; border-radius: 10px;
  background: rgba(20,18,14,.55); border: 1px solid rgba(255,177,66,.25);
  backdrop-filter: blur(6px); text-decoration: none; color: var(--ink);
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              border-color .35s, background .35s;
}
.card b { display: block; color: var(--amber); font-family: var(--mono);
  letter-spacing: .12em; font-size: 13px; }
.card i { display: block; color: var(--mut); font-style: normal;
  font-size: 13px; margin-top: 8px; }
.card:hover {
  transform: translateY(-6px) rotateX(6deg);
  border-color: var(--amber); background: rgba(36,28,16,.7);
}

/* hud corner readouts */
#hud {
  animation: bootin .9s ease 2.4s backwards;
  position: fixed; top: 14px; right: 16px; z-index: 50;
  font-family: var(--mono); font-size: 11px; color: var(--mut);
  text-align: right; pointer-events: none; line-height: 1.7;
}
#hud b { color: var(--amber); font-weight: normal; }

@media (max-width: 768px) {
  .big { font-size: 16vw; }
  .panel h2 { font-size: 8vw; }
  .cards { grid-template-columns: 1fr; }
  #clock-rate { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  #clockbar { display: none; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
/* film-grain scanline veil */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* entrance choreography — premium ease, staggered rise */
.panel > * { opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.panel.inview > * { opacity: 1; transform: none; }
.panel.inview > *:nth-child(2) { transition-delay: .12s; }
.panel.inview > *:nth-child(3) { transition-delay: .24s; }
.panel.inview .card:nth-child(1) { transition-delay: .05s; }
.panel.inview .card:nth-child(2) { transition-delay: .12s; }
.panel.inview .card:nth-child(3) { transition-delay: .19s; }
.panel.inview .card:nth-child(4) { transition-delay: .26s; }
.panel.inview .card:nth-child(5) { transition-delay: .33s; }
.panel.inview .card:nth-child(6) { transition-delay: .40s; }
.card { opacity: 0; transform: translateY(30px) scale(.86);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .65s cubic-bezier(.34,1.56,.64,1),
              border-color .35s, background .35s, filter .9s ease;
  filter: brightness(2.4) blur(2px); }
.panel.inview .card { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .panel > *, .card { opacity: 1 !important; transform: none !important; transition: none !important; }
}