/* =========================================================
   HOME SKIN — boot doors + hero layout + labels + mouse glow
========================================================= */

body[data-page="home"]{
  --label-opacity: 1;
  --label-gray: 0;
  --label-sat: 1;
  --label-bright: 1;
  --label-contrast: 1;

  --label-hover-opacity: .96;
  --label-hover-bright: .92;
  --label-hover-sat: .75;

  --label-h: 72px;
  --label-h-m: 62px;

  --boot-red: rgba(51, 3, 13, 0.95);
}

/* 100vh “real” con fallback */
body[data-page="home"] .hero-ref{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  position: relative;
  overflow: hidden;

  isolation:isolate;
}

/* Fondo + halo rojo */
body[data-page="home"] .hero-ref__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 44%,
      rgba(108, 4, 27, 0.404) 0%,
      rgba(131, 2, 30, 0.195) 18%,
      rgba(209,0,45,.12) 32%,
      rgba(0,0,0,0) 55%
    ),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.85)),
    url("/hero-bg.jpg") center/cover no-repeat;

  transform: scale(1.02);
  filter: contrast(1.08) saturate(1.05);
  z-index:0;
}

/* Viñeta */
body[data-page="home"] .hero-ref__vignette{
  position:absolute; inset:-6%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,.68) 65%,
      rgba(0,0,0,.96) 100%
    );
  z-index:1;
  pointer-events:none;
}

/* Ambient overlay */
body[data-page="home"] .hero-ref::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.02) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255,255,255,.02) 100%);
  mix-blend-mode: overlay;
  pointer-events:none;
  opacity:.55;
  z-index:2;
}

/* =========================
   NEW HOME LAYOUT (left buttons / center logo / right slogan)
========================= */
body[data-page="home"] .home-stage{
  position:relative;
  z-index:2;
  height: 100%;
  min-height: inherit;

  display:grid;
  place-items:center;

  padding: clamp(18px, 3vw, 42px);
}

body[data-page="home"] .home-grid{
  width: min(1240px, 92vw);
  display:grid;
  grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  align-items:center;
  gap: clamp(18px, 3vw, 42px);
}

@media (max-width: 980px){
  body[data-page="home"] .home-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align:center;
  }
}

/* center logo — FORCE true center */
body[data-page="home"] .hero-ref__center{
  position:relative;
  text-align:center;
  justify-self: center;
  align-self: center;
}

body[data-page="home"] .hero-ref__logo{
  width:min(620px, 80vw);
  height:auto;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 0 40px rgba(209,0,45,.32))
    drop-shadow(0 0 90px rgba(209,0,45,.18));
}

/* left buttons stack */
body[data-page="home"] .hero-ref__labels{
  position: relative;
  z-index:3;
  pointer-events:auto;
}

/* Left labels: distributed like rails (top / mid / bottom) */
body[data-page="home"] .label-stack{
  display:flex;
  flex-direction: column;
  align-items:flex-start;

  /* key: spread them across a “rail height” */
  height: clamp(360px, 58vh, 560px);
  justify-content: space-between;

  /* fine tune where the rail starts/ends */
  padding-top: clamp(3px, 2vh, 40px);
  padding-bottom: clamp(6px, 3vh, 60px);

  gap: 0; /* important: no compact stacking */
}
body[data-page="home"] .hero-ref__labels{
  padding-left: clamp(48px, 10vw, 120px);
}
/* Mobile: go back to normal stacked */
@media (max-width: 980px){
  body[data-page="home"] .label-stack{
    height: auto;
    justify-content: flex-start;
    gap: 14px;
    align-items:center;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 980px){
  body[data-page="home"] .hero-ref__labels{
    padding-left: 0;
  }
}
body[data-page="home"] .hlabel-img{
  position:relative;
  display:inline-block;
  user-select:none;
  -webkit-user-drag:none;
  z-index:4;

  pointer-events:auto;
  opacity:1;
}

/* base */
body[data-page="home"] .hlabel-img img{
  display:block;
  height: var(--label-h);
  width:auto;

  opacity: var(--label-opacity);

  filter:
    grayscale(var(--label-gray))
    saturate(var(--label-sat))
    brightness(var(--label-bright))
    contrast(var(--label-contrast))
    drop-shadow(0 0 14px rgba(0,0,0,.78));

  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

/* hover overlays */
body[data-page="home"] .hlabel-img::before,
body[data-page="home"] .hlabel-img::after{
  content:"";
  position:absolute;
  inset:-12px;
  pointer-events:none;
  opacity:0;
  border-radius:14px;
}

body[data-page="home"] .hlabel-img::before{
  background: radial-gradient(closest-side, rgba(209,0,45,.16), rgba(0,0,0,0));
  filter: blur(12px);
  mix-blend-mode: screen;
}

body[data-page="home"] .hlabel-img::after{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  filter: blur(.35px);
}

body[data-page="home"] .hlabel-img:hover img{
  opacity: var(--label-hover-opacity);
  transform: scale(1.03);

  filter:
    grayscale(var(--label-gray))
    saturate(var(--label-hover-sat))
    brightness(var(--label-hover-bright))
    contrast(1.18)
    drop-shadow(0 0 24px rgba(209,0,45,.18));
}

body[data-page="home"] .hlabel-img:hover::before{ opacity:1; animation: hudPulse .9s ease-in-out infinite; }
body[data-page="home"] .hlabel-img:hover::after{ opacity:.22; animation: hudScan .35s linear infinite; }

body[data-page="home"] .hlabel-img:hover{
  animation: hudJitter .55s steps(2,end) infinite;
}

@keyframes hudScan{ 0%{ transform: translateY(-6px); } 100%{ transform: translateY(6px); } }
@keyframes hudPulse{ 0%,100%{ transform: scale(1); opacity:.72; } 50%{ transform: scale(1.04); opacity:1; } }
@keyframes hudJitter{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(var(--hud-jitter), calc(var(--hud-jitter) * -1), 0); }
  100%{ transform: translate3d(calc(var(--hud-jitter) * -1), var(--hud-jitter), 0); }
}

/* right slogan */
body[data-page="home"] .home-slogan{
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items:flex-end;
  text-align:right;
}

@media (max-width: 980px){
  body[data-page="home"] .home-slogan{
    align-items:center;
    text-align:center;
  }
}

body[data-page="home"] .home-slogan__line1{
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .04em;
  color: rgba(255,255,255,.78); /* more opaque/softer */
  text-shadow:
    0 0 14px rgba(209,0,45,.14),
    0 18px 60px rgba(0,0,0,.75);
}

/* continuous glitch on slogan (uses gl1/gl2 from global.css) */
body[data-page="home"] .home-slogan__line1.glitch::before{
  animation: gl1 1.9s steps(2,end) infinite;
  opacity: .50;
}
body[data-page="home"] .home-slogan__line1.glitch::after{
  animation: gl2 2.2s steps(2,end) infinite;
  opacity: .28;
}

body[data-page="home"] .home-slogan__line2{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Mouse glow */
body[data-page="home"] .mouse-glitch{
  position:absolute;
  width:240px; height:240px;
  border-radius:999px;
  pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.1);
  background:
    radial-gradient(circle,
      rgba(255,255,255,.05) 0%,
      rgba(209,0,45,.14) 35%,
      rgba(0,0,0,0) 70%);
  transition: opacity .18s ease;
  z-index:2;
}
body[data-page="home"] .hero-ref:hover .mouse-glitch{ opacity:.75; }

/* Home Language Switch */
body[data-page="home"] .lang-switch{
  position:absolute;
  top:24px;
  right:28px;
  z-index:10;

  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;

  padding:10px 16px;
  border-radius:999px;

  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);

  backdrop-filter: blur(8px);
  transition:.18s ease;
  opacity:.75;
}
body[data-page="home"] .lang-switch:hover{
  opacity:1;
  border-color:rgba(209,0,45,.45);
  box-shadow:0 0 18px rgba(209,0,45,.25);
  transform:translateY(-1px);
}

/* Mobile */
@media (max-width: 780px){
  body[data-page="home"] .hlabel-img img{ height: var(--label-h-m); }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .hlabel-img:hover,
  body[data-page="home"] .hlabel-img:hover::before,
  body[data-page="home"] .hlabel-img:hover::after{
    animation:none !important;
  }
  body[data-page="home"] .home-slogan__line1.glitch::before,
  body[data-page="home"] .home-slogan__line1.glitch::after{
    animation:none !important;
  }
}

/* =========================================================
   BOOT SEQUENCE — logo + crimson bar + sliding doors
========================================================= */

body[data-page="home"] .boot{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.92);
  overflow:hidden;
}

body[data-page="home"] .boot__center{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 14px;
  transform: translateY(-6px);
}

body[data-page="home"] .boot__logo{
  width: min(150px, 40vw);
  height:auto;
  display:block;
  opacity: .98;
  filter:
    contrast(1.06) saturate(1.02)
    drop-shadow(0 0 28px rgba(255,255,255,.18))
    drop-shadow(0 0 70px rgba(209,0,45,.18));
}

/* progress bar */
body[data-page="home"] .boot__bar{
  width: min(320px, 72vw);
  height: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  overflow:hidden;
}

body[data-page="home"] .boot__bar > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(209,0,45,.55), rgba(209,0,45,.95));
  box-shadow: 0 0 18px rgba(209,0,45,.22);
  animation: bootLoad 2.10s ease forwards; /* slower */
}

@keyframes bootLoad{
  0%{ width: 0%; }
  100%{ width: 100%; }
}

/* doors */
body[data-page="home"] .boot__doors{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  pointer-events:none;
}

body[data-page="home"] .boot__door{
  width:50%;
  height:100%;
  background:
    radial-gradient(1200px 520px at 50% 40%, rgba(209,0,45,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.92));
  border-right: 1px solid rgba(255,255,255,.10);
  position:relative;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(.2,.9,.2,1); /* slower */
}

body[data-page="home"] .boot__door--right{
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.10);
}

body[data-page="home"] .boot__door::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 2px,
      transparent 5px
    ),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  opacity:.18;
  mix-blend-mode: overlay;
}

/* open state */
body[data-page="home"] .boot.is-open .boot__door--left{
  transform: translateX(-102%);
}
body[data-page="home"] .boot.is-open .boot__door--right{
  transform: translateX(102%);
}

/* hide after done */
body[data-page="home"] .boot.is-hide{
  opacity:0;
  transition: opacity .25s ease;
}

/* reduced motion: no doors */
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .boot__bar > span{ animation: none !important; width:100% !important; }
  body[data-page="home"] .boot__door{ transition:none !important; }
}

/* ===== HOME quick tuning: position + per-label size ===== */

/* Subir Studio (primer label) */
body[data-page="home"] .label-stack .hlabel-img:nth-child(1){
  transform: translateY(-18px);
}

/* Bajar Projects (tercer label) */
body[data-page="home"] .label-stack .hlabel-img:nth-child(3){
  transform: translateY(22px);
}

/* Hacer más grandes Contact + Projects (sin deformar) */
body[data-page="home"] .label-stack .hlabel-img:nth-child(2) img{
  height: 86px;   /* Contact */
  width: auto;
}
body[data-page="home"] .label-stack .hlabel-img:nth-child(3) img{
  height: 84px;   /* Projects */
  width: auto;
}