/* ===================== Cinematic homepage layer ===================== */

/* custom trailing cursor (desktop only; class added by JS once ready) */
@media (hover: hover) and (pointer: fine) {
  .cine-cursor, .cine-cursor a, .cine-cursor button, .cine-cursor .card, .cine-cursor .role-btn { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; opacity: 0; }
  .cine-cursor .cursor-dot, .cine-cursor .cursor-ring { opacity: 1; }
  .cursor-dot { width: 7px; height: 7px; background: #fff; transform: translate(-50%,-50%); }
  .cursor-ring { width: 32px; height: 32px; border: 1.5px solid #fff; transform: translate(-50%,-50%); transition: width .25s, height .25s, background .25s; opacity: .7; }
  .cine-cursor.cine-hover .cursor-ring { width: 56px; height: 56px; background: rgba(255,255,255,.12); opacity: 1; }
}

/* intro curtain */
.cine-intro { position: fixed; inset: 0; z-index: 9998; background: #08080b; display: grid; place-items: center; }
.cine-intro img { width: 86px; height: 86px; animation: introPulse 1.1s ease-in-out infinite; }
.cine-intro .bar { position: absolute; bottom: 17%; width: 170px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.cine-intro .bar i { display: block; height: 100%; width: 0; background: var(--grad); animation: introBar 1.7s ease forwards; }
@keyframes introPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes introBar { to { width: 100%; } }
.cine-intro.hide { transform: translateY(-101%); transition: transform .9s cubic-bezier(.7,0,.2,1); }

/* mask wipe-up reveal */
.rmask { display: block; overflow: hidden; }
.rin { display: block; will-change: transform; }

/* pinned horizontal gallery */
.hpin { position: relative; padding: 70px 0; overflow: hidden; }
.hpin-track { display: flex; gap: 26px; padding: 0 6vw; width: max-content; will-change: transform; }
.hpanel { flex: 0 0 min(74vw, 470px); background: var(--bg-card); border: 1px solid var(--border-2); border-radius: 20px; padding: 26px; min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hpanel.lead-panel { justify-content: center; background: transparent; border: 0; box-shadow: none; flex: 0 0 min(74vw, 420px); }
.hpanel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hpanel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,12,.92)); }
.hpanel.lead-panel::after { display: none; }
.hp-body { position: relative; z-index: 2; }
.hp-num { display: inline-block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; color: var(--lime); font-weight: 800; margin-bottom: 10px; }
.hpanel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.hpanel p { color: var(--muted); font-size: .96rem; }
.hpanel.lead-panel h3 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
@media (max-width: 760px) { .hpin { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hpin-track { padding: 0 18px; } .hpanel { min-height: 52vh; } }

/* section index */
.cine-index { position: fixed; left: 24px; bottom: 22px; z-index: 120; font-family: var(--font-display); font-weight: 800; font-size: .78rem; color: var(--muted); letter-spacing: .12em; pointer-events: none; mix-blend-mode: difference; }
@media (max-width: 760px) { .cine-index { display: none; } }

/* form fields keep a usable caret even with the custom cursor */
.cine-cursor input, .cine-cursor textarea, .cine-cursor select { cursor: text; }
.cine-cursor select, .cine-cursor [type="submit"], .cine-cursor .btn { cursor: none; }