/* Gen-Z mode for the TicketEx website. tg-home.js sets <html data-genz="on"> when the navbar switch is on;
   every themed rule below is scoped to that attribute. The switch itself is styled by the root layout patch
   (web/patches/patch-home.js), so it looks right before this file has loaded. The motion layer (switch-over, hero
   scene, scroll reveal, tilt, magnetic buttons) is in tg-genz-fx.css / tg-genz-fx.js. */

/* ---------- Theme: palette ---------- */
html[data-genz="on"]{
  --color-brand-50:#fdf0ff;--color-brand-100:#fae0ff;--color-brand-200:#f5c2ff;--color-brand-300:#ee93ff;--color-brand-400:#e25bff;
  --color-brand-500:#d12bff;--color-brand-600:#b700f5;--color-brand-700:#9400c7;--color-brand-800:#6f0296;--color-brand-900:#4a0566;--color-brand-950:#26033a;
  --color-coral-50:#fff0f7;--color-coral-100:#ffdcec;--color-coral-400:#ff6bb5;--color-coral-500:#ff2e93;--color-coral-600:#e6107a;
  --tg-lime:#c6ff3d;--tg-ink:#0f1222;--tg-grad:linear-gradient(100deg,#b700f5 0%,#ff2e93 55%,#ff8a3d 100%);
}

html[data-genz="on"] ::selection{background:var(--tg-lime);color:var(--tg-ink)}

/* ---------- Headings and dynamic text ---------- */
html[data-genz="on"] .section-title,html[data-genz="on"] .tgDestTitle{background:var(--tg-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tgGenzShift 6s ease-in-out infinite alternate;letter-spacing:-.03em;padding-bottom:.08em}
html[data-genz="on"] .tgHero h1 span:not(.tgw){background-image:linear-gradient(100deg,#c6ff3d,#ff6bb5,#ee93ff,#c6ff3d);background-size:300% 100%;animation:tgGenzShift 5s linear infinite alternate}
@keyframes tgGenzShift{from{background-position:0 50%}to{background-position:100% 50%}}
html[data-genz="on"] .tgDestEyebrow,html[data-genz="on"] section p.uppercase.text-brand-600{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--tg-lime);color:var(--tg-ink);transform:rotate(-2deg);font-weight:800}
/* text that was just swapped pops in */
.tgGenzSwap{animation:tgGenzSwap .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tgGenzSwap{from{opacity:0;transform:translateY(.5em) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
html[data-genz="on"] .tgHero::after{content:"";position:absolute;inset:0;z-index:-5;pointer-events:none;background:radial-gradient(40% 50% at 15% 30%,rgba(255,46,147,.45),transparent 70%),radial-gradient(45% 55% at 85% 25%,rgba(198,255,61,.22),transparent 70%),radial-gradient(50% 50% at 60% 90%,rgba(183,0,245,.5),transparent 70%);mix-blend-mode:screen;animation:tgGenzBlobs 9s ease-in-out infinite alternate}
@keyframes tgGenzBlobs{from{opacity:.65;filter:hue-rotate(0deg)}to{opacity:1;filter:hue-rotate(35deg)}}
html[data-genz="on"] .tgHero a.rounded-full:hover{background:var(--tg-lime);color:var(--tg-ink);transform:translateY(-3px) rotate(-2deg)}

/* ---------- Buttons and small interactions ---------- */
html[data-genz="on"] .btn-primary,html[data-genz="on"] .btn-accent,html[data-genz="on"] .tgDestCard[data-a="0"] .tgDestCount{background-image:var(--tg-grad);background-size:160% 100%;color:#fff;border:0;box-shadow:0 8px 22px rgba(255,46,147,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background-position .4s ease}
html[data-genz="on"] .btn-primary:hover,html[data-genz="on"] .btn-accent:hover{background-position:100% 0;transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 14px 30px rgba(183,0,245,.45)}
html[data-genz="on"] .btn-primary:active,html[data-genz="on"] .btn-accent:active,html[data-genz="on"] .btn-dark:active{transform:scale(.93)}
html[data-genz="on"] header nav a,html[data-genz="on"] header nav button{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease}
html[data-genz="on"] header nav a:hover,html[data-genz="on"] header nav button:hover{transform:translateY(-2px) rotate(-2deg)}
html[data-genz="on"] .tgDestArrow:hover{transform:scale(1.12) rotate(-6deg)}
html[data-genz="on"] .tgDestArrow{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .22s ease,border-color .22s ease,color .22s ease}
html[data-genz="on"] .tgDestDot[aria-current="true"]{background:var(--tg-grad)}
html[data-genz="on"] .tgDestCard[data-a="0"]{box-shadow:0 0 0 3px #fff,0 0 0 6px #ff2e93,0 30px 70px rgba(183,0,245,.4)}
/* category strip icons */
html[data-genz="on"] a[href^="/search?category="]:hover>span:first-child{animation:tgGenzWiggle .5s ease}
@keyframes tgGenzWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(10deg) scale(1.1)}}

/* ---------- Product cards: soft, premium surface (tilt and glare come from tg-genz-fx.css) ---------- */
html[data-genz="on"] .snap-x.snap-mandatory{padding-top:10px;padding-bottom:22px}
html[data-genz="on"] a.group[href^="/experience/"]{padding:8px;border:1px solid rgba(189,12,204,.16);border-radius:24px;
  box-shadow:0 1px 2px rgba(53,20,54,.06),0 14px 34px -16px rgba(111,2,150,.35);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,translate .3s ease,scale .15s ease}
html[data-genz="on"] a.group[href^="/experience/"]:hover{box-shadow:0 2px 4px rgba(53,20,54,.06),0 26px 48px -18px rgba(111,2,150,.45)}
html[data-genz="on"] a.group[href^="/experience/"]:active{scale:.98}
html[data-genz="on"] a.group[href^="/experience/"] img{transition:transform .7s cubic-bezier(.22,1,.36,1),scale .7s cubic-bezier(.22,1,.36,1),filter .4s ease;filter:saturate(1.12)}
html[data-genz="on"] a.group[href^="/experience/"] .chip{background:var(--tg-lime);color:var(--tg-ink);font-weight:800;box-shadow:0 4px 10px -4px rgba(15,18,34,.35)}
html[data-genz="on"] a.group[href^="/experience/"] .chip+.chip{background:#ff2e93;color:#fff}
html[data-genz="on"] a.group[href^="/experience/"] h3{letter-spacing:-.01em}
html[data-genz="on"] a.group[href^="/experience/"] .text-lg.font-extrabold{padding:1px 8px;border-radius:8px;background:var(--tg-lime);color:var(--tg-ink);display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
html[data-genz="on"] a.group[href^="/experience/"]:hover .text-lg.font-extrabold{transform:scale(1.06)}
html[data-genz="on"] a.group[href^="/experience/"] button{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
html[data-genz="on"] a.group[href^="/experience/"] button:hover{transform:scale(1.12)}
html[data-genz="on"] a.group[href^="/experience/"] button:active{transform:scale(.85)}

/* ---------- Background: one flat soft pink (no gradient), and text that sits on it ---------- */
html[data-genz="on"]{background:#FDEBFE}
html[data-genz="on"] body{background:transparent}

/* Sections that had their own white/pastel background now show the page's pink. */
html[data-genz="on"] .tgDestinationAnimatedSlider,
html[data-genz="on"] section.bg-gradient-to-br{background:transparent}
html[data-genz="on"] .tgDestinationAnimatedSlider::before{display:none}

/* Text that sits directly on the light gradient: deep plum headings and links, frosted chips. */
html[data-genz="on"] main section h2.section-title,html[data-genz="on"] .tgDestTitle{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#351436;animation:none;text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-genz="on"] main section a.text-ink,html[data-genz="on"] main section a.font-bold:not(.btn-primary):not(.btn-accent):not([href^="/experience/"]),html[data-genz="on"] .tgDestAll{color:#351436}
html[data-genz="on"] main section a.text-ink:hover,html[data-genz="on"] .tgDestAll:hover{color:#BD0CCC}
html[data-genz="on"] main section span.text-slate-500{color:#5a2a5c}
html[data-genz="on"] main section a.rounded-full.border-slate-200{border-color:rgba(189,12,204,.35);background:rgba(255,255,255,.6);color:#351436;backdrop-filter:blur(6px)}
html[data-genz="on"] main section a.rounded-full.border-slate-200:hover{background:var(--tg-lime);color:var(--tg-ink);border-color:var(--tg-ink)}
html[data-genz="on"] .tgDestDot{background:rgba(53,20,54,.25)}
html[data-genz="on"] .tgDestDot[aria-current="true"]{background:#BD0CCC}
html[data-genz="on"] .tgRailDot{background:rgba(53,20,54,.25)}
html[data-genz="on"] .tgRailDot[aria-current="true"]{background:#BD0CCC}
html[data-genz="on"] main section .bg-slate-200{background:rgba(53,20,54,.15)}
/* Product cards keep their own white surface. */
html[data-genz="on"] a.group[href^="/experience/"]{background:#fff}

@media (prefers-reduced-motion:reduce){
  html[data-genz="on"] *,.tgGenzSwap{animation:none !important}
}