/* =========================
FILE: style.css  (HOME)
========================= */
:root{
  --bg0:#0e0e10;
  --bg1:#16161a;
  --text:#e9e9ee;
  --muted:rgba(233,233,238,.55);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1100px 700px at 50% 40%,var(--bg1),var(--bg0) 60%,#09090b);
  color:var(--text);
  overflow:hidden;
}

/* subtle noise */
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode:overlay;
}

.stage{
  height:100%;
  display:grid;
  place-items:center;
}

.desktop{
  width:min(900px,95vw);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
}

.folder-wrap{
  width:800px;
  height:400px;
  display:grid;
  place-items:center;
  background:transparent;
}

/* ONLY folder clickable */
.folder{
  width:120px;
  cursor:pointer;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  animation:floaty 7s ease-in-out infinite;
  transition:transform .2s ease;
}
.folder:hover{ transform:scale(1.08); }

/* text not clickable */
.label,.hint{ pointer-events:none; }

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* LOGO */
.label{
  margin-top:10px;
  font-family:'New Rocker', cursive;
  font-size:72px;
  letter-spacing:-1px;
  line-height:1;
  text-align:center;

  color:#ffd600;
  -webkit-text-stroke:4px #000;
  text-shadow:
    4px 4px 0 #000,
    6px 6px 0 #000,
    8px 8px 0 #000,
    10px 10px 0 #000;
}

.hint{
  margin-top:12px;
  font-size:25px;
  color:var(--muted);
  text-align:center;
}

/* =========================
FUTURISTIC EXIT ANIMATION
========================= */
.page-exit .folder-wrap{
  animation: warpOut .52s cubic-bezier(.2,.9,.2,1) forwards;
}

.page-exit .folder{
  animation: folderFlash .52s ease forwards;
}

.page-exit .noise{
  animation: noiseFade .52s ease forwards;
}

@keyframes warpOut{
  0%{
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  100%{
    transform: scale(1.08);
    filter: blur(10px);
    opacity: 0;
  }
}

@keyframes folderFlash{
  0%{ filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
  60%{ filter: drop-shadow(0 0 22px rgba(255,214,0,.55)); transform: scale(1.18); }
  100%{ filter: blur(6px); transform: scale(1.25); opacity: 0; }
}

@keyframes noiseFade{
  0%{opacity:.08}
  100%{opacity:0}
}
/* =========================
   ✅ PAGE TRANSITION – GRAFFITI TAG (SIEMPRE SE VE)
   FIX: la animación del texto SOLO corre cuando .active
========================= */
.page-transition{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:999999;
  pointer-events:none;

  background:#07070a;

  /* escondido de verdad */
  opacity:0;
  visibility:hidden;
}

.page-transition .tag{
  font-family:'New Rocker', cursive;
  font-size:clamp(52px, 9vw, 130px);
  color:#ffd800;
  letter-spacing:.12em;
  text-align:center;

  /* estado inicial */
  opacity:0;
  transform:scale(.38) rotate(-7deg);
  filter:blur(12px);

  -webkit-text-stroke:4px #000;
  text-shadow:
    4px 4px 0 #000,
    8px 8px 0 #000,
    0 0 24px rgba(255,216,0,.35);
}

/* ✅ activo: se muestra y anima */
.page-transition.active{
  visibility:visible;
  animation: ptFade 1.60s ease forwards;
}

.page-transition.active .tag{
  animation: tagHit 1.10s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: .12s; /* le da tiempo al fondo a aparecer */
}

/* overlay dura más tiempo “encendido” */
@keyframes ptFade{
  0%{ opacity:0 }
  12%{ opacity:1 }
  88%{ opacity:1 }
  100%{ opacity:0 }
}

/* tag entra pesado */
@keyframes tagHit{
  0%{
    transform:scale(.38) rotate(-7deg);
    opacity:0;
    filter:blur(12px);
  }
  65%{
    transform:scale(1.14) rotate(2deg);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:scale(1) rotate(0deg);
    opacity:1;
    filter:blur(0);
  }
}
/* =========================
   ✅ MOBILE FIX (iPhone / small screens)
   PÉGALO AL FINAL DEL style.css
========================= */
@media (max-width: 700px){

  /* evita “cortes” laterales */
  body{
    overflow-x: hidden !important;
  }

  /* tu main .desktop no debe ser cuadrado en mobile */
  .desktop{
    width: 100% !important;
    aspect-ratio: auto !important;
    padding: 24px 14px !important;
  }

  /* el wrapper NO puede ser 800px en un iPhone */
  .folder-wrap{
    width: min(92vw, 520px) !important;
    height: auto !important;
  }

  /* escala el folder icon */
  .folder{
    width: clamp(84px, 22vw, 120px) !important;
  }

  /* el título gigante es lo que más rompe */
  .label{
    font-size: clamp(44px, 12vw, 72px) !important;
    -webkit-text-stroke: clamp(2px, 0.6vw, 4px) #000 !important;
    text-shadow:
      2px 2px 0 #000,
      4px 4px 0 #000,
      6px 6px 0 #000 !important;
  }

  .hint{
    font-size: clamp(14px, 4.2vw, 20px) !important;
  }
}
/* =========================
   ✅ LANDSCAPE FIX (phones sideways)
   PÉGALO AL FINAL DEL style.css
========================= */
@media (max-width: 950px) and (orientation: landscape){

  /* asegura que todo quepa en altura */
  .stage{
    min-height: 100svh;
    padding: 14px 16px;
    place-items: center;
  }

  /* deja de forzar el cuadrado */
  .desktop{
    width: 100% !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
  }

  /* el contenedor se vuelve “banda” */
  .folder-wrap{
    width: min(92vw, 860px) !important;
    height: auto !important;
    padding: 10px 10px 12px !important;
  }

  /* todo más compacto para que no recorte arriba/abajo */
  .folder{
    width: clamp(72px, 12vw, 110px) !important;
  }

  .label{
    margin-top: 6px !important;
    font-size: clamp(34px, 6vw, 56px) !important;
    -webkit-text-stroke: clamp(2px, 0.45vw, 4px) #000 !important;
    text-shadow:
      2px 2px 0 #000,
      4px 4px 0 #000,
      6px 6px 0 #000 !important;
  }

  .hint{
    margin-top: 6px !important;
    font-size: clamp(12px, 2.6vw, 18px) !important;
  }
}

/* extra: si es landscape pero MUY bajito (iPhone mini, etc.) */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 420px){
  .folder{ width: 68px !important; }
  .label{ font-size: 32px !important; }
  .hint{ font-size: 12px !important; }
}