html, body { overflow-x:clip; }
body { background:#faf6ef; color:#1a222d; }

/* scroll reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }

/* small building blocks */
.kicker { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:#c94f1e; }
.nav-link { border-radius:9999px; padding:.5rem 1rem; transition:background .2s, color .2s; }
.nav-link:hover { background:#d6ecfa; color:#14568a; }
.lang-opt { display:flex; width:100%; align-items:center; gap:.75rem; border-radius:.75rem; padding:.5rem .75rem; text-align:left; font-size:.875rem; font-weight:600; }
.lang-opt:hover, .lang-opt[aria-selected="true"] { background:#eef7fd; }

/* hero stats: postage-stamp edge, a nod to the logo. --a = accent colour per card */
.stamp-card {
  --a:#3a9de0;
  position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.4rem 1.1rem 1.1rem; background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:2px dashed rgba(255,255,255,.28); border-radius:1rem;
  transition:translate .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.stamp-card::before { content:""; position:absolute; top:-3px; left:1.1rem; width:3rem; height:5px; border-radius:0 0 4px 4px; background:var(--a); }
.stamp-card:hover { translate:0 -5px; border-color:var(--a); background:rgba(255,255,255,.13); box-shadow:0 18px 36px -18px var(--a); }
.stat-ico { display:flex; height:2.75rem; width:2.75rem; flex-shrink:0; align-items:center; justify-content:center; border-radius:9999px; color:var(--a); background:color-mix(in srgb, var(--a) 18%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--a) 45%, transparent); }
.stamp-card:hover .stat-ico { animation:wiggle .6s ease-in-out; }
@keyframes spinout { from { transform:rotate(-360deg) scale(.7); } to { transform:none; } }
.stat-ico.counting svg { animation:spinout var(--t,1s) cubic-bezier(.2,.7,.2,1); }

@media (min-width:1024px){ .stamp-card { flex-direction:row; align-items:center; gap:1rem; padding:1.2rem 1.25rem; } .stamp-card::before { left:1.4rem; } }
@media (max-width:639px){ .stamp-card { padding:1.2rem .7rem .8rem; } .stat-ico { height:2.25rem; width:2.25rem; } .stat-ico svg { height:1.15rem; width:1.15rem; } }

/* guides */
.guide { text-align:center; }
.guide-photo { position:relative; margin:0 auto; aspect-ratio:1; width:100%; max-width:14rem; }
.guide-photo::before { content:""; position:absolute; inset:-6px; border-radius:9999px; border:2px dashed #3a9de0; transition:transform .8s ease; }
.guide:hover .guide-photo::before { transform:rotate(25deg); }
.guide-photo img { position:relative; width:100%; height:100%; object-fit:cover; border-radius:9999px; filter:grayscale(1); transition:filter .5s ease, transform .5s ease; box-shadow:0 18px 40px -20px rgba(15,58,92,.6); }
.guide:hover .guide-photo img { filter:grayscale(0); transform:scale(1.03); }
.guide-name { margin-top:1.25rem; font-family:"Fraunces", Georgia, serif; font-size:1.6rem; font-weight:600; color:#11161e; }
.guide-role { margin-top:.15rem; font-size:.875rem; color:rgba(42,51,64,.65); }
.guide-langs { position:absolute; left:0; right:0; bottom:.4rem; z-index:1; display:flex; justify-content:center; gap:.5rem; padding:0; margin:0; list-style:none; }
.guide-langs li { display:flex; padding:.35rem .5rem; border-radius:9999px; background:rgba(255,255,255,.95); box-shadow:0 4px 12px -4px rgba(15,58,92,.45); }

/* tour cards: read more toggle */
details.tour-more > summary { list-style:none; }
details.tour-more > summary::-webkit-details-marker { display:none; }
details.tour-more .less { display:none; }
details.tour-more[open] .less { display:inline; }
details.tour-more[open] .more { display:none; }
details.tour-more[open] .chev { transform:rotate(180deg); }

/* contact */
.swirl { background-image:repeating-conic-gradient(from 0deg at 80% 40%, #fff 0 6deg, transparent 6deg 18deg); }
.contact-card { display:flex; align-items:center; gap:1rem; border-radius:1.25rem; background:rgba(255,255,255,.06); padding:1.1rem 1.25rem; border:1px solid rgba(255,255,255,.1); transition:background .2s, transform .2s; }
.contact-card:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); }
.contact-ico { display:flex; height:3rem; width:3rem; flex-shrink:0; align-items:center; justify-content:center; border-radius:.9rem; background:#1f86d1; color:#fff; }

/* form */
.field { display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; font-weight:700; color:#2a3340; }
.field input, .field select, .field textarea {
  width:100%; border-radius:.9rem; border:1.5px solid #d6ecfa; background:#fff; padding:.7rem .9rem;
  font-size:1rem; font-weight:500; color:#11161e; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:#1f86d1; box-shadow:0 0 0 4px rgba(31,134,209,.15); outline:none; }
dialog[open] { animation:pop .25s ease; }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #e8622c; outline-offset:2px; }


/* ---------------- motion (always on, by decision of the user) ---------------- */
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-12px) rotate(var(--r,0deg)); } }
@keyframes blob { 0%,100% { rotate:0deg; scale:1 1; } 50% { rotate:38deg; scale:1.1 .9; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes sheen { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
@keyframes shine { 0%,55% { transform:translateX(-130%) skewX(-20deg); } 100% { transform:translateX(330%) skewX(-20deg); } }
@keyframes wiggle { 0%,100% { transform:rotate(0) scale(1); } 25% { transform:rotate(-9deg) scale(1.08); } 60% { transform:rotate(7deg) scale(1.08); } }

/* hero entrance (CSS only, content is never hidden without JS) */
.rise { opacity:0; animation:rise .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards; }
/* reveal on scroll, with direction */
.reveal.from-left { transform:translateX(-36px); }
.reveal.from-right { transform:translateX(36px); }
.reveal.in { opacity:1; transform:none; }
.floaty { animation:floaty 7s ease-in-out infinite; }
.blob { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:blob 14s ease-in-out infinite; }
.parallax { transform:translate(calc(var(--mx,0) * var(--k,20px)), calc(var(--my,0) * var(--k,20px))); transition:transform .4s ease-out; }
.marquee-track { animation:marquee 40s linear infinite; width:max-content; }
h1 span.italic { background:linear-gradient(90deg,#f08452,#6fbaeb,#c9a227,#f08452); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 8s linear infinite; }

/* hover effects */
.btn-shine { position:relative; overflow:hidden; }
.btn-shine::after { content:''; position:absolute; inset:0 auto 0 0; width:35%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation:shine 5s ease-in-out 2s infinite; pointer-events:none; }
.tour-card { transition:opacity .7s ease, transform .7s ease, translate .3s ease; }
.tour-card:hover { translate:0 -6px; }
.contact-card:hover .contact-ico { animation:wiggle .6s ease-in-out; }
header a[aria-label="GhentCityGuide"]:hover img { animation:wiggle .6s ease-in-out; }

/* scroll progress bar + header shadow */
.progress { position:fixed; top:0; left:0; right:0; height:4px; z-index:60; background:#e8622c; transform:scaleX(0); transform-origin:left; pointer-events:none; }
header.scrolled { box-shadow:0 10px 30px rgba(11,39,64,.35); }

/* error page */
@keyframes wobble { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
.wobble { animation:wobble 4s ease-in-out infinite; }