/* Cypher Town – Sziget 2026 recap popup */
.ctr{--ink:#121016;--paper:#F2EEE6;--yellow:#F5C518;--indigo:#5A63D3;--red:#E8432E;--mut:rgba(242,238,230,.7);position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;font-family:"DM Sans",system-ui,sans-serif;color:var(--paper);visibility:hidden;pointer-events:none}
.ctr.on{visibility:visible;pointer-events:auto}
.ctr *{box-sizing:border-box}
.ctr-bg{position:absolute;inset:0;background:rgba(10,8,12,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.ctr-bg:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(245,197,24,.16) 1.2px,transparent 1.4px);background-size:14px 14px;mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 75%)}
.ctr.on .ctr-bg{opacity:1}

.ctr-wrap{position:relative;width:min(680px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);perspective:1200px}
.ctr-card{position:relative;background:var(--ink);border:3px solid var(--paper);border-radius:6px;box-shadow:10px 10px 0 var(--indigo),10px 10px 0 3px var(--paper);max-height:inherit;overflow:auto;overscroll-behavior:contain;transform:translateY(40px) rotate(-3deg) scale(.92);opacity:0;transition:transform .55s cubic-bezier(.2,1.4,.3,1),opacity .3s;transform-style:preserve-3d;scrollbar-width:thin}
.ctr.on .ctr-card{transform:translateY(0) rotate(-.6deg) scale(1);opacity:1}
.ctr-card.tilt{transition:transform .12s linear,opacity .3s}

/* tape + stickers */
.ctr-tape{position:absolute;top:-16px;left:22px;z-index:3;background:var(--yellow);color:var(--ink);font:400 15px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:9px 14px 8px;transform:rotate(-4deg);box-shadow:0 3px 0 rgba(0,0,0,.35);clip-path:polygon(3% 0,100% 4%,97% 100%,0 94%)}
.ctr-x{position:absolute;top:10px;right:10px;z-index:4;width:42px;height:42px;border-radius:50%;border:2px solid var(--paper);background:var(--ink);color:var(--paper);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .2s}
.ctr-x:hover,.ctr-x:focus-visible{background:var(--yellow);color:var(--ink);transform:rotate(90deg)}

.ctr-head{padding:34px 26px 14px;position:relative}
.ctr-kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.ctr-kick i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(232,67,46,.6);animation:ctrPulse 1.6s infinite}
.ctr-title{margin:6px 0 0;font:400 clamp(2.6rem,1.6rem + 5vw,4.6rem)/.88 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--paper)}
.ctr-title span{display:inline-block;color:transparent;-webkit-text-stroke:2px var(--yellow);text-shadow:5px 5px 0 var(--indigo);transform:rotate(-2deg);margin-left:.12em}
.ctr-lead{margin:12px 0 0;max-width:52ch;color:var(--mut);font-size:15px;line-height:1.5}

/* video facade */
.ctr-vid{position:relative;margin:6px 26px 0;aspect-ratio:16/9;border:3px solid var(--paper);border-radius:4px;overflow:hidden;background:#000;transform:rotate(.6deg)}
.ctr-vid img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) contrast(1.05);transition:transform .6s,filter .3s}
.ctr-vid:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,16,22,.75));pointer-events:none}
.ctr-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ctr-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;border:0;background:none;cursor:pointer;color:var(--paper);font:400 22px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:0}
.ctr-vinyl{width:88px;height:88px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1d1d1d 2px 4px);border:2px solid #000;box-shadow:0 8px 24px rgba(0,0,0,.6);position:relative;display:grid;place-items:center;animation:ctrSpin 3.2s linear infinite}
.ctr-vinyl:before{content:"";width:36px;height:36px;border-radius:50%;background:var(--yellow)}
.ctr-vinyl:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-30%,-50%);border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.ctr-play b{background:var(--ink);padding:8px 12px 7px;border:2px solid var(--paper);transform:rotate(-3deg);font-weight:400}
.ctr-vid:hover img{transform:scale(1.04)}
.ctr-vid:hover .ctr-vinyl{animation-duration:.9s}
.ctr-play:focus-visible{outline:3px solid var(--yellow);outline-offset:-6px}

/* ticker */
.ctr-tick{margin:22px 0 0;background:var(--yellow);color:var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg) scale(1.03);border-block:3px solid var(--ink)}
.ctr-tick div{display:inline-block;padding:9px 0 8px;font:400 18px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.05em;animation:ctrMarq 22s linear infinite}
.ctr-tick span{padding:0 14px}
.ctr-tick em{font-style:normal;color:var(--indigo)}

/* actions */
.ctr-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:22px 26px 26px}
.ctr-sub{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:16px;padding:14px 20px;border:3px solid var(--paper);border-radius:4px;box-shadow:5px 5px 0 var(--paper);transition:transform .15s,box-shadow .15s}
.ctr-sub:hover,.ctr-sub:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--yellow);outline:none}
.ctr-sub:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--paper)}
.ctr-sub svg{width:24px;height:24px;flex:0 0 auto}
.ctr-note{flex:1 1 180px;color:var(--mut);font-size:13px;line-height:1.4}
.ctr-later{background:none;border:0;color:var(--mut);text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:14px;cursor:pointer;padding:6px 0}
.ctr-later:hover,.ctr-later:focus-visible{color:var(--paper)}

/* sticker that wiggles */
.ctr-stk{position:absolute;right:18px;top:62px;z-index:2;width:86px;height:86px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;text-align:center;font:400 14px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;border:3px solid var(--paper);transform:rotate(12deg);cursor:default;user-select:none;transition:transform .3s cubic-bezier(.2,1.6,.3,1)}
.ctr-stk:hover{transform:rotate(-8deg) scale(1.08)}
.ctr-stk small{display:block;font-size:24px;color:var(--yellow);margin-top:2px}

/* burst on subscribe click */
.ctr-burst{position:fixed;z-index:2147483001;pointer-events:none;font:400 22px/1 Anton,Impact,sans-serif;color:var(--yellow);text-transform:uppercase;text-shadow:3px 3px 0 #000;animation:ctrBurst .9s ease-out forwards}

@keyframes ctrSpin{to{transform:rotate(360deg)}}
@keyframes ctrMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ctrPulse{70%{box-shadow:0 0 0 8px rgba(232,67,46,0)}100%{box-shadow:0 0 0 0 rgba(232,67,46,0)}}
@keyframes ctrBurst{from{opacity:1;transform:translate(-50%,0) scale(.8) rotate(-6deg)}to{opacity:0;transform:translate(-50%,-70px) scale(1.25) rotate(4deg)}}

@media (max-width:560px){
	.ctr{padding:12px;align-items:end}
	.ctr-card{box-shadow:6px 6px 0 var(--indigo),6px 6px 0 3px var(--paper)}
	.ctr-head{padding:30px 18px 12px}
	.ctr-vid{margin:4px 14px 0}
	.ctr-act{padding:18px}
	.ctr-sub{width:100%;justify-content:center}
	.ctr-stk{display:none}
	.ctr-vinyl{width:66px;height:66px}
	.ctr-lead{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
	.ctr-card,.ctr-bg{transition:opacity .2s!important}
	.ctr-vinyl,.ctr-tick div,.ctr-kick i{animation:none!important}
}