/* LatinosBE V17.7 · Hero "Maqueta viva".
   One authored moment: the fog opens on a living model of Belgium. Depth comes from real 3D layers
   (photo, routes, pins, sparks, glare) inside one perspective plate that follows the pointer.
   Every element is visible without animation; prefers-reduced-motion removes all motion. */
@property --hero3d-sheen { syntax: '<percentage>'; inherits: false; initial-value: -30%; }

.hero3d {
  --hero3d-ease: cubic-bezier(.16, 1, .3, 1);
  --hero3d-gold: #ebad17;
  --hero3d-gold-soft: rgba(235, 173, 23, .5);
  position: relative;
  isolation: isolate;
  min-height: clamp(620px, 86vh, 860px);
  display: grid;
  align-items: center;
  overflow: clip;
  background: var(--mist, #f6f8fa);
}

/* Stage: perspective camera. The plate is slightly oversized so tilting never reveals an edge. */
.hero3d-stage { position: absolute; inset: 0; z-index: -1; perspective: 1500px; perspective-origin: 62% 46%; }
.hero3d-scroll, .hero3d-plate { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero3d-plate {
  --rx: 0deg; --ry: 0deg; --gx: 68%; --gy: 38%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 62% 50%;
}
/* The model keeps the photo's exact aspect ratio on desktop, so the SVG overlay maps 1:1. It floats right
   of the copy and its edges dissolve into the mist. */
.hero3d-model {
  position: absolute; top: 50%; right: 1vw; width: clamp(720px, 75vw, 1360px); aspect-ratio: 1672 / 941;
  transform: translateY(-50%); transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 95%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 13%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 95%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 13%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.hero3d-model > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero3d-photo {
  object-fit: cover;
  object-position: 100% 50%;
  transform: translateZ(0);
  animation: hero3d-photo-in 1900ms var(--hero3d-ease) both;
}
.hero3d-routes { transform: translateZ(34px); overflow: visible; pointer-events: none; }
.hero3d-sparks { transform: translateZ(80px); pointer-events: none; }
.hero3d-glare {
  transform: translateZ(96px);
  pointer-events: none;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 244, 214, .38), rgba(255, 244, 214, 0) 34%),
    linear-gradient(105deg, rgba(255, 255, 255, 0) calc(var(--hero3d-sheen) - 8%), rgba(255, 250, 235, .32) var(--hero3d-sheen), rgba(255, 255, 255, 0) calc(var(--hero3d-sheen) + 8%));
  mix-blend-mode: soft-light;
  animation: hero3d-sheen 12s 2.2s var(--hero3d-ease) infinite both;
}

/* Fog: keeps the headline legible and blends the model into the page; its curtain opens on load. */
.hero3d-fog {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--mist, #f6f8fa) 0%, rgba(246, 248, 250, .9) 24%, rgba(246, 248, 250, .45) 38%, rgba(246, 248, 250, 0) 52%),
    linear-gradient(0deg, var(--paper, #f6f8fa) 0%, rgba(246, 248, 250, 0) 22%);
}
.hero3d-fog::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 30% 50%, var(--mist, #f6f8fa) 45%, rgba(246, 248, 250, .82) 70%, rgba(246, 248, 250, 0) 100%);
  animation: hero3d-fog-open 1700ms 120ms var(--hero3d-ease) backwards;
}

/* Routes: a faint drawn path with a travelling pulse of light. */
.hero3d-route-base path { fill: none; stroke: rgba(255, 226, 150, .55); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 0; animation: hero3d-draw 1600ms 900ms var(--hero3d-ease) backwards; }
.hero3d-route-pulse path { fill: none; stroke: #ffe39a; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 90 910; stroke-dashoffset: 1000; opacity: 0; filter: drop-shadow(0 0 7px var(--hero3d-gold)); animation: hero3d-pulse var(--t, 5s) var(--d, 2s) linear infinite; }

/* Pins: a bright core and a ring that breathes outward. */
.hero3d-pins g { transform-box: fill-box; }
.hero3d-pin-core { fill: #fff6d8; stroke: var(--hero3d-gold); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--hero3d-gold)); transform-box: fill-box; transform-origin: center; animation: hero3d-pop 700ms var(--d, 1.2s) var(--hero3d-ease) backwards; }
.hero3d-pin-ring { fill: none; stroke: #ffe39a; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hero3d-ring 2600ms calc(var(--d, 1.2s) + .4s) var(--hero3d-ease) infinite; }

/* Sparks: warm motes of light rising from the city at different depths. */
.hero3d-sparks span {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff1c2; box-shadow: 0 0 10px 2px rgba(235, 173, 23, .65);
  opacity: 0; animation: hero3d-rise var(--t, 12s) var(--d, 0s) linear infinite;
}

/* Copy. */
.hero3d-content { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 96px) clamp(110px, 10vw, 150px); pointer-events: none; }
.hero3d-copy { max-width: min(580px, 45%); pointer-events: auto; }
.hero3d h1 {
  font-size: clamp(2.6rem, 4.25vw, 4.35rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800;
  color: var(--navy, #14243a); margin: 0 0 26px; text-wrap: balance;
}
.hero3d-line { display: block; overflow: clip; overflow-clip-margin: .2em; padding-bottom: .06em; }
.hero3d-line > span { display: inline-block; position: relative; animation: hero3d-line-in 1100ms calc(260ms + var(--i, 0) * 130ms) var(--hero3d-ease) backwards; }
.hero3d-accent { color: var(--teal, #176b76); }
.hero3d-underline { position: absolute; left: 0; right: 0; bottom: -.08em; width: 100%; height: .3em; overflow: visible; }
.hero3d-underline path { fill: none; stroke: var(--hero3d-gold); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: hero3d-draw-1 900ms 1250ms var(--hero3d-ease) backwards; }
.hero3d-lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.6; max-width: 40ch; color: #3d4f63; margin: 0 0 32px; animation: hero3d-rise-in 900ms 780ms var(--hero3d-ease) backwards; }
.hero3d-actions { display: flex; flex-wrap: wrap; gap: 12px; animation: hero3d-rise-in 900ms 920ms var(--hero3d-ease) backwards; }
.hero3d .btn { min-height: 52px; padding: 14px 24px; border-radius: 12px; font-weight: 750; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hero3d-primary {
  position: relative; overflow: hidden; color: #fff; background: var(--teal, #176b76);
  box-shadow: 0 14px 30px -12px rgba(23, 107, 118, .65), 0 2px 6px rgba(20, 36, 58, .12);
  transition: background-color 200ms ease, box-shadow 260ms var(--hero3d-ease), transform 260ms var(--hero3d-ease);
}
.hero3d-primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: transform 700ms var(--hero3d-ease); }
.hero3d-primary svg { transition: transform 260ms var(--hero3d-ease); }
.hero3d-primary:hover { color: #fff; background: var(--deep, #153c59); box-shadow: 0 18px 36px -14px rgba(21, 60, 89, .7), 0 2px 6px rgba(20, 36, 58, .14); }
.hero3d-secondary { color: var(--navy, #14243a); background: rgba(255, 255, 255, .78); border: 1.5px solid rgba(20, 36, 58, .82); transition: background-color 200ms ease, transform 260ms var(--hero3d-ease); }
.hero3d-secondary:hover { color: var(--navy, #14243a); background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .hero3d-primary:hover, .hero3d-secondary:hover { transform: translateY(-2px); }
  .hero3d-primary:hover::after { transform: translateX(120%) skewX(-18deg); }
  .hero3d-primary:hover svg { transform: translateX(4px); }
}
.hero3d .btn:focus-visible { outline: 3px solid var(--hero3d-gold); outline-offset: 3px; }

/* The real search form rises over the bottom edge of the scene. */
.hero3d-search { position: relative; z-index: 3; margin-top: -78px; animation: hero3d-rise-in 1000ms 1050ms var(--hero3d-ease) backwards; }
.hero3d-search .lbe-quick-search { box-shadow: 0 24px 60px -24px rgba(20, 36, 58, .35), 0 2px 8px rgba(20, 36, 58, .06); }
.hero3d + .hero3d-search + .city-section { margin-top: 28px; }

/* Scroll depth: the model sinks and tips away while the copy lifts (supporting browsers only). */
@supports (animation-timeline: scroll()) {
  .hero3d-scroll { animation: hero3d-scroll-depth linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  .hero3d-content { animation: hero3d-scroll-copy linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
}

/* Touch devices: no pointer tilt, a slow idle float instead. */
@media (hover: none), (pointer: coarse) {
  .hero3d-plate { animation: hero3d-float 10s ease-in-out infinite; }
}

/* Tablet and phone: the copy leads, the model becomes a framed 3D card below it. */
@media (max-width: 899px) {
  .hero3d { min-height: 0; display: flex; flex-direction: column; padding-bottom: 8px; background: var(--mist, #f6f8fa); }
  .hero3d-content { order: 1; padding-block: 40px 28px; }
  .hero3d-stage { order: 2; }
  .hero3d-copy { max-width: 100%; }
  .hero3d h1 { font-size: clamp(2.35rem, 9.2vw, 3.6rem); margin-bottom: 18px; }
  .hero3d-lead { margin-bottom: 24px; }
  .hero3d-stage {
    position: relative; inset: auto; z-index: 0; width: calc(100% - 40px); margin: 0 auto;
    aspect-ratio: 16 / 11; border-radius: 22px; overflow: hidden; perspective: 1100px;
    box-shadow: 0 30px 60px -28px rgba(20, 36, 58, .45), 0 2px 10px rgba(20, 36, 58, .08);
  }
  .hero3d-plate { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.07); }
  .hero3d-model { inset: 0; top: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  .hero3d-fog { background: linear-gradient(0deg, rgba(20, 36, 58, .16) 0%, rgba(20, 36, 58, 0) 30%); }
  .hero3d-fog::after { background: var(--mist, #f6f8fa); }
  .hero3d-search { margin-top: 20px; }
  @supports (animation-timeline: scroll()) { .hero3d-content { animation: none; } }
}
@media (max-width: 599px) {
  .hero3d-stage { aspect-ratio: 4 / 3.4; }
  .hero3d-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 374px) { .hero3d-stage { width: calc(100% - 32px); border-radius: 18px; } }

@keyframes hero3d-photo-in { from { transform: translateZ(0) scale(1.16); filter: blur(10px) saturate(.6) brightness(1.08); } }
@keyframes hero3d-fog-open { from { opacity: 1; } }
@keyframes hero3d-draw { from { stroke-dashoffset: 1000; } }
@keyframes hero3d-draw-1 { from { stroke-dashoffset: 1; } }
@keyframes hero3d-pulse { 0% { stroke-dashoffset: 1000; opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hero3d-pop { from { transform: scale(0); opacity: 0; } }
@keyframes hero3d-ring { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes hero3d-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .95; } 60% { opacity: .55; } 100% { transform: translate3d(14px, -120px, 0); opacity: 0; } }
@keyframes hero3d-sheen { 0% { --hero3d-sheen: -30%; } 18%, 100% { --hero3d-sheen: 130%; } }
@keyframes hero3d-line-in { from { transform: translateY(105%) rotate(2deg); } }
@keyframes hero3d-rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero3d-float { 0%, 100% { transform: rotateX(3deg) rotateY(-4deg) scale(1.07); } 50% { transform: rotateX(-2deg) rotateY(3deg) scale(1.07); } }
@keyframes hero3d-scroll-depth { to { transform: translate3d(0, 9%, -140px) rotateX(9deg); opacity: .55; } }
@keyframes hero3d-scroll-copy { to { transform: translateY(-48px); opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .hero3d *, .hero3d *::before, .hero3d *::after, .hero3d-search { animation: none !important; transition: none !important; }
  .hero3d-plate { transform: none !important; }
  .hero3d-route-pulse, .hero3d-pin-ring, .hero3d-sparks, .hero3d-glare { display: none; }
}
@media print {
  .hero3d-routes, .hero3d-sparks, .hero3d-glare, .hero3d-fog::after { display: none; }
  .hero3d * { animation: none !important; }
}