/* TRE — rondvaart-rotterdam — page styles v1
   Loads AFTER index.css and reuses its tokens/components:
   .cta, .eyebrow, .section-title, .s6-*, .faq-*, .reveal-*, .site-footer,
   .book-rail, .lightbox, .scenehint chevron animations. */

/* The shared book-rail fades in via --book (video pages); here it's always on */
.book-rail{opacity:1}

/* ═══ CINEMATIC HERO v2 — full-bleed media, parallax, kinetic type, shimmer ═══ */
.rv-hero--cinematic{display:block;max-width:none;padding:0;min-height:100svh;
  position:relative;overflow:hidden}
/* media layer oversized so parallax movement never reveals edges */
.rv-hero-media{position:absolute;inset:-7% -4%;z-index:0;overflow:hidden;will-change:transform}
.rv-hero-media img,.rv-hero-media video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
.rv-hero-media video{opacity:0;transition:opacity .9s ease}
.rv-hero-media video.is-playing{opacity:1}
/* cinematic vignette */
.rv-hero-atmos{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,13,.55) 0%,rgba(5,8,13,.12) 32%,
    rgba(5,8,13,.2) 62%,rgba(5,8,13,.82) 100%)}
/* water shimmer — pure CSS light band drifting across the frame */
.rv-hero-shimmer{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.8;
  background:linear-gradient(115deg,transparent 32%,rgba(255,240,200,.4) 47%,
    rgba(255,255,255,.18) 51%,transparent 64%);
  background-size:260% 260%;
  animation:rv-shimmer 9s ease-in-out infinite alternate}
@keyframes rv-shimmer{from{background-position:0% 0%}to{background-position:100% 100%}}
.rv-hero-inner{position:relative;z-index:2;min-height:100svh;
  display:flex;align-items:center;max-width:1280px;margin:0 auto;
  padding:clamp(84px,12vh,140px) clamp(20px,5vw,64px) clamp(96px,13vh,150px)}
.rv-hero--cinematic .rv-hero-copy{max-width:660px;will-change:transform;
  background:rgba(6,10,16,.55);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  border:1px solid rgba(255,255,255,.13);border-radius:26px;
  padding:clamp(24px,4.5vh,46px) clamp(24px,4vw,50px);
  box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rv-hero--cinematic .rv-hero-copy{background:rgba(6,10,16,.85)}}
/* floating photo card — fastest parallax layer */
.rv-float-card{position:absolute;right:clamp(20px,6vw,90px);bottom:clamp(100px,15vh,170px);
  z-index:2;width:clamp(180px,19vw,290px);margin:0;border-radius:16px;overflow:hidden;
  transform:rotate(2.5deg);will-change:transform;pointer-events:none;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.rv-float-card img{width:100%;display:block}
@media(max-width:1050px){.rv-float-card{display:none}}
/* kinetic H1 — per-letter rise, staggered, done in <400ms */
.rv-title .kin{display:inline-block;opacity:0;
  transform:translateY(.55em) rotate(3deg);
  animation:kin-rise .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--ki)*24ms)}
@keyframes kin-rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rv-hero-shimmer{animation:none;opacity:.3}
  .rv-title .kin{opacity:1;transform:none;animation:none}
  .rv-hero-media video{display:none}
}

/* ═══ HERO — immersive entry, zero video: typography + photo collage ═══ */
.rv-hero{position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,72px);
  align-items:center;max-width:1280px;margin:0 auto;
  padding:clamp(84px,12vh,140px) clamp(20px,5vw,64px) clamp(56px,9vh,110px)}
.rv-hero-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 78% 12%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(45% 40% at 12% 88%, rgba(62,201,167,.07), transparent 60%),
    var(--c-black)}
.rv-hero-copy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.rv-title{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.4rem,5.6vw,4.6rem)}
.rv-sub{margin:0;font-size:clamp(1rem,1.5vw,1.25rem);color:#C8D4E0;
  line-height:1.6;max-width:44ch}
.rv-price-anchor{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:.3rem 0 0}
.rv-price-big{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;
  color:var(--c-gold-400);font-variant-numeric:tabular-nums;line-height:1}
.rv-price-meta{font-size:.95rem;color:#9AA6B6}
.rv-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:.6rem}
.cta--ghost{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35)}
.cta--ghost:not([aria-disabled="true"]):hover{background:rgba(255,255,255,.08);
  box-shadow:none}
.rv-cta-note{font-size:.75rem;color:#5A6678;margin:.2rem 0 0}
.rv-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;
  margin:.6rem 0 0;padding:0}
.rv-trust li{color:#E7ECF2;font-weight:600;font-size:.92rem;
  display:flex;align-items:center;gap:8px}

/* Photo collage — native-resolution cards (photos are 600×540), never stretched */
.rv-hero-photos{display:grid;gap:16px;max-width:560px;justify-self:end;width:100%}
.rv-photo-card{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 90px rgba(0,0,0,.55)}
.rv-photo-card img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.rv-photo-card--a{aspect-ratio:600/430;transform:rotate(-1.2deg)}
.rv-photo-card--b{aspect-ratio:600/300;transform:rotate(1deg) translateY(-4px)}
.rv-photo-caption{position:absolute;bottom:0;left:0;right:0;pointer-events:none;
  padding:22px 14px 11px;
  background:linear-gradient(0deg,rgba(5,8,13,.78) 0%,transparent 100%);
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:#DCE6F2;font-weight:600}
@keyframes rv-slowzoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.rv-photo-card--a img{animation:rv-slowzoom 16s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.rv-photo-card--a img{animation:none}}

/* hero scroll cue (reuses chevron keyframes from index.css) */
.rv-scrollcue{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none}
.rv-scrollcue .scenehint-cue{color:var(--c-gold-400)}

/* ═══ CHOICE — tickets vs private ═══ */
.rv-choice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);
  max-width:1080px;margin:0 auto;padding:clamp(48px,8vh,96px) clamp(20px,5vw,64px)}
.rv-card{background:rgba(10,15,23,.72);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:clamp(24px,3.5vw,40px);
  display:flex;flex-direction:column;gap:.8rem;
  transition:border-color .2s,transform .2s}
.rv-card:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.rv-card--gold{border-color:rgba(212,175,55,.45);
  box-shadow:0 18px 70px rgba(212,175,55,.08)}
.rv-card-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-gold-400);font-weight:700}
.rv-card h2{margin:0;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:700;
  letter-spacing:-.01em}
.rv-card-price{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.rv-card-price small{font-size:.45em;font-weight:600;color:#9AA6B6;letter-spacing:.02em}
.rv-card ul{list-style:none;margin:.2rem 0 .4rem;padding:0;
  display:flex;flex-direction:column;gap:.5rem}
.rv-card li{display:flex;gap:9px;align-items:flex-start;color:#C8D4E0;
  font-size:.93rem;line-height:1.5}
.rv-card .tick{flex-shrink:0}
.rv-card .cta{margin-top:auto;justify-content:center}

/* ═══ ROUTE ═══ */
.rv-route{max-width:1080px;margin:0 auto;
  padding:clamp(40px,6vh,72px) clamp(20px,5vw,64px)}
.rv-route-grid{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(20px,3vh,36px)}
.rv-route-chips{display:flex;flex-wrap:wrap;gap:10px}
.rv-chip{display:inline-flex;align-items:center;gap:8px;
  background:rgba(62,201,167,.08);border:1px solid rgba(62,201,167,.3);
  border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600;color:#DCE6F2}
.rv-chip b{color:var(--c-mint)}
.rv-chip--turn{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.4)}
.rv-chip--turn b{color:var(--c-gold-400)}
.rv-route-note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;
  color:#8A9AB0;font-size:.9rem;line-height:1.6}
.rv-route-note svg{flex-shrink:0;margin-top:2px}
.rv-route-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rv-route-photos .rv-photo-card{transform:none}
.rv-route-photos .rv-photo-card img{aspect-ratio:600/540}

/* ═══ DRINKS on board ═══ */
.rv-drinks{max-width:1080px;margin:0 auto;
  padding:clamp(40px,6vh,72px) clamp(20px,5vw,64px)}
.rv-drinks-grid{display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(20px,3vh,36px)}
.rv-drinks-photo{border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.rv-drinks-photo img{width:100%;display:block;cursor:zoom-in}
.rv-drinks-list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column}
.rv-drinks-list li{display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.rv-drinks-list li:last-child{border-bottom:none}
.rv-drink-name{color:#E7ECF2;font-weight:600;font-size:.95rem}
.rv-drink-note{color:#5A6678;font-size:.78rem}
.rv-drink-dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.15);
  transform:translateY(-4px)}
.rv-drink-price{color:var(--c-gold-400);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-drinks-foot{margin:14px 0 0;font-size:.82rem;color:#5A6678}

/* ═══ SUITABLE FOR ═══ */
.rv-occasions{max-width:1080px;margin:0 auto;text-align:center;
  padding:clamp(40px,6vh,72px) clamp(20px,5vw,64px)}
.rv-occasions .rv-route-chips{justify-content:center;margin-top:clamp(18px,3vh,30px)}
.rv-occasions .rv-chip{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);color:#C8D4E0}

/* ═══ PHOTO STRIP (reuses .s7-strip pattern sizes) ═══ */
.rv-strip{display:flex;gap:12px;overflow-x:auto;max-width:1080px;
  margin:0 auto;padding:0 clamp(20px,5vw,64px) clamp(40px,6vh,72px);
  scrollbar-width:thin;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rv-strip img{width:clamp(150px,22vw,220px);height:clamp(135px,20vw,198px);
  object-fit:cover;border-radius:12px;flex-shrink:0;scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.08);cursor:zoom-in;display:block;
  transition:border-color .2s,transform .2s}
.rv-strip img:hover{border-color:rgba(212,175,55,.3);transform:scale(1.02)}

/* ═══ FINAL CTA ═══ */
.rv-final{position:relative;overflow:hidden;text-align:center;
  padding:clamp(72px,12vh,140px) clamp(20px,5vw,64px)}
.rv-final-bg{position:absolute;inset:0;z-index:-1}
.rv-final-bg img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.32) saturate(.9) blur(6px);transform:scale(1.12)}
.rv-final-title{margin:.3rem 0 .6rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.05;font-size:clamp(2rem,5vw,3.8rem)}
.rv-final-sub{color:#C8D4E0;max-width:52ch;margin:0 auto 1.2rem;line-height:1.6}
.rv-final .rv-cta-row{justify-content:center}

/* ═══ SHARED: walking-route timeline (stadswandeling) ═══ */
.walk-route{list-style:none;margin:clamp(20px,3vh,36px) 0 0;padding:0;
  counter-reset:stop;max-width:640px}
.walk-route li{position:relative;padding:0 0 22px 58px;counter-increment:stop}
.walk-route li::before{content:counter(stop);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;
  background:rgba(62,201,167,.1);border:1px solid rgba(62,201,167,.4);
  color:var(--c-mint);font-weight:700;font-size:.88rem;
  display:flex;align-items:center;justify-content:center}
.walk-route li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;
  width:2px;background:linear-gradient(rgba(62,201,167,.35),rgba(62,201,167,.08))}
.walk-route li:last-child::after{display:none}
.walk-route h3{margin:0 0 4px;font-size:clamp(.98rem,1.3vw,1.1rem);
  font-weight:600;color:#E7ECF2;padding-top:6px}
.walk-route p{margin:0;font-size:.88rem;color:#8A9AB0;line-height:1.55}
.walk-stop--bar::before{background:rgba(212,175,55,.12);
  border-color:rgba(212,175,55,.5);color:var(--c-gold-400)}
.walk-stop--bar h3{color:var(--c-gold-400)}

/* ═══ SHARED: home product cards ═══ */
.home-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(14px,2vw,22px);max-width:1240px;margin:0 auto;
  padding:clamp(48px,8vh,96px) clamp(20px,5vw,64px)}
.hp-card{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:inherit;
  background:rgba(10,15,23,.72);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:14px 14px 22px;
  transition:border-color .2s,transform .25s}
.hp-card:hover{border-color:rgba(212,175,55,.45);transform:translateY(-4px)}
.hp-img{aspect-ratio:3/2;overflow:hidden;border-radius:12px;margin-bottom:6px}
.hp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hp-card:hover .hp-img img{transform:scale(1.045)}
.hp-card h3{margin:0;padding:0 8px;font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:700;letter-spacing:-.01em;color:#fff}
.hp-price{padding:0 8px;font-weight:800;color:var(--c-gold-400);
  font-variant-numeric:tabular-nums;font-size:1.05rem}
.hp-price small{color:#8A9AB0;font-weight:500;font-size:.78rem}
.hp-desc{margin:0;padding:0 8px;font-size:.88rem;color:#8A9AB0;line-height:1.55;flex:1}
.hp-go{padding:0 8px;font-size:.85rem;font-weight:700;color:var(--c-gold-400)}
.hp-card:hover .hp-go{text-decoration:underline}

/* ═══ SHARED: USP row (home) ═══ */
.usp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(14px,2vw,28px);max-width:1080px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(48px,8vh,96px)}
.usp{text-align:center;padding:22px 14px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.usp b{display:block;font-size:1.02rem;color:#E7ECF2;margin-bottom:6px}
.usp span{font-size:.85rem;color:#8A9AB0;line-height:1.5}

/* ═══ responsive ═══ */
@media(max-width:900px){
  .rv-hero{grid-template-columns:1fr;min-height:auto;
    padding-top:clamp(72px,10vh,110px)}
  .rv-hero-photos{max-width:100%;justify-self:stretch;
    grid-template-columns:1.2fr .8fr}
  .rv-photo-card--a{aspect-ratio:auto;min-height:200px}
  .rv-photo-card--b{aspect-ratio:auto;min-height:200px;transform:rotate(1deg)}
  .rv-choice,.rv-route-grid,.rv-drinks-grid{grid-template-columns:1fr}
  .rv-drinks-grid{gap:20px}
  .rv-scrollcue{display:none}
}
@media(max-width:760px){
  .rv-hero{padding-bottom:96px} /* clear the fixed booking bar */
}