/* TragelSport Home V3: motion layer on top of styles.css (V2 untouched).
   Rules: transform/opacity only; ease-out in, ease-in-out on screen; UI <300ms; hover gated; reduced motion = gentler. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}
html{-webkit-tap-highlight-color:transparent}
button,a,.chip,select,input{touch-action:manipulation}
button,.btn,.chip,.rail button{-webkit-user-select:none;user-select:none}
.rail{overscroll-behavior-x:contain}

/* ───────── press feedback (all pointers) ───────── */
.btn,.chip,.intents a,.intents button,.rail button,.link,.step button,.burger,.dlg__intent span{transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,color 150ms ease}
.btn:active,.chip:active,.intents a:active,.intents button:active,.rail button:active,.link:active,.step button:active,.dlg__intent label:active span{transform:scale(.97)}
/* hover motion only for real pointers; touch fires false hovers */
@media (hover:none),(pointer:coarse){
  .btn--pink:hover{transform:none;background:var(--pink);box-shadow:0 0 22px rgba(255,45,155,.4)}
  .btn--ghost:hover{background:rgba(7,7,11,.55)}
  .intents a:hover,.intents button:hover{background:rgba(7,7,11,.6);border-color:rgba(255,255,255,.4)}
  .tile:hover img{transform:none}
  .link:hover .ico{transform:none}
  .step button:hover{background:var(--purple)}
}
.btn--pink:active{transform:scale(.97)}

/* ───────── 1 · hero entrance (rare: delight allowed) ───────── */
.hero__media{position:absolute;left:0;right:0;top:-24px;bottom:0;z-index:-2;will-change:transform}
.hero__img{position:absolute;inset:0;width:100%;height:100%;z-index:auto}
.hero h1{overflow:visible}
.ln{display:block}
.hero .neon{display:inline-block;position:relative;text-shadow:none}
.hero .neon::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;color:transparent;-webkit-text-stroke:0;text-shadow:0 0 8px rgba(255,45,155,.55),0 0 22px rgba(255,45,155,.25);opacity:0;pointer-events:none}
.js .hero:not(.is-in) :is(.ln,.lead,.cta-row,.intents,.vibes-v,.geo){opacity:0}
.hero.is-in .hero__img{animation:heroPhoto 1600ms var(--ease-out) both}
.hero.is-in .ln{animation:rise 520ms var(--ease-out) both}
.hero.is-in .ln:nth-child(2){animation-delay:80ms}
.hero.is-in .neon::after{animation:glowOn 700ms var(--ease-out) 420ms both}
.hero.is-in .lead{animation:rise 460ms var(--ease-out) 260ms both}
.hero.is-in .cta-row{animation:rise 460ms var(--ease-out) 340ms both}
.hero.is-in .intents{animation:rise 460ms var(--ease-out) 420ms both}
.hero.is-in .vibes-v{animation:fade 600ms var(--ease-out) 600ms both}
.hero.is-in .geo--x{animation:geoIn 700ms var(--ease-out) 300ms both}
.hero.is-in .geo--arc{animation:fade 900ms var(--ease-out) 200ms both}
@keyframes heroPhoto{from{transform:scale(1.06)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes glowOn{from{opacity:0}to{opacity:1}}
@keyframes geoIn{from{opacity:0;transform:rotate(4deg) scale(.92)}to{opacity:1;transform:rotate(14deg)}}

/* ───────── 2 · activity explorer ───────── */
.stage__img{opacity:0;z-index:-4}
.stage__img.is-front{opacity:1}
.stage__img.is-art{object-fit:contain;object-position:center 12%;height:68%;inset:0 0 auto 0;padding:14px}
.stage.is-lava .stage__img{object-fit:cover;object-position:center;height:100%;padding:0;inset:0}      /* neutralise V2 rule; art handled per image */
.stage.is-lava .stage__img.is-art{object-fit:contain;object-position:center 12%;height:68%;padding:14px;inset:0 0 auto 0}
.stage.is-swap .stage__img{transform:none}
.geo--stage{width:clamp(70px,10vw,120px);height:auto;aspect-ratio:160/60;right:16px;top:16px;opacity:.9}
.rail-ind{display:none}
@media (min-width:1024px){
  .rail{position:relative}
  .rail-ind{display:block;position:absolute;left:0;right:0;top:0;height:52px;border:1.5px solid var(--pink);border-radius:12px;background:rgba(255,45,155,.16);box-shadow:0 0 16px rgba(255,45,155,.45);pointer-events:none;transform:translateY(0)}
  .rail-ind.is-anim{transition:transform 250ms var(--ease-in-out)}
  .rail button[aria-selected=true]{background:transparent;border-color:transparent;box-shadow:none}
  .rail button{position:relative;z-index:1}
  .stage.is-lava .stage__img.is-art{height:100%;object-position:right center;padding:18px;inset:0}
}

/* ───────── 3 · section entrances (Neonlijn: the line draws) ───────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .idx i{transform:scaleX(0);transform-origin:left center;transition:transform 450ms var(--ease-in-out) 120ms}
.js .in .idx i,.js .idx.in i{transform:scaleX(1)}
.js .hero .idx i{transform:none}
.frame-trace{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.frame-trace rect{fill:none;stroke:var(--pink);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(255,45,155,.9))}
.frame-trace.is-on rect{animation:draw 900ms var(--ease-in-out) both}
@keyframes draw{to{stroke-dashoffset:0}}
.qb{position:relative}

/* ───────── 4 · Floor is Lava signature (Panelen) ───────── */
.feat__art{position:relative}
.t-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,1fr);border-radius:var(--r);overflow:hidden;pointer-events:none;z-index:3}
.t-grid i{background:var(--c);outline:1px solid rgba(7,7,11,.55);outline-offset:-1px;animation:tileOff 420ms var(--ease-out) var(--d) both;animation-play-state:paused}
.t-grid.is-playing i{animation-play-state:running;will-change:opacity}
@keyframes tileOff{0%{opacity:1}35%{opacity:1}100%{opacity:0}}

/* ───────── 5 · booking dialog: scale from trigger (desktop) / bottom sheet (mobile) ───────── */
dialog[open]{animation:dlgIn 200ms var(--ease-out) both}   /* modal: stays centred (exempt from trigger origin) */
dialog[open]::backdrop{animation:fade 200ms var(--ease-out) both}
dialog.is-closing{animation:dlgOut 140ms var(--ease-out) both}
dialog.is-closing::backdrop{animation:fadeOut 140ms var(--ease-out) both}
@keyframes dlgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes dlgOut{to{opacity:0;transform:scale(.97)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%)}}
.dlg__ok:not([hidden]){animation:okIn 220ms var(--ease-out) both}
@keyframes okIn{from{opacity:0;transform:scale(.98) translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:719px){
  dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:18px 18px 0 0;border-bottom:0;max-height:92svh;padding-bottom:env(safe-area-inset-bottom)}
  dialog[open]{animation:sheetIn 320ms var(--ease-drawer) both}
  dialog.is-closing{animation:sheetOut 220ms var(--ease-out) both}
}

/* ───────── reduced motion: fewer + gentler, never zero feedback ───────── */
@media (prefers-reduced-motion:reduce){
  .hero.is-in .hero__img,.hero.is-in .ln,.hero.is-in .lead,.hero.is-in .cta-row,.hero.is-in .intents,.hero.is-in .geo--x{animation:fade 200ms ease both}
  .hero.is-in .neon::after{animation:none;opacity:1}
  .hero__media{transform:none!important}
  .js .rv{transform:none;transition:opacity 150ms ease}
  .js .idx i{transform:none;transition:none}
  .t-grid{display:none}
  .frame-trace rect{stroke-dashoffset:0;animation:none!important}
  dialog[open],dialog.is-closing,dialog[open]::backdrop{animation:fade 120ms ease both}
  dialog.is-closing{animation:fadeOut 100ms ease both}
  .rail-ind.is-anim{transition:none}
  .btn:active,.chip:active,.rail button:active{transform:none}
}

/* break-ui: very large text (200% root) must wrap, not widen the page */
h1,h2,h3,.lead,.stage__body,.tile__b{overflow-wrap:anywhere;hyphens:auto}
.hero .neon{max-width:100%}
.feat__in>*,.food__grid>*,.book__in>*,.tiles>*{min-width:0}
.prak ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
@media (max-width:719px){.ftr__in{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}}
.ftr nav a,.prak a{overflow-wrap:anywhere}
.qb{padding:clamp(14px,5vw,22px)}