/* hero-ticket.css — DOM ticket, tilt only (no paper bend) */
.hero-ticket-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100svh !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 10vh 4vw 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 12 !important;
  background: transparent !important;
  perspective: 800px !important;
  perspective-origin: 50% 38% !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
  /* GPU layer only while fading/hovering — saves VRAM */
  will-change: auto;
  contain: layout paint;
}
.hero-ticket-stage.is-visible { will-change: transform; }
.hero-ticket-stage.has-hover { will-change: transform; }
.hero-ticket-stage.is-visible { opacity: 1; transform: translateY(0); }
.hero-ticket {
  --paper: #f3f1ec; --ink: #0a0a0a; --muted: #8a8883;
  position: relative;
  width: min(920px, 92vw);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: stretch;
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
  will-change: auto;
  contain: layout paint style;
  transform: translate3d(var(--hx,0), var(--hy,0), 0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: box-shadow 0.35s ease, transform 0.42s cubic-bezier(.16,1,.3,1);
  backface-visibility: hidden;
}
.hero-ticket-stage.is-visible.has-hover .hero-ticket { box-shadow: 0 28px 80px rgba(0,0,0,.52), 0 8px 22px rgba(0,0,0,.38); }
/* idle: no CSS animation — JS drives the return, so no snap */
#heroNewStage,#heroStars,.hero-stage,.hero-stars,.ref-stage { display:none !important; }
.ht-serr{position:absolute;top:-2px;bottom:-2px;width:10px;background-image:radial-gradient(circle 5px at 50% 10px,#000 5px,transparent 5.6px);background-size:10px 20px;background-repeat:repeat-y;z-index:5;pointer-events:none}
.ht-serr--left{left:-5px}.ht-serr--right{right:-5px}
.ht-notch{position:absolute;width:30px;height:30px;background:#000;border-radius:50%;left:73.5%;z-index:6;pointer-events:none}
.ht-notch--top{top:-15px;transform:translateX(-50%)}.ht-notch--bottom{bottom:-15px;transform:translateX(-50%)}
.ht-main{flex:0 0 73.5%;max-width:73.5%;display:flex;gap:clamp(14px,2.6vw,30px);padding:clamp(16px,2.6vw,30px) clamp(14px,2.4vw,28px);align-items:stretch;min-width:0}
.ht-photo{flex:0 0 27%;border:1.5px solid rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:8px;min-height:clamp(140px,22vw,220px);background:var(--paper)}
.ht-photo span{display:block;width:100%;height:100%;min-height:120px}
.ht-info{flex:1;min-width:0;display:flex;flex-direction:column}
.ht-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:clamp(9px,1.15vw,13px);letter-spacing:.35em;font-weight:500;white-space:nowrap}
.ht-top .ht-no{letter-spacing:.08em}
.ht-title{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;font-size:clamp(34px,6.2vw,72px);line-height:.92;letter-spacing:.005em;margin:6px 0 auto;text-transform:uppercase}
.ht-bottom{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);margin-top:14px}
.ht-bottom label{display:block;font-size:clamp(9px,1.1vw,12px);letter-spacing:.45em;color:var(--muted);font-weight:500;margin-bottom:6px}
.ht-bottom strong{font-size:clamp(13px,1.7vw,19px);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.ht-admit{margin-left:auto;font-family:"Anton","Arial Narrow",Impact,sans-serif;font-size:clamp(18px,2.6vw,30px);letter-spacing:.02em;white-space:nowrap}
.ht-divider{flex:0 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,17px);padding:18px 0}
.ht-divider i{width:clamp(7px,1vw,11px);height:clamp(7px,1vw,11px);border-radius:50%;background:#000;display:block}
.ht-stub{flex:1;display:flex;align-items:stretch;gap:clamp(8px,1.4vw,16px);padding:clamp(16px,2.4vw,26px) clamp(10px,1.6vw,18px);min-width:0}
.ht-stub-title{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Anton","Arial Narrow",Impact,sans-serif;font-size:clamp(20px,3vw,34px);line-height:1;letter-spacing:.02em;white-space:nowrap}
.ht-stub-sub{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(10px,1.3vw,14px);letter-spacing:.35em;color:#3d3d3d;white-space:nowrap;align-self:center}
.ht-barcode{display:flex;align-items:center;justify-content:center;height:100%;min-height:clamp(140px,22vw,220px);margin-left:auto;overflow:hidden;min-width:88px;flex:0 0 88px;background:transparent}
.ht-barcode img{width:100%;height:100%;object-fit:contain;display:block;}
@media(max-width:640px){
  .hero-ticket-stage{
    position:absolute !important;
    height:100% !important;
    height:100svh !important;
    padding:calc(64px + 15vh) 12px 0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-direction:column !important;
    gap:1vh !important;
  }
  /* fluid: 12px gutters on each side, never wider than viewport */
  .hero-ticket{width:calc(100vw - 24px);max-width:380px;margin:0 auto;overflow:hidden}
  .ht-main,.ht-stub,.ht-info,.ht-photo,.ht-divider{min-width:0}
  .ht-main{flex:1 1 auto;max-width:none;gap:8px;padding:10px 8px 10px 10px}
  .ht-photo{flex:0 0 30%;min-height:90px;padding:4px}
  .ht-photo img{object-fit:cover}
  .ht-info{flex:1 1 auto}
  .ht-title{font-size:clamp(18px,6vw,26px);line-height:1.02;word-break:keep-all}
  .ht-top{letter-spacing:.14em;font-size:6px;white-space:normal}
  .ht-top .ht-no{white-space:nowrap}
  .ht-bottom{margin-top:6px;gap:8px;flex-wrap:wrap}
  .ht-bottom label{font-size:6px;margin-bottom:2px;letter-spacing:.3em}
  .ht-bottom strong{font-size:10px}
  .ht-divider{padding:10px 0;gap:8px;flex:0 0 auto}
  .ht-divider i{width:5px;height:5px}
  .ht-stub{flex:0 0 auto;padding:8px 6px;gap:5px}
  .ht-stub-title{font-size:13px}
  .ht-stub-sub{font-size:7px;letter-spacing:.25em}
  .ht-barcode{min-width:40px;flex:0 0 40px;min-height:90px}
  .ht-notch{left:70%;width:22px;height:22px}
  .ht-notch--top{top:-11px}.ht-notch--bottom{bottom:-11px}
}
/* extra-small phones (Samsung 360px, older 320-375px): tighten further */
@media(max-width:380px){
  .hero-ticket-stage{padding-left:10px !important;padding-right:10px !important}
  .hero-ticket{width:calc(100vw - 20px)}
  .ht-main{gap:5px;padding:7px 5px 7px 7px}
  .ht-photo{flex-basis:28%;min-height:70px;padding:2px}
  .ht-title{font-size:clamp(16px,5.6vw,22px)}
  .ht-top{font-size:5px;letter-spacing:.12em}
  .ht-bottom strong{font-size:9px}
  .ht-bottom{gap:6px}
  .ht-stub{padding:7px 5px;gap:4px}
  .ht-stub-title{font-size:11px}
  .ht-stub-sub{font-size:6px;letter-spacing:.2em}
  .ht-barcode{min-width:34px;flex-basis:34px;min-height:70px}
  .ht-divider i{width:4px;height:4px}
  .ht-notch{left:69%;width:18px;height:18px}
  .ht-notch--top{top:-9px}.ht-notch--bottom{bottom:-9px}
}
@media(min-width:641px) and (max-width:1024px){
  .hero-ticket-stage{
    padding:calc(64px + 11vh) 4vw 0 !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .hero-ticket{margin:0 auto}
  /* hero copy right under the ticket on tabs + bigger text */
  div.z-\[10\].absolute.flex.flex-col{
    bottom:170px !important;
    top:auto !important;
  }
  div.z-\[10\].absolute.flex.flex-col > p:first-child{
    font-size:34px !important;
    line-height:1.08 !important;
  }
  div.z-\[10\].absolute.flex.flex-col > p:nth-child(2){
    font-size:18px !important;
  }
  /* shrink hero so the works marquee peeks at the bottom */
  div.w-screen.h-\[100dvh\].relative{
    height:82dvh !important;
    min-height:0 !important;
  }
}
/* desktop (>1600px): nudge ticket down so it clears the header */
@media(min-width:1601px){
  .hero-ticket-stage{
    padding-top:18vh !important;
  }
}
/* laptops + MacBooks (1025-1600px): ticket 20% smaller so it clears header buttons.
   Desktop (>1600px) untouched. */
@media(min-width:1025px) and (max-width:1600px){
  .hero-ticket{width:min(736px,74vw)}
  .ht-main{gap:clamp(12px,2vw,24px);padding:clamp(13px,2.1vw,24px) clamp(11px,1.9vw,22px)}
  .ht-title{font-size:clamp(27px,5vw,58px)}
  .ht-photo{min-height:clamp(112px,17.6vw,176px)}
  .ht-barcode{min-height:clamp(112px,17.6vw,176px)}
  .ht-bottom strong{font-size:clamp(11px,1.36vw,15px)}
  .ht-admit{font-size:clamp(15px,2.1vw,24px)}
  .ht-stub-title{font-size:clamp(16px,2.4vw,27px)}
}
/* short tabs / landscape (low height): compact so text never overlaps ticket */
@media(min-width:641px) and (max-width:1180px) and (max-height:720px){
  .hero-ticket-stage{
    padding:70px 4vw 0 !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .hero-ticket{width:min(560px,80vw);margin:0 auto}
  .ht-main{gap:12px;padding:12px 12px}
  .ht-photo{min-height:110px}
  .ht-title{font-size:clamp(24px,3.4vw,36px)}
  .ht-barcode{min-height:110px}
  div.z-\[10\].absolute.flex.flex-col{
    bottom:10px !important;
    top:auto !important;
  }
  div.z-\[10\].absolute.flex.flex-col > p:first-child{
    font-size:24px !important;
    line-height:1.08 !important;
  }
  div.z-\[10\].absolute.flex.flex-col > p:nth-child(2){
    font-size:15px !important;
  }
  div.w-screen.h-\[100dvh\].relative{
    height:88dvh !important;
    min-height:0 !important;
  }
}