/* TicketEx "Stella" look for the home page and the product page (Gen Z off), after stella-astro.pages.dev:
   light surfaces (#fff / #f7f7f7), soft dark text (#322b2b titles, #3b3b3b copy), violet #6b1aff glowing pill buttons,
   light-weight headings with an italic serif accent, a floating pill header, and motion: word-by-word blur-in headings,
   small fade-ups on scroll, a hero photo that tilts flat as the page scrolls, buttons that fill from the cursor and flip
   their label. Linked from the root layout (web/patches/patch-home.js); motion is driven by tg-stella.js.

   Scope: html.tgst-on (set by tg-stella.js: normal mode, not admin) on a page that has the home hero (.tgHero) or the
   booking box (#book). Before tg-stella.js has run (html without .tgst-js) the same pages get the look unless the
   server-rendered Gen Z switch is on, so the first paint is already right.
   Phones (< 768px) and prefers-reduced-motion get the look without the entrance animations, as on Stella.
   Instrument Serif (fonts/instrument-serif-italic-latin.woff2): SIL Open Font License 1.1, see fonts/OFL-InstrumentSerif.txt */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Radius of the hover fill that grows from the cursor (animatable because it is registered). */
@property --tgst-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes tgst-word { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes tgst-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tgst-reveal-left { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-5%); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes tgst-tilt { from { transform: perspective(75em) rotateX(20deg) scale(.8); } to { transform: perspective(75em) rotateX(0deg) scale(1); } }
@keyframes tgst-slide { from { transform: translateX(-1000px); } to { transform: translateX(100px); } }

/* ============================================================ both pages ============================================================ */
:root:is(.tgst-on, :not(.tgst-js):not(:has([title*="Gen Z mode"][aria-checked="true"]))):is(:has(.tgHero), :has([id="book"])) {
  --tgst-primary: #6b1aff;
  --tgst-fill: #372d3f;
  --tgst-title: #322b2b;
  --tgst-text: #3b3b3b;
  --tgst-muted: #6f6969;
  --tgst-light: #f7f7f7;
  --tgst-line: #ececf1;
  --tgst-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --tgst-glow: inset 0 0 8px 4px rgba(255, 255, 255, .48);

  & :is(main, header) {
    --color-ink: #322b2b;
    --color-brand-50: #f5f0ff;
    --color-brand-100: #ece2ff;
    --color-brand-200: #dbc9ff;
    --color-brand-300: #c0a1ff;
    --color-brand-400: #9d6bff;
    --color-brand-500: #7f3dff;
    --color-brand-600: #6b1aff;
    --color-brand-700: #5a10e0;
    --color-brand-800: #4a0db7;
    --color-brand-900: #360a85;
    --color-brand-950: #1f064f;
    --color-slate-500: #6f6969;
    --color-slate-600: #514c4c;
    --color-slate-700: #3b3b3b;
  }
  & main { color: var(--tgst-text); }
  & main :is(h1, h2) { color: var(--tgst-title); font-weight: 500; letter-spacing: -.025em; }
  & main .section-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; }
  /* The site's own scroll reveal: the Stella motion replaces it. */
  & main .reveal { opacity: 1; transform: none; transition: none; }

  /* Small uppercase kicker above a heading -> italic serif accent, as Stella's italic heading words. */
  & main :is(p.uppercase.text-brand-600, p.uppercase.text-brand-700, .tgDestEyebrow) {
    font-family: var(--tgst-serif); font-style: italic; font-weight: 400; font-size: 1.45rem; line-height: 1.2;
    letter-spacing: 0; text-transform: none; color: var(--tgst-primary);
  }

  /* ---------- floating pill header ---------- */
  & header {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 14px 12px 0;
  }
  & header > .container-x {
    max-width: 80rem; height: 64px; padding-inline: 20px 10px; border: 1px solid var(--tgst-line); border-radius: 999px;
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: max-width .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s ease, background-color .3s ease;
  }
  &.tgst-scrolled header > .container-x { max-width: 64rem; background: rgba(255, 255, 255, .92); box-shadow: 0 14px 34px -16px rgba(50, 43, 43, .28); }
  &.tgst-scrolled:has([id="book"]) header > .container-x { max-width: 74rem; } /* the product header also has a search box */
  /* (not the Gen Z switch, which keeps its dark pill, nor the sign-in button, which becomes a violet one) */
  & header :is([class~="text-white"], [class~="text-white/90"]):not([role="switch"], .btn) { color: var(--tgst-title) !important; }
  & header nav :is(a, button) { color: var(--tgst-text) !important; font-weight: 500; }
  & header nav :is(a, button):hover, & header [class~="hover:bg-white/10"]:not([role="switch"], .btn):hover { background-color: var(--color-brand-50) !important; color: var(--tgst-primary) !important; }
  & header .text-coral-400 { color: #ff6a3d; }

  /* ---------- buttons: violet glowing pill, dark fill from the cursor on hover ---------- */
  & :is(main, header) :is(.btn-primary, .btn-accent, .btn-dark), & header a.btn {
    position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 999px;
    background-color: var(--tgst-primary);
    background-image: radial-gradient(circle at var(--tgst-hx, 50%) var(--tgst-hy, 50%), var(--tgst-fill) var(--tgst-r), transparent calc(var(--tgst-r) + .5px));
    color: #fff6f6 !important; --tgst-fc: #fff6f6;
    font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
    box-shadow: var(--tgst-glow);
    transition: --tgst-r .7s ease, box-shadow .35s ease, opacity .2s ease;
  }
  & :is(main, header) :is(.btn-primary, .btn-accent, .btn-dark):hover:not(:disabled), & header a.btn:hover { --tgst-r: 28rem; background-color: var(--tgst-primary) !important; }
  & :is(main, header) :is(.btn-primary, .btn-accent, .btn-dark):disabled { background-image: none; }
  /* Outline buttons and the hero chips: white pill, violet fill on hover. */
  & main .btn-outline, & .tgHero a.rounded-full {
    position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--tgst-line) !important; border-radius: 999px;
    background-color: #fff !important; color: var(--tgst-title) !important; --tgst-fc: var(--tgst-title);
    background-image: radial-gradient(circle at var(--tgst-hx, 50%) var(--tgst-hy, 50%), var(--tgst-primary) var(--tgst-r), transparent calc(var(--tgst-r) + .5px));
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--tgst-glow);
    transition: --tgst-r .7s ease, color .3s ease .1s, border-color .3s ease;
  }
  & main .btn-outline:hover:not(:disabled), & .tgHero a.rounded-full:hover { --tgst-r: 28rem; color: #fff !important; --tgst-fc: #fff; border-color: var(--tgst-primary) !important; translate: none; }
  /* "See all" links: Stella's underlined text button. */
  & main a.group.inline-flex.text-sm.font-bold, & main .tgDestAll { font-weight: 500; color: var(--tgst-title); border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: color .2s ease; }
  & main a.group.inline-flex.text-sm.font-bold:hover, & main .tgDestAll:hover { color: var(--tgst-primary); }

  /* Label flip on hover (tg-stella.js copies the label into data-tgst-flip). Only where content: "x" / "" works,
     so the copies are not read twice by screen readers. */
  @supports (content: "x" / "") {
    /* text-fill-color, not color: the button rules above set color with !important, and nothing else sets this */
    & [data-tgst-flip] { -webkit-text-fill-color: transparent; }
    & [data-tgst-flip]::before, & [data-tgst-flip]::after {
      content: attr(data-tgst-flip) / ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      color: var(--tgst-fc); -webkit-text-fill-color: var(--tgst-fc);
      pointer-events: none; transition: translate .3s ease-in-out, opacity .3s ease-in-out;
    }
    & [data-tgst-flip]::after { translate: 0 100%; opacity: 0; }
    & [data-tgst-flip]:hover:not(:disabled)::before { translate: 0 -100%; opacity: 0; }
    & [data-tgst-flip]:hover:not(:disabled)::after { translate: 0 0; opacity: 1; }
  }

  /* ---------- product cards (rails on both pages) ---------- */
  & main a[href^="/experience/"].rounded-2xl {
    border-radius: 24px; padding: 8px 8px 10px; background-color: var(--tgst-card, var(--tgst-light));
    box-shadow: none !important; translate: none !important; transition: background-color .3s ease;
  }
  & main a[href^="/experience/"].rounded-2xl > div:first-child { border-radius: 18px; border: 4px solid #fff; }
  & main a[href^="/experience/"].rounded-2xl h3 { font-weight: 600; color: var(--tgst-title); }
  & main a[href^="/experience/"].rounded-2xl .font-extrabold { font-weight: 700; }

  /* ---------- scroll motion states (tg-stella.js) ---------- */
  & [data-tgst-a] { transition: opacity .7s ease-out, transform .7s ease-out, clip-path .7s ease-out; }
  & [data-tgst-a="wait"] { opacity: 0; transform: translateY(30px); }
  & [data-tgst-a="wait"][data-tgst-k="left"] { transform: translateX(30px); }
  & [data-tgst-a="wait"][data-tgst-k="right"] { transform: translateX(-30px); }
  & [data-tgst-a="wait"][data-tgst-k="down"] { transform: translateY(-30px); }
  & [data-tgst-a="wait"][data-tgst-k="clip"] { clip-path: inset(0 100% 0 0); transform: translateX(-5%); }
  & [data-tgst-a="in"] { opacity: 1; transform: none; clip-path: inset(0); }
  & [data-tgst-d="1"] { transition-delay: .1s; }
  & [data-tgst-d="2"] { transition-delay: .2s; }
  & [data-tgst-d="3"] { transition-delay: .3s; }
  & [data-tgst-d="4"] { transition-delay: .4s; }
  & [data-tgst-d="5"] { transition-delay: .5s; }
  & [data-tgst-d="6"] { transition-delay: .6s; }
  /* Word-by-word headings: the heading's own text is hidden while a copy split into words plays over it. */
  & [data-tgst-w] { position: relative; }
  & :is([data-tgst-w="wait"], [data-tgst-w="run"]) { color: transparent !important; }
  & .tgst-ov { position: absolute; inset: 0; pointer-events: none; user-select: none; }
  & .tgst-ov > .tgst-wd { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(10px); }
  & [data-tgst-w="run"] > .tgst-ov > .tgst-wd { animation: tgst-word .6s ease-out forwards; animation-delay: calc(.15s + var(--i) * .1s); }

  @media (max-width: 1023px) {
    & header { padding: 10px 10px 0; }
    & header > .container-x { height: 58px; padding-inline: 14px 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    & :is(main, header) * { transition-duration: .01ms !important; }
  }
}

/* ============================================================ home page ============================================================ */
:root:is(.tgst-on, :not(.tgst-js):not(:has([title*="Gen Z mode"][aria-checked="true"]))):has(.tgHero) {
  /* Hero: dark copy on white, the photo as a framed banner below it, the trust strip as the violet band. */
  & .tgHero {
    --tgst-img-h: clamp(240px, 40vw, 560px);
    min-height: 0; flex-direction: column; align-items: stretch; padding: 150px 0 0; background: #fff;
  }
  & .tgHero > .container-x { color: var(--tgst-text); }
  & .tgHero > .container-x > span:first-child {
    border-color: var(--tgst-line); background: #fff; color: var(--tgst-text); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 6px 20px -12px rgba(50, 43, 43, .25);
  }
  & .tgHero h1 { color: var(--tgst-title); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.25rem); }
  & .tgHero h1 > span:not(.tgw) {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--tgst-title);
    -webkit-text-fill-color: currentColor; font-family: var(--tgst-serif); font-style: italic; font-weight: 400;
    font-size: 1.1em; letter-spacing: -.01em;
  }
  & .tgHero > .container-x > p { color: var(--tgst-text); font-size: 1.15rem; }
  & .tgHero form > div { box-shadow: 0 22px 50px -24px rgba(50, 43, 43, .35); --tw-ring-color: var(--tgst-line); }
  & .tgHero form button[type="submit"] { padding-inline: 1.75rem; }
  & .tgHero > .container-x > div:last-child > span { color: var(--tgst-muted); }
  & .tgHero > div:first-child {
    position: relative; inset: auto; z-index: 2; order: 2; width: min(1180px, calc(100% - 32px)); height: var(--tgst-img-h);
    margin: 64px auto 0; border-radius: 32px; overflow: hidden; border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: 0 40px 80px -30px rgba(66, 20, 160, .45), 0 0 0 1px rgba(107, 26, 255, .08);
  }
  & .tgHero > div:first-child > img { scale: 1; transform: none; }
  & .tgHero > div:first-child > div { display: none; } /* the dark overlay */
  & .tgHero > div:last-child {
    position: relative; inset: auto; z-index: 1; order: 3; margin: calc(-1 * var(--tgst-img-h) - 10px) 12px 0;
    padding: calc(var(--tgst-img-h) + 56px) 0 44px; border: 0; border-radius: 48px 48px 100px 100px;
    background: linear-gradient(180deg, rgba(243, 238, 255, 0) 0, #efe7ff 12%, #b896ff 46%, #6b1aff 70%, #5f12f2 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  & .tgHero > div:last-child > .container-x { --tw-divide-opacity: 1; }
  & .tgHero > div:last-child .divide-x > * { border-color: rgba(255, 255, 255, .22); }
  & .tgHero > div:last-child p.font-bold { font-weight: 600; font-size: 1.05rem; }
  /* Category strip below the hero. */
  & .tgHero + section > div { border-color: transparent; background: var(--tgst-light); box-shadow: none; border-radius: 28px; }
  & .tgHero + section a:hover { background: #fff; }
  & .tgHero + section a > span:first-child { background: #fff; }

  /* Alternating light bands, as Stella's sections. */
  & #attractions, & main section[class*="from-coral-50"] {
    --tgst-card: #fff; background: var(--tgst-light); box-shadow: 0 0 0 100vmax var(--tgst-light); clip-path: inset(0 -100vmax);
  }
  & #attractions { padding-block: 56px; margin-top: 72px; }
  & main section[class*="from-coral-50"] { background-image: none; }
  & #top-products { margin-top: 72px; }

  /* "Book with confidence": Stella's call-to-action, white with drifting light violet columns. */
  & main .reveal[class*="bg-brand-950"] {
    isolation: isolate; background: #fff; color: var(--tgst-text); border: 1px solid var(--tgst-line);
  }
  & main .reveal[class*="bg-brand-950"]::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -1100px; width: calc(100% + 2300px); z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(90deg, #f4eeff 0 160px, rgba(255, 255, 255, 0) 160px 320px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25), #000 45%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25), #000 45%);
    transform: translateX(calc(-1000px + 1100px * var(--tgst-pp, .5)));
  }
  & main .reveal[class*="bg-brand-950"] > div.absolute { display: none; }
  & main .reveal[class*="bg-brand-950"] h2 { color: var(--tgst-title); font-weight: 500; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.12; }
  & main .reveal[class*="bg-brand-950"] p { color: var(--tgst-muted); }
  & main .reveal[class*="bg-brand-950"] .grid.gap-4 > div {
    background: #fff; border-color: var(--tgst-line); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 22px;
  }
  & main .reveal[class*="bg-brand-950"] .grid.gap-4 > div:hover { background: #faf7ff; translate: none; }
  & main .reveal[class*="bg-brand-950"] .grid.gap-4 > div p:first-of-type { color: var(--tgst-title); font-weight: 600; }
  & main .reveal[class*="bg-brand-950"] .grid.gap-4 > div svg { color: var(--tgst-primary); }

  @supports (animation-timeline: scroll()) {
    & main .reveal[class*="bg-brand-950"]::before { transform: none; animation: tgst-slide linear both; animation-timeline: scroll(root); }
  }

  /* Entrances on load (Stella: badge wipes in, the title arrives word by word, then the copy, then the actions). */
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    & .tgHero .animate-fade-up { animation: none; }
    & .tgHero > .container-x > span:first-child { animation: tgst-reveal-left .7s ease-out .2s both; }
    & .tgHero h1 .tgw { display: inline-block; animation: tgst-word .6s ease-out both; animation-delay: calc(.1s + var(--i, 0) * .1s); }
    & .tgHero > .container-x > p { animation: tgst-word .6s ease-out .9s both; }
    & .tgHero > .container-x > div:nth-of-type(1) { animation: tgst-fade-up .7s ease-out 1s both; }
    & .tgHero > .container-x > div:nth-of-type(2) { animation: tgst-fade-up .7s ease-out 1.1s both; }
  }
  /* The banner starts tilted back and flattens over the first ~560px of scrolling (desktop). */
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      & .tgHero > div:first-child { animation: tgst-tilt linear both; animation-timeline: scroll(root); animation-range: 0px 560px; }
    }
    @supports not (animation-timeline: scroll()) {
      & .tgHero > div:first-child { transform: perspective(75em) rotateX(calc(20deg - 20deg * var(--tgst-hp, 0))) scale(calc(.8 + .2 * var(--tgst-hp, 0))); }
    }
  }
  @media (max-width: 767px) {
    & .tgHero { padding-top: 112px; }
    & .tgHero form button[type="submit"] { padding-inline: 1rem; letter-spacing: .02em; }
    & .tgHero > div:first-child { margin-top: 36px; border-radius: 24px; border-width: 4px; }
  }
}

/* ============================================================ product page ============================================================ */
:root:is(.tgst-on, :not(.tgst-js):not(:has([title*="Gen Z mode"][aria-checked="true"]))):has([id="book"]) {
  & main h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem); line-height: 1.12; }
  & main section[id] > h2 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); margin-bottom: 1.25rem; }
  & main section[id].border-t, & main .border-slate-100 { border-color: var(--tgst-line); }
  & main .rounded-3xl:has(> button > img) { border-radius: 32px; }
  & main .border-l-4.border-brand-500 { border: 0; border-radius: 24px; background: var(--tgst-light); padding: 22px 24px; }
  & main .bg-slate-50 { background-color: var(--tgst-light); }
  /* the booking box keeps the compact sizes of tg-site.css */
  & #book { border-radius: 20px; border-color: var(--tgst-line); box-shadow: 0 30px 60px -34px rgba(50, 43, 43, .35); }
  & #book > div:first-child { background: linear-gradient(135deg, #f5f0ff, #fff); }
  & #book .text-3xl.font-extrabold { font-weight: 600; color: var(--tgst-title); }
  & main section.container-x.mt-16 h2 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }

  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    & main h1 { animation: tgst-word .7s ease-out .05s both; }
    & main h1 + div { animation: tgst-fade-up .7s ease-out .35s both; }
    & main .rounded-3xl:has(> button > img) { animation: tgst-fade-up .8s ease-out .25s both; }
  }
}