/* =========================================
   ECLAIRER - styles
   Positions are measured from the design
   (26.png, 2955 x 6562 artboard) and written as %
   of the stage, so the layout matches the design
   at any screen width. Art is SVG, so it stays sharp.
   ========================================= */

:root {
  --yellow: #fecf49;
  --brown: #6f3014;
  --orange: #f04923;
}

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

html,
body {
  min-height: 100%;
  background: var(--yellow);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Stage: same proportions as the design ---------- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2955.19 / 6562.33;
  background: url("bg-gradient.svg?v=7") center / 100% 100% no-repeat;
}

.logo,
.est,
.nav,
.lockbox {
  position: absolute;
}

/* ---------- Logo ---------- */
.logo {
  left: 4.602%;
  top: 3.749%;
  width: 56.77%;
}

/* ---------- EST.2026 ---------- */
.est {
  left: 49.535%;
  top: 11.701%;
  width: 5.437%;
}

/* ---------- Navigation cluster (top right) ---------- */
.nav {
  left: 86.111%;
  top: 2.651%;
  width: 11.378%;
  aspect-ratio: 336.25 / 222.02;
  animation: float 4s ease-in-out infinite;
}

/* Each link is a row: word + icon, placed inside the cluster */
.nav-link {
  position: absolute;
  display: block;
  transition: transform 0.15s ease;
}

.nav-link img {
  position: absolute;
}

.nav-media      { left: 18.468%; top: 0;       width: 58.335%; height: 20.268%; }
.nav-journaling { left: 0.404%;  top: 40.469%; width: 99.596%; height: 20.295%; }
.nav-thoughts   { left: 0;       top: 79.668%; width: 97.323%; height: 20.332%; }

.nav-media .word      { left: 0;       top: 0.556%; width: 71.863%; }
.nav-media .icon      { left: 77.058%; top: 0;      width: 22.942%; }
.nav-journaling .word { left: 0;       top: 0;      width: 81.531%; }
.nav-journaling .icon { left: 86.563%; top: 0.333%; width: 13.437%; }
.nav-thoughts .word   { left: 0;       top: 0;      width: 82.374%; }
.nav-thoughts .icon   { left: 86.249%; top: 0.266%; width: 13.751%; }

/* Bigger invisible click area around each row */
.nav-link::after {
  content: "";
  position: absolute;
  inset: -25% -6%;
}

.nav-link:hover {
  transform: scale(1.06);
}

.nav-link:focus-visible,
.lockbox:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 6px;
}

/* Floating cluster: gentle up-and-down drift */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6%); }
}

/* CD spins while the Media link is hovered (or focused with the keyboard) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.nav-media:hover .cd,
.nav-media:focus-visible .cd {
  animation: spin 1.6s linear infinite;
}

/* ---------- Lockbox (bottom right) ---------- */
.lockbox {
  left: 97.862%;
  top: 98.898%;
  width: 1.535%;
  transition: transform 0.15s ease;
}

.lockbox::after {
  content: "";
  position: absolute;
  inset: -50%;
}

.lockbox:hover {
  transform: scale(1.15) rotate(-6deg);
}

/* ---------- Password popup ---------- */
.gate {
  margin: auto;
  border: 3px solid var(--brown);
  border-radius: 14px;
  background: var(--yellow);
  color: var(--brown);
  padding: 28px 28px 22px;
  width: min(320px, calc(100vw - 32px));
  font-family: "Courier New", monospace;
}

.gate::backdrop {
  background: rgba(111, 48, 20, 0.55);
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate-icon {
  width: 48px;
  margin: 0 auto 4px;
}

.gate label {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.gate input {
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
  border: 2px solid var(--brown);
  border-radius: 8px;
  background: #fff8e1;
  color: var(--brown);
}

.gate-error {
  min-height: 1.2em;
  font-size: 13px;
  color: var(--orange);
  text-align: center;
}

.gate-buttons {
  display: flex;
  gap: 10px;
}

.gate button {
  flex: 1;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 8px;
  border: 2px solid var(--brown);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--brown);
}

.gate button[type="submit"] {
  background: var(--brown);
  color: var(--yellow);
}

.gate.shake {
  animation: shake 0.35s;
}

@keyframes shake {
  25% { translate: -8px 0; }
  75% { translate: 8px 0; }
}

/* ---------- Secret page: gradient only ---------- */
.secret {
  min-height: 100vh;
  background: url("bg-gradient.svg?v=7") center / 100% 100% no-repeat;
}

/* ---------- Phones: bigger menu and lockbox so they are easy to tap ---------- */
@media (max-width: 700px) {
  /* Taller stage so the gradient spreads out like on desktop */
  .stage {
    aspect-ratio: auto;
    height: 640vw;
  }

  .logo { left: 6%;  top: 8vw;    width: 88%; }
  .est  { left: 70%; top: 39.5vw; width: 18%; }

  .nav {
    left: 50%;
    top: 54vw;
    width: 60%;
    margin-left: -30%;
  }

  .lockbox {
    left: auto;
    right: 4%;
    top: auto;
    bottom: 1.5%;
    width: 9%;
  }
}

/* Respect visitors who turn off animations */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav-media:hover .cd,
  .nav-media:focus-visible .cd {
    animation: none;
  }
}