/* V15 hand-offs between chapters (no text cards; objects carry the cut):
   1. map seat view -> the ticket card inside the phone checkout;
   2. phone navigation to the stadium -> arrival in the app -> the phone drops out as the
      sunset dissolves into the drone take's first frame at the plaza. */

/* 1. The seat the buyer just saw becomes the ticket's picture. */
#seatHandoff{position:absolute;z-index:9;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;opacity:0;border-radius:0;will-change:left,top,width,height}
#seatHandoff img{width:100%;height:100%;object-fit:cover;display:block}
#transferir .checkout-ticket{position:relative;overflow:hidden;background:#27172f url('/assets/boxoffice/img/city/0360.webp') center 38%/cover}
#transferir .checkout-ticket::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#27172fe6 0%,#27172f99 60%,#27172f40 100%)}
#transferir .checkout-ticket>*{position:relative}

/* 2. Navigation inside the phone (Festival Sound app look). */
#phoneNav{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:#130f19;color:#f3eef5;opacity:0;pointer-events:none}
#phoneNav header{display:flex;justify-content:space-between;align-items:center;padding:26px 17px 8px;font-size:10px;font-weight:800}
#phoneNav header span{font-size:8px;color:#b98aa6;letter-spacing:.06em}
#phoneNav h3{margin:0 17px 10px;font-size:26px;line-height:.95;letter-spacing:-.06em}
#phoneNav .nav-map{flex:1;position:relative;overflow:hidden}
#phoneNav .nav-map svg{position:absolute;inset:0;width:100%;height:100%}
#phoneNav footer{display:flex;justify-content:space-between;gap:8px;padding:10px 17px 16px;font-size:10px;font-weight:700;border-top:1px solid #2b2434}
#phoneNav footer b{color:#ff5a9d}
#transferir .transfer-exit{display:none!important}

/* Arrival: a discreet app card over the bottom of the map once the route reaches the pin. */
#phoneNav .nav-arrival{position:absolute;left:12px;right:12px;bottom:52px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#221a2cf2;border:1px solid #3d2f4c;box-shadow:0 10px 24px #0009;opacity:var(--arrive,0);transform:translateY(calc((1 - var(--arrive,0)) * 14px))}
#phoneNav .nav-arrival i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e63e85}
#phoneNav .nav-arrival svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#phoneNav .nav-arrival div{display:flex;flex-direction:column;gap:3px;min-width:0}
#phoneNav .nav-arrival strong{font-size:13px;line-height:1.1;letter-spacing:-.02em}
#phoneNav .nav-arrival small{font-size:9px;font-weight:700;color:#b98aa6}

/* The plaza (drone take, frame 1) under the phone, with #acceso's own access shade (.55). */
#plazaHandoff{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;opacity:0;background:#08090f}
#plazaHandoff img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(var(--plaza-zoom,1))}
#plazaHandoff i{position:absolute;inset:0;opacity:.55;background:linear-gradient(90deg,#06070ad6,transparent 68%),linear-gradient(0deg,#06070a9b,transparent 38%)}
.nav-route{fill:none;stroke:#ff4d94;filter:drop-shadow(0 0 5px #ff4d94aa);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.nav-route-casing{fill:none;stroke:#130f19;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:700px){
  /* Phone UI floor: 9px CSS = ~10.4px on screen at the phone's 1.15 scale (390x844). */
  #phoneNav header{padding:20px 11px 6px;font-size:9px;gap:6px}
  #phoneNav header strong{white-space:nowrap}
  #phoneNav header span{font-size:9px;letter-spacing:0;white-space:nowrap}
  #phoneNav h3{margin:0 11px 6px;font-size:17px}
  #phoneNav footer{padding:7px 11px 10px;font-size:9px}
  #phoneNav .nav-arrival{left:8px;right:8px;bottom:38px;gap:7px;padding:7px 8px;border-radius:10px}
  #phoneNav .nav-arrival i{width:20px;height:20px}
  #phoneNav .nav-arrival svg{width:12px;height:12px}
  #phoneNav .nav-arrival strong{font-size:10px;letter-spacing:-.03em}
  #phoneNav .nav-arrival small{font-size:9px;letter-spacing:-.01em;line-height:1.15}
}

/* #acceso opens on the plaza the phone's arrival dissolved into; the old pink entry curtain would tint it. */
#acceso .access-entry{display:none!important}


/* Access headline sits low, over the crowd: the gate ticker and the concourse signs own the top and middle. */
#acceso .access-copy{top:auto!important;bottom:11vh}

/* #cielo: night office -> stars. The operar outro no longer darkens: the story stays in the office. */
#cielo .scene-sticky{background:#0b1020}
#skyVideo{display:block;width:100%;height:100%;object-fit:cover}
#operar .t15-outro{display:none!important}
/* #final sits on the same starry sky the camera ends on. */
#final.closing-scene{background:url('/assets/boxoffice/img/sky/0210.webp') center/cover no-repeat,url('/assets/boxoffice/img/sky/still-0210.webp') center/cover no-repeat,#0b1020}
#final .closing-office{display:none}
/* Copy v15d: one call to action across the page, "Agenda un demo" in sentence case like the header link. */
#final.closing-scene>p:not(.eyebrow){max-width:900px}
#final.closing-scene>a.closing-cta{display:inline-block;padding:0;background:none;color:#fff;font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.01em;text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:2px;text-underline-offset:9px}
#final.closing-scene>a.closing-cta span{display:inline-block;margin-left:10px;text-decoration:none;color:var(--volt);transition:transform .25s ease}
#final.closing-scene>a.closing-cta:hover span,#final.closing-scene>a.closing-cta:focus-visible span{transform:translate(3px,-3px)}



/* #acceso: two beats at the bottom: ticket formats (plaza), then Secure Scan (gate reader). */
#acceso .access-copy{transform:translateY(var(--access-copy-y,0px))}
#acceso .access-copy h2{margin-bottom:14px}
#acceso .access-copy>p:last-child{margin:0;line-height:1.3}
#acceso .access-copy.access-scan{opacity:var(--access-scan-opacity,0);transform:translateY(var(--access-scan-y,0px))}

/* #venue: one beat per shop: food & beverage at the food stall, merch at the merch shop. */
#venue .venue-body.venue-food{opacity:var(--venue-food-opacity,0);transform:translateY(var(--venue-food-y,0px))}
#venue .venue-body.venue-merch{opacity:var(--venue-merch-opacity,0);transform:translateY(var(--venue-merch-y,0px));left:auto;right:0;max-width:min(640px,50vw)}
/* The drone take hides .venue-visual (and its darken layer): these shades sit over the video. */
#venue .venue-shade{position:absolute;inset:0;z-index:2;pointer-events:none}
#venue .venue-shade-food{background:linear-gradient(15deg,#090b11eb 0%,#090b11a6 28%,transparent 58%);opacity:var(--venue-food-opacity,0)}
#venue .venue-shade-merch{background:linear-gradient(-15deg,#090b11eb 0%,#090b11a6 28%,transparent 58%);opacity:var(--venue-merch-opacity,0)}
@media(max-width:700px){
  #venue .venue-body.venue-merch{left:0;right:auto;max-width:none}
  #venue .venue-shade-merch{background:linear-gradient(0deg,#090b11eb 0%,#090b11a6 30%,transparent 62%)}
  #venue .venue-shade-food{background:linear-gradient(0deg,#090b11eb 0%,#090b11a6 30%,transparent 62%)}
}
/* Access headlines stay compact (max two lines at 1440 and at 390), low over the plaza floor. */
#acceso .access-copy{max-width:min(900px,calc(100vw - 44px))}
#acceso .access-copy h2{font-size:clamp(40px,5vw,76px);max-width:none}
#acceso .access-copy>p:last-child{font-size:clamp(17px,1.5vw,24px)}
/* Venue beats use the same contained scale as #acceso (max two lines, desktop and mobile). */
#venue .venue-body h2{font-size:clamp(40px,5vw,76px);max-width:none;margin-bottom:14px}
#venue .venue-body .venue-items p{font-size:clamp(17px,1.5vw,24px);max-width:min(620px,calc(100vw - 44px));line-height:1.3}
/* #operar mobile: the flat UI's own header ("ticketero. / FESTIVAL SOUND") sat under the fixed site
   header and the longer event name collided with the language toggle. Start it below the site header. */
@media(max-width:700px){
  #operar .ops-mobile-surface header{margin-top:72px}
  /* The activity block sits centred in the space under the header (it left ~50% blank below). */
  #operar .ops-mobile-surface>div{top:134px}
  #operar .ops-mobile-surface>.ops-mobile-activity{display:flex;flex-direction:column;justify-content:center}
  /* Content fades before the surface folds back into the monitor (timing-v15.js drawOps). */
  #operar .ops-mobile-surface>*{opacity:var(--ops-mobile-content,1)}
}

/* ---------- V15 pace (2026-09-25): every chapter's scroll length in one place ----------
   ~2.8-2.9 s of Blender footage per 100vh (was ~2.3) and shorter dead zones. Each chapter's
   progress is remapped in handoff-v15.js (PACE) so every beat stays on the same footage.
   #foh and #cielo are unchanged (their takes are being re-rendered). Total ~28.4 screens (was 35.6). */
main #inicio{height:190vh}
@media (max-width:700px),(max-aspect-ratio:9/10){main #inicio{height:310vh}}
main #ciudad{height:330vh}
main #mapa{height:205vh}
main #transferir{height:320vh}
main #acceso{height:220vh}
main #venue{height:240vh}
main #seat{height:130vh}
main #foh{height:540vh}
main #operar{height:330vh} /* copy v15d: summary · CRM · AI campaign on the monitor (+150vh) */
main #cielo{height:240vh} /* stars-only tail shortened (Carlos: too long black before the closing) */

/* Closing copy over the sky take (placed by handoff-v15.js from #final's own layout). */
#cielo .sky-closing{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
#cielo .sky-closing::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0f1011ed,#0f101188 80%)} /* same veil #final has */
#cielo .sky-closing>*{position:absolute}
/* #final takes over at the same spot: no second fade/slide. */
#final>:not(.closing-office):not(.closing-back){transition:none!important}
#final:not(.t15-final-in)>:not(.closing-office):not(.closing-back){transform:none!important}