/* ------------------------------------------------------------------
   Okapi Producciones — Landing de mantenimiento
   Paleta monocroma de marca + luz cinematográfica sutil
------------------------------------------------------------------- */

:root{
  --bg:            #0a0a0b;
  --bg-elev:       #121214;
  --ink:           #f5f5f4;
  --ink-soft:      rgba(245,245,244,.62);
  --ink-faint:     rgba(245,245,244,.34);
  --line:          rgba(245,245,244,.14);

  --cool:          #3d6c8f;   /* luz fría de plató */
  --warm:          #b0713a;   /* luz cálida de contra */

  --bar:           clamp(18px, 4.2vh, 46px);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;
}

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

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,6vh,56px);
  padding:calc(var(--bar) + 6vh) 24px calc(var(--bar) + 4vh);

  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  line-height:1.6;
  text-align:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Escenario / iluminación ---------------------------- */

.stage{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.beam{
  position:absolute;
  width:min(115vw,1250px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(28px);
  opacity:.5;
  will-change:transform;
}

.beam--cool{
  top:-38%; left:-22%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--cool) 58%, transparent) 0%,
    transparent 62%);
  animation:drift-a 26s var(--ease) infinite alternate;
}

.beam--warm{
  bottom:-42%; right:-25%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--warm) 46%, transparent) 0%,
    transparent 62%);
  animation:drift-b 32s var(--ease) infinite alternate;
}

@keyframes drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(9vw,7vh,0) scale(1.16); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0) scale(1.1); }
  to  { transform:translate3d(-8vw,-6vh,0) scale(1); }
}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 85% 65% at 50% 45%, transparent 0%, rgba(6,6,7,.88) 100%);
}

/* Gota de marca, gigante y casi imperceptible, respirando detrás */
.drop-watermark{
  position:absolute;
  top:50%; left:50%;
  width:min(74vh,560px);
  aspect-ratio:1;
  transform:translate(-50%,-56%);
  background:
    radial-gradient(circle at 42% 34%,
      rgba(245,245,244,.075) 0%,
      rgba(245,245,244,.025) 46%,
      transparent 72%);
  -webkit-mask:url("../img/drop.svg") center/contain no-repeat;
          mask:url("../img/drop.svg") center/contain no-repeat;
  animation:breathe 11s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform:translate(-50%,-56%) scale(.97); opacity:.75; }
  50%    { transform:translate(-50%,-56%) scale(1.05); opacity:1; }
}

/* ---------- Grano de película ---------------------------------- */

.grain{
  position:fixed; inset:0;
  z-index:2;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ---------- Barras de encuadre --------------------------------- */

.bar{
  position:fixed; left:0; right:0;
  height:var(--bar);
  background:#060607;
  z-index:3;
  pointer-events:none;
  animation:bar-in 1.1s var(--ease) both;
}
.bar--top{ top:0; border-bottom:1px solid rgba(245,245,244,.06); transform-origin:top; }
.bar--bottom{ bottom:0; border-top:1px solid rgba(245,245,244,.06); transform-origin:bottom; }

@keyframes bar-in{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ---------- Contenido ------------------------------------------ */

.shell{
  position:relative;
  z-index:4;
  max-width:640px;
  width:100%;
}

.eyebrow{
  margin:0 0 clamp(26px,5vh,44px);
  font-size:clamp(9px,1.5vw,11px);
  font-weight:600;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* Logotipo: máscara SVG + barrido de luz de proyector */
.logo{ margin:0; }

.logo__mark{
  display:block;
  width:clamp(190px,34vw,320px);
  aspect-ratio:1610/510;
  margin:0 auto;

  background:
    linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 38%,
      #ffffff 47%, #ffffff 53%,
      var(--ink) 62%, var(--ink) 100%);
  background-size:260% 100%;
  background-position:120% 0;

  -webkit-mask:url("../img/logo-okapi.svg") center/contain no-repeat;
          mask:url("../img/logo-okapi.svg") center/contain no-repeat;

  animation:sweep 7s var(--ease) 1.6s infinite;
  will-change:background-position;
}

@keyframes sweep{
  0%       { background-position:120% 0; }
  22%,100% { background-position:-60% 0; }
}

.rule{
  width:44px; height:1px;
  margin:clamp(30px,5.5vh,48px) auto clamp(26px,4.5vh,38px);
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  position:relative;
}
.rule::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--ink), transparent);
  animation:rule-pulse 4.5s ease-in-out infinite;
}
@keyframes rule-pulse{
  0%,100%{ opacity:.15; transform:scaleX(.4); }
  50%    { opacity:.8;  transform:scaleX(1); }
}

.headline{
  margin:0 0 18px;
  font-size:clamp(23px,4.6vw,38px);
  font-weight:200;
  letter-spacing:.005em;
  line-height:1.25;
}
.headline em{
  font-style:normal;
  font-weight:800;
  letter-spacing:-.01em;
}

.lead{
  margin:0 auto;
  max-width:44ch;
  font-size:clamp(14px,2.2vw,16px);
  color:var(--ink-soft);
  text-wrap:balance;
}

/* Barra de progreso indeterminada */
.progress{
  position:relative;
  width:min(240px,62%);
  height:2px;
  margin:clamp(34px,6vh,52px) auto clamp(18px,3vh,24px);
  background:rgba(245,245,244,.1);
  border-radius:2px;
  overflow:hidden;
}
.progress__bar{
  position:absolute; inset:0 auto 0 0;
  width:42%;
  border-radius:2px;
  background:linear-gradient(90deg,
    transparent, var(--ink) 45%, #ffffff 60%, transparent);
  animation:run 2.6s var(--ease) infinite;
}
@keyframes run{
  0%  { transform:translateX(-110%); }
  100%{ transform:translateX(345%); }
}

.status{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:clamp(10px,1.7vw,12px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.status__dot{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ink);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{ opacity:.25; transform:scale(.8); }
  50%    { opacity:1;   transform:scale(1); }
}

/* ---------- Pie ------------------------------------------------- */

.foot{
  position:relative;
  z-index:4;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(245,245,244,.22);
}

/* ---------- Entrada --------------------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(14px);
  animation:reveal .95s var(--ease) both;
  animation-delay:calc(var(--d,0ms) + 350ms);
}
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* ---------- Pantallas pequeñas ---------------------------------- */

@media (max-width:480px){
  body{ gap:32px; }
  .eyebrow{ letter-spacing:.3em; }
  .drop-watermark{ width:min(58vh,340px); }
}

@media (max-height:520px){
  .bar{ display:none; }
  body{ padding-block:5vh; }
  .rule{ margin-block:18px 16px; }
}

/* ---------- Accesibilidad / movimiento reducido ----------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .logo__mark{ background:var(--ink); }
  .grain{ display:none; }
}

@media (prefers-contrast:more){
  .lead{ color:var(--ink); }
  .foot,.status{ color:var(--ink-soft); }
}