/* Tipografía de los roles (Archivo variable, incluida en el sitio) */
@font-face{
  font-family:'Archivo'; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url('../assets/fonts/archivo-variable.woff2') format('woff2');
}

/* ==========================================================
   Casa Norte · Página de carga / Coming soon
   ========================================================== */

:root{
  --green:#25452f;
  --cream:#f7e2b8;
  --ink:#10201a;

  /* Tamaños que cambian en móvil */
  --logo-w: min(860px, 80vw);
  --role-size: clamp(14px, 1.7vw, 22px);
  --gap-tag: clamp(56px, 11svh, 120px);
  --gap-loader: clamp(22px, 3.5svh, 34px);
  --tumble: clamp(64px, 8vw, 140px);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--green); -webkit-text-size-adjust:100% }
body{
  background:var(--green);
  font-family:"Helvetica Neue", Arial, sans-serif;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
img{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Espacio para el scroll; la escena está fija */
.scroll-space{ height:420svh }
.scene{ position:fixed; inset:0; overflow:hidden; contain:layout paint }
.layer{ position:absolute }

/* ---------- Fondo ---------- */
.bg-wrap{ inset:-4%; will-change:transform }
.bg{
  position:absolute; inset:0;
  background:var(--green) url("../assets/img/fondo.webp") center/cover no-repeat;
  opacity:0;
  animation:
    bgIn 1.8s cubic-bezier(.2,.7,.2,1) .1s forwards,
    drift 24s ease-in-out 1.9s infinite alternate;
}
@keyframes bgIn{ from{opacity:0; transform:scale(1.06)} to{opacity:1; transform:scale(1)} }
@keyframes drift{ from{transform:scale(1)} to{transform:scale(1.04) translate(-.6%,-.4%)} }

/* Grano de película */
.grain{
  position:absolute; inset:-50%; z-index:20; pointer-events:none;
  opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- Decoraciones ---------- */
.tape{
  left:0; top:6.5svh;
  width:clamp(150px, 22.4vw, 440px);
  transform-origin:10% 20%;
  will-change:transform;
}
.tape img{ width:100%; opacity:0; animation:inLeft 1.2s cubic-bezier(.2,.8,.2,1) 1s forwards }
@keyframes inLeft{ from{opacity:0; transform:translate(-40px,-10px) rotate(-6deg)} to{opacity:1; transform:none} }

.corner{
  right:0; bottom:0;
  width:clamp(210px, 27.3vw, 540px); aspect-ratio:1;
  transform-origin:70% 60%;
  will-change:transform;
}
.stamps{ position:absolute; inset:0; width:100%; opacity:0; animation:fade 1.6s ease 1.3s forwards; will-change:transform }
.label-w{
  position:absolute;
  left:calc(19 / 525 * 100%); top:calc(220 / 525 * 100%);
  width:calc(380 / 525 * 100%);
  will-change:transform;
}
.label-w img{
  width:100%; opacity:0;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation:inRight 1.2s cubic-bezier(.2,.8,.2,1) 1.15s forwards;
}
@keyframes inRight{ from{opacity:0; transform:translate(40px,30px) rotate(5deg)} to{opacity:1; transform:none} }

/* ---------- Contenido central ---------- */
.content{
  inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 16px;
}
.move{ will-change:transform }

.logo{
  position:relative;
  width:var(--logo-w); aspect-ratio:2460 / 570;
  opacity:0;
  animation:logoIn 1.4s cubic-bezier(.2,.8,.2,1) .6s forwards;
}
.logo img{ width:100%; height:100% }
@keyframes logoIn{
  from{opacity:0; transform:translateY(18px); filter:blur(8px)}
  to{opacity:1; transform:none; filter:blur(0)}
}

/* Brillo que cruza el logo */
.shine{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url("../assets/img/logo.webp") center/100% 100% no-repeat;
          mask:url("../assets/img/logo.webp") center/100% 100% no-repeat;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat;
  background-size:250% 100%;
  background-position:150% 0;
  animation:shine 6s ease-in-out 2.6s infinite;
}
@keyframes shine{ 0%{background-position:150% 0} 35%,100%{background-position:-50% 0} }

/* Roles: cambian uno por uno con el scroll */
.tag-w{
  margin-top:var(--gap-tag);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.roles-in{
  opacity:0;
  clip-path:inset(0 50% 0 50%);
  animation:reveal 1.5s cubic-bezier(.6,0,.2,1) 1.5s forwards;
}
@keyframes reveal{ to{opacity:1; clip-path:inset(-20% -5% -20% -5%)} }
.roles{
  position:relative;
  height:calc(var(--role-size) * 1.6);
  width:90vw; max-width:900px;
  overflow:hidden;
}
.role{
  position:absolute; inset:0;
  display:flex; justify-content:center; align-items:center;
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch:118%; font-variation-settings:"wdth" 118;
  font-weight:600;
  font-size:var(--role-size);
  letter-spacing:.28em; text-indent:.28em;
  color:var(--ink);
  white-space:nowrap;
}
.role .ch{
  display:inline-block;
  transform:translateY(115%); opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  transition-delay:calc(var(--i) * 22ms);
}
.role .sp{ display:inline-block; width:.45em }
.role.from-above .ch, .role.out-up .ch{ transform:translateY(-115%) }
.role.out-down .ch{ transform:translateY(115%) }
.role.is-active .ch{ transform:none; opacity:1 }
.role.no-anim .ch{ transition:none }


/* Indicador de carga */
.loader-w{ margin-top:var(--gap-loader) }
.loader{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; animation:fade 1s ease 2.5s forwards;
}
@keyframes fade{ to{opacity:1} }
.bar{
  position:relative; overflow:hidden;
  width:clamp(90px, 12vw, 140px); height:2px;
  background:rgba(247,226,184,.18); border-radius:2px;
}
.bar::after{
  content:""; position:absolute; inset:0 auto 0 0; width:40%;
  background:var(--cream); border-radius:2px;
  animation:slide 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes slide{ 0%{transform:translateX(-110%)} 100%{transform:translateX(260%)} }
.soon{
  color:var(--cream); opacity:.7;
  font-size:clamp(10px, 1vw, 11px);
  letter-spacing:.5em; text-indent:.5em; white-space:nowrap;
}

/* ---------- Bola del desierto ---------- */
.tumble, .shadow{ left:0; top:0; width:var(--tumble); pointer-events:none; will-change:transform }
.tumble{ aspect-ratio:1; z-index:10; opacity:0 }
.tumble img{ width:100%; height:100%; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)) }
.shadow{
  height:12px; z-index:9; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent);
}
.dust{
  position:absolute; z-index:9; border-radius:50%;
  background:rgba(230,204,156,.35); pointer-events:none;
}

/* ---------- Indicador de scroll ---------- */
.hint{
  left:50%; bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--cream); font-size:10px; letter-spacing:.45em; text-indent:.45em;
  opacity:0; animation:fade 1s ease 3.2s forwards; transition:opacity .4s;
}
.hint i{
  display:block; width:1px; height:34px;
  background:linear-gradient(var(--cream), transparent);
  transform-origin:top; animation:hintLine 1.8s ease-in-out infinite;
}
@keyframes hintLine{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} }
.hint.hide{ opacity:0 !important; animation:none }

/* ==========================================================
   Móvil
   ========================================================== */
@media (max-width: 640px){
  :root{
    --logo-w: 86vw;
    --role-size: clamp(13px, 4vw, 17px);
    --gap-tag: clamp(44px, 9svh, 80px);
    --gap-loader: 22px;
    --tumble: clamp(60px, 18vw, 84px);
  }

  .tape{ top:calc(4svh + env(safe-area-inset-top)) }
  .corner{ width:44vw }
  /* El indicador de scroll se va a la izquierda para no chocar con la etiqueta */
  .hint{ left:24px; transform:none; align-items:flex-start; text-indent:0 }
  /* Menos trabajo para el procesador en teléfonos */
  .grain{ animation:none; opacity:.06 }
  .label-w img{ filter:none }
}

/* Pantallas horizontales bajitas (teléfono acostado) */
@media (max-height: 480px) and (orientation: landscape){
  :root{
    --logo-w: min(520px, 56vw);
    --role-size: 13px;
    --gap-tag: 22px;
    --gap-loader: 14px;
  }
  .hint{ display:none }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
  .grain, .shine{ display:none }
}