/* The magic layer (with magic.js and search.js).
   Halo is the one rare material: a quiet edge that a single lime light sweeps around, used only on the search fields and the open
   card. Everything else is behaviour: icons, reveals, physics. html.motion-ok = motion allowed;
   html.magic-on = motion allowed + fine pointer + wide screen (desktop flourishes). */

/* ---------- Halo ---------- */
@property --halo-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.halo{position:relative;isolation:isolate}
.halo::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
 background:conic-gradient(from var(--halo-a),transparent 0deg,transparent 250deg,#96ea1100 262deg,#96ea11 318deg,#e6ffb8 334deg,#96ea1100 352deg,transparent 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 opacity:0;transition:opacity .45s;animation:halo-spin 3.6s linear infinite;animation-play-state:paused}
.halo:hover::after,.halo:focus-within::after,.halo.is-focused::after{opacity:1;animation-play-state:running}
@keyframes halo-spin{to{--halo-a:360deg}}
html:not(.motion-ok) .halo::after{animation:none;background:none;border:1.5px solid #96ea1166;padding:0}

/* Search fields */
.search-field.halo-field{position:relative;gap:12px;padding:15px 18px;border-radius:14px;background:#0d1a31e6;border:1px solid #ffffff1f;box-shadow:0 10px 28px #0005,inset 0 1px #ffffff0d;transition:box-shadow .35s,border-color .35s,background .35s}
.search-field.halo-field:focus-within{outline:0;border-color:#96ea1144;background:#0f1e38;box-shadow:0 0 0 4px #96ea1114,0 14px 34px #0006}
.halo-field>.svg-icon{width:20px;height:20px;color:var(--lime);flex:none}
.halo-field input{font-size:16px!important;position:relative;z-index:1}
.halo-field input::placeholder{color:transparent}
.halo-ghost{position:absolute;left:50px;right:90px;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;overflow:hidden;white-space:nowrap;color:#8ea2bd;font-size:16px}
.halo-field.has-value:not(.is-clearing) .halo-ghost{display:none}
.halo-field.is-clearing input{color:transparent}
.halo-field.is-clearing .halo-ghost{color:#fff}
.halo-line span{display:inline-block}
.motion-ok .halo-line span{animation:ghost-in .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 16ms)}
.motion-ok .halo-line.out span{animation:ghost-out .32s ease-in both;animation-delay:calc(var(--i) * 8ms)}
.motion-ok .halo-line.dissolve span{animation:ghost-dissolve .42s ease-in both;animation-delay:calc(var(--i) * 22ms)}
@keyframes ghost-in{from{opacity:0;filter:blur(6px);transform:translateY(6px)}}
@keyframes ghost-out{to{opacity:0;filter:blur(6px);transform:translateY(-6px)}}
@keyframes ghost-dissolve{to{opacity:0;filter:blur(8px);transform:translateX(10px) scale(.8)}}
.halo-clear{position:relative;z-index:2;display:none;align-items:center;min-height:32px;padding:5px 12px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0f;color:#dfe8f5;font-size:14px;font-weight:800;cursor:pointer}
.halo-clear:hover{border-color:var(--lime);color:#fff}
.halo-field.has-value .halo-clear{display:inline-flex}

/* ---------- Split-flap countdown ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.countdown-unit b{display:flex;gap:.08em;justify-content:center;perspective:500px;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--lime)}
.flap{position:relative;display:inline-block;width:.8em;height:1.12em;line-height:1.12em;text-align:center;letter-spacing:0;font-variant-numeric:tabular-nums;border-radius:.12em;box-shadow:0 .06em .14em #0007,inset 0 0 0 1px #ffffff12}
.flap-half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#17284a;backface-visibility:hidden}
.flap-top{top:0;border-radius:.12em .12em 0 0;transform-origin:50% 100%}
.flap-bottom{bottom:0;border-radius:0 0 .12em .12em;transform-origin:50% 0;background:#132341}
.flap-half i{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-style:normal;letter-spacing:0;text-indent:0}
.flap-top i{top:0}.flap-bottom i{bottom:0}
.flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#050b17;z-index:4;box-shadow:0 1px #ffffff0d}
.flap-fold{z-index:3}
.fold-out{animation:fold-out .32s cubic-bezier(.55,0,.75,.4) forwards;box-shadow:inset 0 -14px 18px -12px #0009}
.fold-in{transform:rotateX(90deg);animation:fold-in .32s .3s cubic-bezier(.25,.6,.4,1) forwards}
@keyframes fold-out{to{transform:rotateX(-90deg);filter:brightness(.7)}}
@keyframes fold-in{to{transform:rotateX(0)}}

/* ---------- Headings arrive word by word ---------- */
.kinetic .kw{font-style:inherit}
.motion-ok .kinetic .kw{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.42em) rotate(1.5deg);transform-origin:0 100%}
.motion-ok .kinetic.words-in .kw{animation:word-in .85s cubic-bezier(.2,.95,.3,1.08) both;animation-delay:calc(var(--i) * 55ms + 60ms)}
@keyframes word-in{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- Hand-drawn marks ---------- */
.has-scribble{position:relative;display:inline-block}
.hero-title-story.has-scribble:after{display:none}
.scribble{position:absolute;left:-3%;width:106%;bottom:-.2em;height:.3em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--lime);stroke-width:3.4px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.motion-ok .has-scribble:not(.is-drawn) .scribble path{stroke-dashoffset:1}
.motion-ok .has-scribble .scribble path{transition:stroke-dashoffset 1.1s .35s cubic-bezier(.5,0,.2,1)}
.final-cta .scribble path{stroke:#0d2f52;stroke-width:3px}
.intro-grid .scribble path{stroke:#96ea11b3;stroke-width:2.6px}

/* ---------- Play physics ---------- */
.roll-button .svg-icon{transform-origin:50% 60%}
.hero-title-story .rp{display:inline-block;will-change:transform}
html.magic-on .app-card.is-lit::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx) var(--my),#ffffff14,transparent 62%)}
html.magic-on .app-card.is-lit:not(.expanded),html.magic-on .guest-card.is-lit,html.magic-on .highlight-card.is-lit,html.magic-on .maker-card.is-lit{transform:perspective(1000px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)) translateY(-6px)!important;transition:transform .18s ease-out,border-color .3s,box-shadow .5s!important}
html.card-morphing .app-card{transform:none!important}
/* The open card carries the halo, sweeping slowly. */
.app-card.expanded::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--halo-a),transparent 0deg,transparent 250deg,#96ea1100 262deg,#96ea11 318deg,#e6ffb8 334deg,#96ea1100 352deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:halo-spin 6s linear infinite}
html:not(.motion-ok) .app-card.expanded::after{display:none}
/* Primary ticket buttons breathe a lime halo under the pointer. */
html.magic-on .hero .button[data-ticket]:hover,html.magic-on .final-cta .button:hover,html.magic-on .header .button-small:hover{animation:ticket-glow 1.6s ease-in-out infinite}
@keyframes ticket-glow{0%,100%{box-shadow:0 8px 0 #47780a,0 0 0 0 #96ea1155}50%{box-shadow:0 8px 0 #47780a,0 0 0 9px #96ea1100,0 0 34px 2px #96ea1155}}
.header .button-small:hover{animation-name:none}


/* ---------- Icons, everywhere they mean something ---------- */
.ico-before::before,header nav a::before,.text-link::before,.section-heading .eyebrow::before,.visit-grid>.eyebrow::before,.visit .eyebrow::before,.faq-section .eyebrow::before,.final-cta .eyebrow::before,.intro>.eyebrow::before,.finder .eyebrow::before,.companion-copy .eyebrow::before,.filter-chips button::before,.programme-day-tabs button::before,.footer-top>a:not(.brand)::before,.footer-bottom a::before,.button[data-ticket]::before{
 content:'';display:inline-block;flex:none;width:1.15em;height:1.15em;background:currentColor;-webkit-mask:var(--ico,url('../svg/d20.svg')) center/contain no-repeat;mask:var(--ico,url('../svg/d20.svg')) center/contain no-repeat;vertical-align:-.2em}
header nav a{display:inline-flex;align-items:center;gap:8px}
header nav a::before{width:17px;height:17px;color:var(--sky);opacity:.85;transition:transform .35s cubic-bezier(.3,1.6,.5,1),color .2s}
header nav a:hover::before,header nav a.is-current::before{color:var(--lime);transform:rotate(-12deg) scale(1.15)}
header nav a[href$="#experiences"]{--ico:url('../svg/d20.svg')}
header nav a[href*="programme"],header nav a[href$="#programme"],header nav a[href$="#highlights"]{--ico:url('../svg/date.svg')}
header nav a[href*="exhibitors"]{--ico:url('../svg/people.svg')}
header nav a[href$="#visit"]{--ico:url('../svg/location.svg')}
.text-link::before{width:18px;height:18px;color:var(--lime);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.text-link:hover::before{transform:rotate(-10deg) scale(1.18)}
.text-link[href*="programme"]{--ico:url('../svg/date.svg')}
.text-link[href*="exhibitors"]{--ico:url('../svg/people.svg')}
.text-link[href$="#experiences"]{--ico:url('../svg/d20.svg')}
.text-link[href^="mailto:"]{--ico:url('../svg/partner.svg')}
.text-link[href*="maps"]{--ico:url('../svg/location.svg')}
.text-link[href$="../"],.text-link[href="../"]{--ico:url('../svg/ttm%20icon.svg')}
#quiz-open{--ico:url('../svg/target.svg')}
#calendar{--ico:url('../svg/date.svg')}
.experience-copy .text-link{--ico:url('../svg/payment.svg')}
.section-heading .eyebrow::before,.visit .eyebrow::before,.faq-section .eyebrow::before,.final-cta .eyebrow::before,.intro>.eyebrow::before,.finder .eyebrow::before,.companion-copy .eyebrow::before{width:1.35em;height:1.35em;margin-right:10px;vertical-align:-.35em}
#experiences .eyebrow{--ico:url('../svg/d20.svg')}
#highlights .eyebrow{--ico:url('../svg/trophy.svg')}
#guests .eyebrow{--ico:url('../svg/game%20designers.svg')}
#programme .eyebrow{--ico:url('../svg/date.svg')}
#exhibitors .eyebrow{--ico:url('../svg/people.svg')}
.visit .eyebrow{--ico:url('../svg/location.svg')}
.faq-section .eyebrow{--ico:url('../svg/lamp.svg')}
.final-cta .eyebrow{--ico:url('../svg/chair.svg')}
.intro>.eyebrow{--ico:url('../svg/table.svg')}
.finder .eyebrow{--ico:url('../svg/energy.svg')}
.companion-copy .eyebrow{--ico:url('../svg/camera.svg')}
.filter-chips button,.programme-day-tabs button{display:inline-flex;align-items:center;gap:8px}
.filter-chips button::before,.programme-day-tabs button::before{width:16px;height:16px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.filter-chips button:hover::before,.programme-day-tabs button:hover::before,.filter-chips button[aria-pressed=true]::before{transform:scale(1.18) rotate(-8deg)}
[data-filter="All"],[data-programme-type="All"],[data-tournament-cat="All"]{--ico:url('../svg/ttm%20shape.svg')}
[data-filter="Publishers"],[data-tournament-cat="Board Games"]{--ico:url('../svg/boardgames.svg')}
[data-filter="Artists"]{--ico:url('../svg/artist.svg')}
[data-filter="Designers"]{--ico:url('../svg/game%20designers.svg')}
[data-filter="TCG Marketplace"],[data-tournament-cat="TCG"]{--ico:url('../svg/tcg.svg')}
[data-filter="Shops"]{--ico:url('../svg/partner.svg')}
[data-filter="Food & Beverages"]{--ico:url('../svg/F%26B.svg')}
[data-filter="Games"]{--ico:url('../svg/d20.svg')}
[data-programme-type="Main Stage"]{--ico:url('../svg/media.svg')}
[data-programme-type="Workshop Area"]{--ico:url('../svg/puzzles.svg')}
[data-programme-type="Tournaments"]{--ico:url('../svg/trophy.svg')}
[data-tournament-cat="Classics"]{--ico:url('../svg/classics.svg')}
[data-tournament-cat="Minis"]{--ico:url('../svg/miniatures.svg')}
.programme-day-tabs button,[data-programme-day]{--ico:url('../svg/date.svg')}
.footer-top>a:not(.brand),.footer-bottom a{gap:8px}
.footer-top>a[href*="instagram"]{--ico:url('../svg/instagram.svg')}
.footer-top>a[href^="mailto:"]{--ico:url('../svg/partner.svg')}
.footer-bottom a[href*="privacy"]{--ico:url('../svg/shield.svg')}
.button[data-ticket]{gap:10px}
.button[data-ticket]::before{--ico:url('../svg/payment.svg');width:1.25em;height:1.25em;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.button[data-ticket]:hover::before{transform:rotate(-14deg) scale(1.15)}
.mobile-ticket .button[data-ticket]::before{display:none}

@media(prefers-reduced-motion:reduce){.halo::after,.app-card.expanded::after{animation:none!important}.fold-out,.fold-in{animation:none!important;display:none}}
.tournament-chips[hidden],.filter-chips[hidden]{display:none!important}
[hidden]{display:none!important}
.countdown .countdown-title{color:#fff}
.countdown-unit b{gap:.1em}