/* ============================================================
   Estudio Chulia & Asociados — motion.css
   Estilos de la capa de movimiento cinematográfico (motor: motion.js).
   Complementa style.css (hereda --ease, --gold, etc.). Solo actúa donde
   hay hooks por markup, así no altera páginas que no los usan.
   Hooks: [data-speed] · [data-hpin]>.hpin-sticky>[data-htrack] ·
          [data-manifesto] · [data-magnetic] (+ .btn.gold/.gold-light)
   ============================================================ */

/* Parallax: el JS escribe el transform; acá solo optimizamos el pintado */
[data-speed]{ will-change: transform; }

/* Scroll horizontal con pin (áreas/secciones tipo preview) */
[data-hpin]{ position: relative; }
[data-hpin] .hpin-sticky{
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
[data-htrack]{
  display: flex; gap: 1.5rem;
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  will-change: transform;
}

/* Manifiesto: palabras que se "encienden" según el scroll */
[data-manifesto] .mw{ display: inline-block; opacity: .16; transition: opacity .5s var(--ease, ease); }
[data-manifesto] .mw.lit{ opacity: 1; }

/* Botones magnéticos (el JS escribe el translate en hover) */
.btn.gold, .btn.gold-light, [data-magnetic]{
  transition: transform .25s var(--ease, ease), filter .25s, box-shadow .25s,
              background .3s, color .3s, border-color .3s;
}

/* Tarjeta de área (para el scroll horizontal del home/servicios) */
.area-card{
  position: relative; flex: 0 0 clamp(280px, 32vw, 460px);
  height: clamp(360px, 58vh, 540px);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--navy-2, #0a1024);
}
.area-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: opacity .6s var(--ease, ease), transform 1.1s var(--ease, ease); }
.area-card:hover img{ opacity: .6; transform: scale(1.06); }
.area-card::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4,6,12,.92)); }
.area-card .ac-body{ position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.6rem; }
.area-card .ac-num{ font-family: var(--font-display); font-size: .8rem; color: var(--gold-2); letter-spacing: .2em; }
.area-card h3{ font-size: 1.6rem; margin: .4rem 0 .5rem; color: var(--ink); }
.area-card p{ font-size: .9rem; color: var(--muted); }
.areas-cine{ position: relative; }
.areas-cine-head{ position: absolute; top: clamp(2.5rem,8vh,5rem); left: 0; right: 0; z-index: 3; pointer-events: none; }
.areas-cine-head .kicker, .areas-cine-head h2{ pointer-events: auto; }
.areas-cine-head h2{ margin-top: .5rem; }
.area-card--cta{ background: linear-gradient(155deg, rgba(196,163,90,.16), rgba(10,16,32,.65)); display: flex; align-items: flex-end; }
.area-card--cta::after{ display: none; }
.area-card--cta h3{ color: var(--gold-2); }
.area-card--cta .ac-num{ font-size: 1.4rem; color: var(--gold-2); }

/* ── Marquee de áreas (CSS puro) ── */
.cine-marquee{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.4rem 0; overflow: hidden; background: rgba(255,255,255,.015); position: relative; z-index: 2; }
.cine-marquee .mq-track{ display: flex; gap: 2.4rem; white-space: nowrap; width: max-content; animation: cineMq 34s linear infinite; }
.cine-marquee span{ font-family: var(--font-display); font-size: clamp(1.3rem,3vw,2.3rem); color: transparent; -webkit-text-stroke: 1px rgba(227,204,148,.4); letter-spacing: .01em; }
.cine-marquee span.fill{ color: var(--gold-2); -webkit-text-stroke: 0; }
.cine-marquee .dot{ color: var(--gold); -webkit-text-stroke: 0; align-self: center; }
@keyframes cineMq{ to { transform: translateX(-50%); } }

/* ── Manifiesto ── */
.cine-manifesto{ padding: clamp(5rem,12vh,9rem) 0; }
.cine-manifesto p{ font-family: var(--font-display); font-size: clamp(1.8rem,4.4vw,3.4rem); line-height: 1.25; color: var(--ink); max-width: 20ch; letter-spacing: -.01em; }
.cine-manifesto .g{ color: var(--gold-2); font-style: italic; }

/* ── El estudio (founder) ── */
.cine-founder{ padding: clamp(4rem,10vh,8rem) 0; }
.cine-founder .fgrid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.cine-founder .ph{ position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line); }
.cine-founder .ph img{ width: 100%; height: 114%; object-fit: cover; object-position: center top; filter: grayscale(.15) contrast(1.02); will-change: transform; }
.cine-founder .ph::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,6,12,.5)); }
.cine-founder blockquote{ font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.2rem); line-height: 1.35; color: var(--ink); font-style: italic; }
.cine-founder blockquote .g{ color: var(--gold-2); }
.cine-founder cite{ display: block; margin-top: 1.4rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-style: normal; }
.cine-founder cite small{ display: block; font-family: var(--font-sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
@media (max-width: 760px){ .cine-founder .fgrid{ grid-template-columns: 1fr; } }

/* ── Contacto cinematográfico (marco/stage, sin tocar el form) ── */
.cine-contact{ position: relative; }
.cine-contact-head{ max-width: 32ch; margin-bottom: clamp(2rem,5vh,3.5rem); }
.cine-contact-lead{ font-family: var(--font-display); font-size: clamp(1.5rem,3.4vw,2.6rem); line-height: 1.25; color: var(--ink); letter-spacing: -.01em; margin-top: 1rem; }
.cine-contact-lead .g{ color: var(--gold-2); font-style: italic; }
.cine-form-panel{ position: relative; padding: clamp(1.6rem,3vw,2.6rem); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.cine-form-panel::before, .cine-form-panel::after{ content:""; position:absolute; width:18px; height:18px; border:1px solid var(--gold); pointer-events:none; }
.cine-form-panel::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.cine-form-panel::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
@media (max-width: 720px){ .cine-form-panel{ padding: 1.3rem 1.1rem; } }

@media (prefers-reduced-motion: reduce){
  [data-speed]{ transform: none !important; }
  [data-manifesto] .mw{ opacity: 1; }
  [data-hpin]{ height: auto !important; }
  [data-hpin] .hpin-sticky{ position: static; height: auto; }
  [data-htrack]{ flex-wrap: wrap; }
  .cine-marquee .mq-track{ animation: none; }
  .cine-founder .ph img{ height: 100%; }
}