/* ═══════════════════════════════════════════════════════════
   THE CONTENT CUP — motion + graphics layer
   Loaded by /contentcup, /cup-partners, /cup-venue on top of
   the poster system. Everything here is typographic or
   geometric: kinetic type, drawn stripes, halftone dots,
   a rotating seal. No glow, no gradient, no blur, no photos.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. hero wordmark: line-by-line mask reveal ── */
.wm-line{animation:wmIn .95s cubic-bezier(.2,.85,.25,1) both}
.wm-1{animation-delay:.10s}
.wm-2{animation-delay:.28s}
@keyframes wmIn{
  from{clip-path:inset(0 0 100% 0);transform:translateY(.10em)}
  to  {clip-path:inset(0 0 -12% 0);transform:none}
}

/* ── 2. hero edge bars draw in ── */
.blk-1{transform-origin:top;animation:barY 1.05s cubic-bezier(.2,.85,.25,1) .5s both}
.blk-2{transform-origin:bottom;animation:barY 1.05s cubic-bezier(.2,.85,.25,1) .68s both}
@keyframes barY{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── 3. hero rows wipe in under the wordmark ── */
.hero-data,.hero-cta,.hero-top{animation:fadeUp .8s cubic-bezier(.2,.85,.25,1) both}
.hero-top{animation-delay:.05s}
.hero-data{animation-delay:.52s}
.hero-cta{animation-delay:.64s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── 4. the rotating seal ── */
.seal{position:absolute;right:clamp(60px,6.5vw,104px);bottom:clamp(26px,6vh,66px);z-index:2;
  width:clamp(112px,10.5vw,164px);aspect-ratio:1;pointer-events:none;
  animation:fadeUp .8s cubic-bezier(.2,.85,.25,1) .8s both}
.seal .ring{width:100%;height:100%;animation:spin 24s linear infinite}
.seal .ring text{font-family:var(--f);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:13.2px;letter-spacing:.138em;fill:var(--green);text-transform:uppercase}
.seal .pip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34%;height:34%;background:var(--green);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.seal{display:none}}

/* ── 5. animated diagonal stripe bands ──
   period along the 45deg gradient axis is 36px, so a horizontal
   translate of 36 / cos(45deg) = 50.912px loops seamlessly. */
.stripes{position:relative;overflow:hidden;height:clamp(24px,3vw,42px);
  border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink);background:var(--ink)}
.stripes::before{content:'';position:absolute;top:-10px;bottom:-10px;left:-60px;right:-60px;
  background:repeating-linear-gradient(45deg,var(--ink) 0 18px,var(--green) 18px 36px);
  animation:stripe 1.9s linear infinite}
.stripes.gold::before{background:repeating-linear-gradient(45deg,var(--ink) 0 18px,var(--gold) 18px 36px)}
.stripes.hot::before {background:repeating-linear-gradient(45deg,var(--ink) 0 18px,var(--pink) 18px 36px)}
.stripes.rev::before{animation-direction:reverse}
@keyframes stripe{from{transform:translateX(0)}to{transform:translateX(50.912px)}}

/* ── 6. halftone dot field on ink sections ── */
.block.ink,.clip,.apply{position:relative}
.block.ink > .wrap,.clip > .wrap,.apply > .wrap{position:relative;z-index:1}
.dots{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,241,232,.11) 1.15px,transparent 1.25px);
  background-size:15px 15px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}

/* ── 7. giant ghost numerals behind the day blocks ── */
.day{position:relative;overflow:hidden}
.day > .wrap{position:relative;z-index:1}
.day-ghost{position:absolute;right:-5%;top:50%;z-index:0;pointer-events:none;user-select:none;
  transform:translateY(-50%);
  font-variation-settings:'wdth' 125,'wght' 900;font-size:clamp(11rem,31vw,27rem);
  line-height:.66;letter-spacing:-.055em;color:rgba(11,11,12,.085)}
@media(max-width:820px){.day-ghost{font-size:44vw;right:-4%}}

/* ── 8. kinetic headlines: per-character stagger ── */
.kin .wd{display:inline-block;white-space:nowrap}
.kin .ch{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.85,.25,1)}
.kin.in .ch{opacity:1;transform:none}
/* the block wrapper only fades, so it never fights the character stagger */
.block-head.rv,.block-head.rv.in{transform:none}

/* ── 9. scroll drift on the biggest type ── */
.drift{will-change:transform}

/* ── 10. rows and packages answer the cursor ── */
.row,.pkg{position:relative}
.row::after,.pkg::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--pink);transition:width .38s cubic-bezier(.2,.85,.25,1)}
.ink .row::after,.ink .pkg::after,.clip .row::after{background:var(--green)}
.row:hover::after,.pkg:hover::after{width:100%}
.pkg .own{transition:background .18s linear,color .18s linear}
.pkg:hover .own{background:currentColor}
.pkg:hover .own{color:var(--ink)}
.ink .pkg:hover .own{background:var(--green);color:var(--ink)}
.pkg.crown:hover .own{background:var(--ink);color:var(--green)}

/* ── 11. the facts strip ticks up cell by cell ── */
.fact{transition:background .2s linear}
.fact:hover{background:rgba(11,11,12,.05)}
.ink .fact:hover{background:rgba(244,241,232,.05)}

/* ── 12. reversed marquee, so two tickers never scroll in lockstep ── */
.tick.rev .tick-track{animation-direction:reverse}

/* ── respect the setting ── */
@media(prefers-reduced-motion:reduce){
  .wm-line,.blk-1,.blk-2,.hero-top,.hero-data,.hero-cta,.seal{animation:none}
  .seal .ring,.stripes::before{animation:none}
  .kin .ch{opacity:1;transform:none;transition:none}
  .drift{transform:none !important}
}