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

@font-face {
  font-family: 'Engravers Gothic BT';
  src: url('/tierra/fonts/EngraversGothicBT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  height: 100%;
  background: #1a0f08;
  font-family: 'Engravers Gothic BT', 'EngraversGothicBT', 'Century Gothic', sans-serif;
  overflow: hidden;
}

/* ── Hero ── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #1a0f08;
}

/* Global veil */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 12, 5, 0.22);
  z-index: 1;
  pointer-events: none;
}

/* ── 5 panels ── */
.panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  overflow: hidden;
  z-index: 0;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity  0.9s ease;
}

.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Starting positions – off-screen */
.panel--1 { left: 0%;  transform: translateX(-100%); transition-delay: 0s; }
.panel--2 { left: 20%; transform: translateX(-200%); transition-delay: 0.1s; }
.panel--3 { left: 40%; opacity: 0;                   transition-delay: 0.45s; }
.panel--4 { left: 60%; transform: translateX(200%);  transition-delay: 0.1s; }
.panel--5 { left: 80%; transform: translateX(100%);  transition-delay: 0s; }

/* Animated – panels slide to final position */
.hero--animated .panel--1 { transform: translateX(0); }
.hero--animated .panel--2 { transform: translateX(0); }
.hero--animated .panel--3 { opacity: 1; }
.hero--animated .panel--4 { transform: translateX(0); }
.hero--animated .panel--5 { transform: translateX(0); }

/* ── Overlay gradient ── */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 6, 0.10)  0%,
    rgba(10, 8, 6, 0.05) 40%,
    rgba(26, 15, 8, 0.00) 60%,
    rgba(34, 23, 11, 0.70) 80%,
    rgba(34, 23, 11, 1.00) 100%
  );
}

/* ── Center content ── */
.content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}

.content--visible {
  opacity: 1;
}

.content__logo {
  height: 85px;
  width: auto;
  object-fit: contain;
}

.content__coming-soon {
  font-family: 'Engravers Gothic BT', 'EngraversGothicBT', 'Century Gothic', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #f5f2ee;
  line-height: 1.4;
  text-align: center;
  margin-top: 30px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .content__logo         { height: 65px; }
  .content              { gap: 30px; }
  .content__coming-soon  { font-size: clamp(0.85rem, 4vw, 1.1rem); letter-spacing: 0.2em; }
}

@media (max-width: 480px) {
  .content__logo         { height: 55px; }
  .content              { gap: 24px; }
  .content__coming-soon  { font-size: clamp(0.75rem, 4vw, 1rem); }
}