/* ========================================================
   VALORE HOMEPAGE — Brutalist room with live window
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Archivo:wght@300..700&display=swap');

:root {
  --night: #0B0D11;
  --midnight: #11141A;
  --slate: #181C24;
  --graphite: #3A4049;
  --parchment: #E8E2D2;
  --bone: #C7BFAE;
  --ash: #948D7E;
  --oxblood: #6B1F1C;
  --oxblood-glow: #8B2A22;
  --brandy: #A37C3C;
  --brandy-soft: #C49B5D;
  --font-display: 'Fraunces', 'Bodoni Moda', Georgia, serif;
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

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

html,
body {
  height: 100%;
  background: #06080a;
  color: var(--parchment);
  font-family: var(--font-sans);
  overflow: hidden;
}

/* ========== SEA (window background) ========== */
#sea {
  position: fixed;
  inset: 0;
  z-index: 0;
  transform: scale(1.04);
  /* Placeholder grey sky+sea with a defined horizon.
     Swap for <video> (waves.mp4) to go live. */
  background: linear-gradient(
    to bottom,
    #c4ccd2 0%,
    #b6c0c7 24%,
    #aab4bc 35%,
    #ccd3d8 39.5%,
    #d2d8dc 40.6%,
    #84909a 41.8%,
    #6c7882 48%,
    #5b656e 52%,
    #525c66 56%,
    #444e57 74%,
    #3a434c 100%
  );
}

/* ========== FRAME (the house) ========== */
#frame {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: transparent center / cover no-repeat;
  background-image: url('../img/frame-cut.png');
  background-position: center 66%;
  filter: contrast(1.05) brightness(1.02);
}

/* ========== TINTS (cool blue-grey grade) ========== */
#tint {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #15324e;
  mix-blend-mode: color;
  opacity: 0.22;
}

#tint2 {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 40, 64, 0.25), transparent 40%, rgba(8, 12, 18, 0.3));
  mix-blend-mode: soft-light;
}

/* ========== GRADE (vignette + legibility) ========== */
#grade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(8, 10, 14, 0.55) 0%, transparent 14%, transparent 74%, rgba(8, 10, 14, 0.6) 100%),
    radial-gradient(135% 110% at 50% 38%, transparent 52%, rgba(6, 8, 11, 0.5) 100%);
}

/* ========== FILM GRAIN ========== */
#grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  z-index: 6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(2) infinite;
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-3%, 2%);
  }
  100% {
    transform: translate(2%, -2%);
  }
}

/* ========== LOADING VEIL ========== */
#veil {
  position: fixed;
  inset: 0;
  background: #06080a;
  display: grid;
  place-items: center;
  z-index: 60;
  transition: opacity 1.4s ease;
}

#veil.hidden {
  opacity: 0;
  pointer-events: none;
}

#veil .mark {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144;
}

#veil .sub {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 1rem;
  text-align: center;
}

/* ========== TOPIC BAR ========== */
#topics {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(to bottom, rgba(8, 10, 14, 0.55), transparent);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

#topics.show {
  opacity: 1;
  transform: none;
}

#topics .brand {
  position: absolute;
  left: 1.6rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 96;
}

#topics button {
  background: none;
  border: 1px solid transparent;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-radius: 2px;
  transition: 0.25s;
}

#topics button:hover {
  color: var(--parchment);
}

#topics button.active {
  color: var(--night);
  background: var(--parchment);
}

/* ========== FOREGROUND STAGE ========== */
#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
}

#magazine {
  position: absolute;
  left: 43%;
  bottom: 30%;
  width: min(12vw, 150px);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  perspective: 1600px;
  opacity: 0;
  transition: opacity 1.2s ease 0.4s;
}

#magazine.show {
  opacity: 1;
}

#magazine .shadow {
  position: absolute;
  left: 2%;
  right: -6%;
  bottom: 1%;
  height: 30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent 78%);
  filter: blur(7px);
  transform: rotateX(66deg) rotateZ(6deg) scaleY(0.5);
  transform-origin: bottom center;
}

#magazine .cover {
  position: absolute;
  inset: 0;
  background: #0b0e12;
  border: 1px solid #161a20;
  border-radius: 2px;
  overflow: hidden;
  transform: rotateX(66deg) rotateZ(6deg);
  transform-origin: bottom center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#magazine .cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 6, 9, 0.6) 0%, rgba(4, 6, 9, 0.1) 44%, rgba(176, 198, 220, 0.1) 100%);
}

#magazine:hover .cover {
  transform: rotateX(63deg) rotateZ(6deg) translateY(-4px);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.55);
}

#magazine.opening .cover {
  transform: rotateX(10deg) rotateZ(2deg) translateY(-46px) scale(1.2);
}

#magazine.opening .shadow {
  opacity: 0;
  transition: opacity 0.4s;
}

.cover .masthead {
  font-family: var(--font-display);
  font-weight: 560;
  color: #d8d2c2;
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 15% 0 0;
  font-variation-settings: 'opsz' 144;
}

.cover .rule {
  height: 1px;
  background: var(--brandy);
  margin: 0.5rem 24% 0.7rem;
  opacity: 0.85;
}

.cover .iss {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: center;
}

.cover .feat {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--brandy-soft);
}

.cover .spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 2;
  background: linear-gradient(to right, #04060a, #13171d);
}

/* ========== HINT ========== */
#hint {
  position: fixed;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 15;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  transition: opacity 1s ease;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

#hint.show {
  opacity: 0.9;
}

#hint .key {
  color: var(--brandy-soft);
}

/* ========== ENTRIES PANEL ========== */
#panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(10px) saturate(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

#panel.open {
  opacity: 1;
  pointer-events: auto;
}

#panel .wrap {
  max-width: 1100px;
  width: 100%;
  margin: auto;
  padding: 6rem 2rem 4rem;
}

#panel .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brandy-soft);
  margin-bottom: 0.8rem;
}

#panel h2 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 2.4rem;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--graphite);
  border: 1px solid var(--graphite);
}

.card {
  background: var(--midnight);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: 0.3s;
  cursor: pointer;
  min-height: 230px;
}

.card:hover {
  background: var(--slate);
}

.card .cat {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brandy-soft);
}

.card .ttl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--parchment);
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
}

.card .dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--bone);
  flex: 1;
}

.card .meta {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  border-top: 1px solid var(--graphite);
  padding-top: 0.8rem;
}

#close {
  position: fixed;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 41;
  background: none;
  border: 1px solid var(--graphite);
  color: var(--bone);
  width: 42px;
  height: 42px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.25s;
}

#close:hover {
  color: var(--parchment);
  border-color: var(--parchment);
}

.hide {
  display: none !important;
}