/* Madison Tattoo Festival landing page (Oct 9–11, 2026). Loaded after style.css on madison-tattoo-festival.html only. */
.fest-main{overflow-x:clip}

/* Hero */
.fest-hero{position:relative;min-height:calc(100svh - 95px);display:grid;place-items:center;padding:70px max(6vw,24px) 90px;text-align:center;isolation:isolate}
.fest-hero-copy{position:relative;z-index:2;max-width:860px}
.fest-hero h1{font-size:clamp(76px,9vw,138px);line-height:.88;letter-spacing:-.06em;margin:26px auto 28px}
.fest-hero-copy>p{max-width:540px;margin:auto}
.fest-live{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;margin:0;padding:6px 6px 6px 18px;border-radius:40px;background:var(--paper);color:#111;font-size:12px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 1px #ffffff40,0 12px 40px #b02a3740;animation:fest-glow 2.8s ease-in-out infinite}
.fest-live i{flex:none;width:8px;height:8px;border-radius:50%;background:#b02a37;animation:fest-pulse 1.6s ease-out infinite}
.fest-live b{padding:9px 16px;border-radius:30px;background:#63202b;color:#fff;font-weight:600;letter-spacing:.08em;white-space:nowrap}
.fest-live .sheen{animation-delay:.6s;animation-duration:4.5s}
@keyframes fest-glow{50%{box-shadow:0 0 0 1px #ffffff70,0 12px 50px #b02a3770}}
@keyframes fest-pulse{from{box-shadow:0 0 0 0 #b02a3799}to{box-shadow:0 0 0 12px #b02a3700}}

.fest-floats{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fest-float{position:absolute;width:clamp(120px,13vw,200px);aspect-ratio:2/3;object-fit:cover;border-radius:18px;filter:saturate(.35) brightness(.62);box-shadow:0 30px 60px #000a;translate:var(--px,0) var(--py,0);transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.fest-float.f1{left:4%;top:12%;rotate:-8deg;animation:fest-bob 9s ease-in-out infinite}
.fest-float.f2{left:13%;bottom:6%;rotate:5deg;animation:fest-bob 11s ease-in-out -3s infinite}
.fest-float.f3{right:5%;top:9%;rotate:7deg;animation:fest-bob 10s ease-in-out -6s infinite}
.fest-float.f4{right:14%;bottom:4%;rotate:-5deg;animation:fest-bob 12s ease-in-out -2s infinite}
@keyframes fest-bob{50%{transform:translateY(-16px)}}

/* Countdown */
.countdown{display:flex;justify-content:center;gap:clamp(10px,1.6vw,18px);margin:42px auto 10px}
.countdown div{min-width:clamp(70px,8vw,104px);padding:16px 10px 12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(#ffffff0d,#ffffff03);backdrop-filter:blur(6px)}
.countdown span{display:block;font:500 clamp(38px,4.6vw,62px)/1 var(--serif);letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.countdown span.tick{animation:fest-tick .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fest-tick{from{opacity:.2;transform:translateY(-35%)}}
.countdown small{display:block;margin-top:8px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.countdown-note{font-size:12px;letter-spacing:.04em;margin-bottom:6px!important}
[data-phase=after] .countdown{display:none}

/* Marquee */
.fest-marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);color:#111;padding:15px 0}
.fest-marquee-track{display:flex;width:max-content;animation:fest-marquee 32s linear infinite}
.fest-marquee:hover .fest-marquee-track{animation-play-state:paused}
.fest-marquee span{font:500 clamp(26px,3vw,40px)/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;padding:0 28px}
.fest-marquee span:nth-child(even){font-style:italic;color:#63202b}
@keyframes fest-marquee{to{transform:translateX(-50%)}}

/* Weekend schedule */
.fest-days h2{margin-bottom:55px}
.day-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.day-card{position:relative;padding:30px 28px 28px;border:1px solid var(--line);border-radius:24px;background:#ffffff05;transition:transform .35s,border-color .35s,background .35s}
.day-card:hover{transform:translateY(-6px);border-color:#ffffff55}
.day-status{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:46px}
.day-card h3{font-size:clamp(44px,4.4vw,62px)}
.day-date{margin-top:8px!important}
.day-hours{margin-top:26px!important;padding-top:18px;border-top:1px solid var(--line);font-size:18px;color:var(--paper)}
.day-card.is-live{border-color:#b02a37;background:linear-gradient(160deg,#63202b55,#0c0c0c 70%)}
.day-card.is-live .day-status{color:#fff}
.day-card.is-live .day-status:before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#e04456;animation:fest-pulse 1.6s ease-out infinite}
.day-card.is-done{opacity:.45}
.venue{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin-top:38px}
.venue p{flex:1 1 320px;color:var(--paper)}
.venue small{display:block;color:var(--muted);font-size:12px}

/* Banner */
.banner-copy{display:grid;grid-template-columns:1fr minmax(0,420px);align-items:end;gap:30px 60px;margin-bottom:46px}
.banner-copy .eyebrow{margin-bottom:28px}
.banner-photo{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);box-shadow:0 40px 80px #000b;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.banner-photo:hover{transform:translateY(-4px)}
.banner-photo img{width:100%;height:auto}
.sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff24 50%,transparent 65%);transform:translateX(-120%);animation:fest-sheen 6s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes fest-sheen{30%,100%{transform:translateX(120%)}}

/* Work reel */
.fest-reel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 2px 30px;margin-bottom:22px;scrollbar-width:none;cursor:grab;outline-offset:8px}
.fest-reel::-webkit-scrollbar{display:none}
.fest-reel.dragging{cursor:grabbing;scroll-snap-type:none}
.fest-reel.dragging a{pointer-events:none}
.reel-card{flex:0 0 clamp(230px,24vw,320px);scroll-snap-align:start;position:relative;border-radius:22px;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.reel-card img{width:100%;aspect-ratio:2/3;object-fit:cover;filter:saturate(.55);transition:filter .4s,scale .6s}
.reel-card:hover img{filter:saturate(1);scale:1.04}
.reel-card span{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 14px;border-radius:14px;background:#0c0c0cbb;backdrop-filter:blur(6px);font-size:11px}

/* Booking + review */
.review-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;max-width:640px;margin:46px auto 0;padding:22px 26px;border:1px solid var(--line);border-radius:22px}
.review-cta p{flex:1 1 300px;text-align:left;font-size:13px}
.review-cta p strong{color:var(--paper);font-weight:500}
[data-phase=after] .review-cta{border-color:#b02a37;background:linear-gradient(160deg,#63202b44,transparent 70%)}
.after-only{display:none}
[data-phase=after] .after-only{display:revert}
[data-phase=after] .before-only{display:none}

@media(max-width:1000px){
 .day-cards{grid-template-columns:1fr}
 .day-card{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 20px}
 .day-status{grid-column:1/-1;margin-bottom:18px}
 .day-hours{margin:0!important;padding:0;border:0;text-align:right}
 .banner-copy{grid-template-columns:1fr}
}
@media(max-width:700px){
 .fest-hero{min-height:auto;padding:46px 20px 70px}
 .fest-hero h1{font-size:clamp(58px,17vw,78px)}
 .fest-live{flex-wrap:wrap;justify-content:center;gap:8px 10px;padding:6px 6px 6px 14px;font-size:10px;letter-spacing:.1em}
 .fest-live b{padding:8px 12px}
 .fest-float{width:92px;opacity:.55}
 .fest-float.f1{left:-24px;top:4%}
 .fest-float.f3{right:-26px;top:2%}
 .fest-float.f2,.fest-float.f4{display:none}
 .countdown{gap:8px}
 .countdown div{min-width:0;flex:1;padding:13px 4px 10px;border-radius:14px}
 .countdown small{font-size:8px;letter-spacing:.1em}
 .fest-marquee{padding:11px 0}
 .day-card{padding:22px 20px}
 .day-card h3{font-size:40px}
 .review-cta p{text-align:center}
}
@media(prefers-reduced-motion:reduce){
 .fest-float,.fest-marquee-track,.sheen,.fest-live,.fest-live i,.day-card.is-live .day-status:before{animation:none!important}
 .fest-float{translate:none!important}
 .reel-card{transform:none!important}
 .fest-marquee{overflow-x:auto}
}