/* ==========================================================================
   Winedrop — "Vibe" layer
   Extra atmosphere, emotion & wine-craft on top of style.css.
   Palette stays bordeaux/crème/beige; adds a warm gold + deeper shadows,
   grain texture, wine-pour motion, tasting-note voice and refined details.
   ========================================================================== */

:root{
  --gold:#C9A24B;          /* warm candlelight gold accent */
  --gold-soft:#E4C87F;
  --rose:#8C3B47;          /* lighter wine tone for gradients */
  --plum:#3A1017;          /* deepest sediment tone */
  --grain:.04;             /* film-grain opacity */
}

/* --- Subtle film grain over the whole page for warmth & depth --- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* --- Selection & focus in wine tones --- */
::selection{background:var(--rose);color:var(--creme)}

/* Header condenses & warms slightly once you scroll past the hero top */
.site-header{transition:padding .3s ease,background .3s ease,box-shadow .3s ease}
.site-header.scrolled{background:rgba(247,241,233,.94);box-shadow:0 8px 30px -18px rgba(58,16,23,.5)}
.site-header.scrolled .header-inner{padding-top:11px;padding-bottom:11px}
.site-header.scrolled .brand-word{font-size:1.32rem;transition:font-size .3s}

/* Elegant thin gold rule used between/inside sections */
.vine-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto;max-width:280px;color:var(--gold)}
.vine-rule::before,.vine-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor)}
.vine-rule::after{background:linear-gradient(90deg,currentColor,transparent)}
.vine-rule svg{width:20px;height:20px;flex:none;opacity:.9}

/* ==========================================================================
   HERO — living, breathing, with a slow wine-pour light & drifting grain
   ========================================================================== */
/* Hero movement is driven by JS parallax (see main.js); CSS keeps a gentle
   idle zoom only until the user scrolls. */
.hero-media{animation:heroDrift 30s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.1)}}

/* richer, deeper overlay + a warm glow from lower-left like candlelight */
.hero-overlay{
  background:
    radial-gradient(120% 90% at 18% 100%, rgba(201,162,75,.20) 0%, transparent 44%),
    linear-gradient(105deg, rgba(58,16,23,.93) 0%, rgba(74,24,32,.84) 46%, rgba(58,16,23,.60) 100%);
}
/* extra legibility scrim behind the copy column */
.hero-content{text-shadow:0 1px 24px rgba(40,10,15,.35)}
.hero-lead{color:#f7ede1}
/* faint pouring-light streak that sweeps once on load */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(228,200,127,.10) 50%,transparent 60%);
  transform:translateX(-40%);
  animation:pourSheen 3.4s ease-out .3s both;
}
@keyframes pourSheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

.hero-content{animation:riseIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation:riseIn .8s ease .1s both}
.hero h1{animation:riseIn 1s cubic-bezier(.2,.7,.2,1) .18s both}
.hero-lead{animation:riseIn 1s ease .34s both}
.hero-actions{animation:riseIn 1s ease .5s both}
.hero-tag{animation:riseIn 1s ease .66s both}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* hero headline: a hairline gold underline that draws itself */
.hero h1{position:relative;display:inline-block}
.hero h1::after{
  content:"";position:absolute;left:0;bottom:-.12em;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  animation:drawLine 1.3s ease 1s forwards;
}
@keyframes drawLine{to{width:44%}}

.hero-tag{position:relative;padding-left:0}

/* ==========================================================================
   HERO — luchtig & editorial (foto full-bleed, crème tekstpaneel links,
   geen donkere waas). Additieve override; laadt na style.css dus wint.
   Omkeerbaar: verwijder dit blok + de class in index.html.
   ========================================================================== */
.hero-editorial{min-height:86vh;display:flex;align-items:center;color:var(--ink)}
.hero-editorial .hero-media{position:absolute;inset:0;transform:none;animation:none;
  background:url('/img/hero.jpg') center 40%/cover no-repeat}
/* crème sluier die van links (tekst) naar rechts wegvloeit */
.hero-editorial .hero-overlay{display:block;
  background:linear-gradient(96deg,rgba(247,241,233,.98) 0%,rgba(247,241,233,.95) 40%,rgba(247,241,233,.62) 60%,rgba(247,241,233,0) 80%)}
.hero-editorial::before{display:none}
.hero-editorial .hero-content{position:relative;z-index:2;max-width:600px;
  margin-left:0;margin-right:auto;text-shadow:none;padding-top:40px;padding-bottom:40px}
.hero-editorial .eyebrow{color:var(--gold-strong,#A9812E)}
.hero-editorial h1{color:var(--bordeaux)}
.hero-editorial h1::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-editorial .hero-lead{color:#4a3a34;max-width:470px}
.hero-editorial .hero-tag{color:var(--brown)}
.hero-editorial .btn-primary{background:var(--bordeaux);color:var(--creme);border-color:var(--bordeaux)}
.hero-editorial .btn-outline{border-color:var(--bordeaux);color:var(--bordeaux)}
.hero-editorial .scroll-cue{color:var(--brown)}
.hero-editorial .scroll-cue .glass{border-color:var(--brown)}
@media(max-width:820px){
  .hero-editorial{min-height:78vh}
  .hero-editorial .hero-media{background-position:center 38%}
  .hero-editorial .hero-overlay{background:linear-gradient(0deg,rgba(247,241,233,.98) 0%,rgba(247,241,233,.86) 40%,rgba(247,241,233,.12) 78%)}
  .hero-editorial .hero-content{align-self:flex-end;padding-bottom:54px}
  .hero-editorial .scroll-cue{display:none}
}

/* Scroll cue at the bottom of the hero */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--beige);
  font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.85}
.scroll-cue .glass{width:20px;height:30px;border:1.5px solid var(--beige);border-radius:12px;position:relative}
.scroll-cue .glass::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--gold);transform:translateX(-50%);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* ==========================================================================
   Buttons — a wine-fill that pours up on hover
   ========================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before,.btn-outline::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--rose),var(--bordeaux-dark));
  transform:translateY(101%);transition:transform .45s cubic-bezier(.3,.7,.2,1);
}
.btn-primary:hover::before{transform:translateY(0)}
.btn-outline::before{background:var(--bordeaux)}
.btn-outline:hover{color:var(--creme)}
.btn-outline:hover::before{transform:translateY(0)}
.btn-primary:hover{box-shadow:0 16px 36px -14px rgba(58,16,23,.6)}

/* Nav CTA gets a soft gold ring on hover */
.nav-cta{position:relative;overflow:hidden}
.nav-cta::after{content:"";position:absolute;inset:0;border:1px solid var(--gold-soft);border-radius:2px;opacity:0;transition:opacity .3s}
.nav-cta:hover::after{opacity:.7}

/* Header brand — tiny gold drop accent */
.brand-word::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:0 50% 50% 50%;background:var(--gold);transform:rotate(45deg) translateY(-2px);box-shadow:0 0 0 3px rgba(201,162,75,.18)}

/* ==========================================================================
   Section headers — script flourish + emotional kickers
   ========================================================================== */
.section-head .kicker{color:var(--gold);position:relative;display:inline-block}
.section-head h2{position:relative}
.section-head .flourish{display:block;font-family:var(--script);font-size:1.5rem;color:var(--rose);margin-top:.35em;font-weight:600;opacity:.9}

/* Kicker gets small flanking dashes for editorial feel */
.section-head .kicker::before,.section-head .kicker::after{content:"";display:inline-block;width:24px;height:1px;background:currentColor;vertical-align:middle;margin:0 12px;opacity:.6}

/* ==========================================================================
   Concept — drop-cap & a warm paper texture
   ========================================================================== */
.concept{position:relative;background:
  radial-gradient(140% 120% at 100% 0%, rgba(201,162,75,.05), transparent 55%),
  var(--white)}
.concept-text > p:first-of-type::first-letter{
  font-family:var(--display);font-size:3.4rem;line-height:.8;float:left;
  color:var(--bordeaux);margin:.06em .12em 0 0;padding-right:.04em;
}
.concept-img{position:relative}
.concept-img::before{
  content:"";position:absolute;inset:-14px -14px auto auto;width:70%;height:70%;
  border:1px solid var(--gold);border-radius:4px;z-index:-1;opacity:.55;
}
.concept-img figcaption,.over-img figcaption{
  font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.95rem;margin-top:12px;text-align:center
}

/* ==========================================================================
   Strip — deeper, with a poured-wine gradient & glowing numerals
   ========================================================================== */
.strip{background:
  radial-gradient(90% 140% at 0% 0%, rgba(201,162,75,.14), transparent 45%),
  linear-gradient(160deg,var(--bordeaux) 0%,var(--plum) 100%);
  position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.4),transparent)}
.strip::before{top:0}.strip::after{bottom:0}
.strip-item{position:relative;padding-left:6px}
.strip-num{font-size:2.4rem!important;color:var(--gold)!important;opacity:1!important;display:block;margin-bottom:.1em;line-height:1}
.strip-item h3{letter-spacing:.01em}

/* ==========================================================================
   Formules — tasting-note voice, glass icons, gold featured accents
   ========================================================================== */
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));opacity:0;transition:opacity .35s}
.card:hover::before{opacity:1}
.card-featured{box-shadow:0 26px 60px -26px rgba(58,16,23,.7);transform:translateY(-6px);
  background:linear-gradient(165deg,var(--bordeaux),var(--plum))}
.card-featured::before{opacity:1}
.card-featured:hover{transform:translateY(-11px)}
.badge{background:linear-gradient(90deg,var(--gold-soft),var(--gold));color:var(--plum);box-shadow:0 6px 18px -6px rgba(201,162,75,.7);letter-spacing:.22em}

/* little pour-glass mark above each formule name */
.card-head::before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;
  background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10l-1 7a4 4 0 0 1-3 3.9V19h3v2H8v-2h3v-6.1A4 4 0 0 1 8 9L7 2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10l-1 7a4 4 0 0 1-3 3.9V19h3v2H8v-2h3v-6.1A4 4 0 0 1 8 9L7 2z'/%3E%3C/svg%3E");
  color:var(--gold)}
.card-featured .card-head::before{color:var(--gold-soft)}
.promo-badge{background:linear-gradient(90deg,var(--bordeaux),var(--rose));box-shadow:0 12px 30px -12px rgba(90,31,40,.6);position:relative}
.promo-badge::after{content:"🍷";margin-left:.5em}

/* ==========================================================================
   Over — signature script line, framed portrait
   ========================================================================== */
.over-img{position:relative}
.over-img::before{content:"";position:absolute;inset:auto auto -14px -14px;width:60%;height:55%;border:1px solid var(--gold);border-radius:4px;z-index:-1;opacity:.5}
.check-inline li{padding-left:28px}
.check-inline li:before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;color:var(--gold);
  background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
/* fallback: keep the checkmark glyph too */
.check-inline li:before{content:"✓";background:none;-webkit-mask:none;mask:none;width:auto;height:auto;color:var(--gold);font-weight:700;top:0}

/* ==========================================================================
   Galerij — captions on hover, warm vignette
   ========================================================================== */
.gallery figure{position:relative}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(58,16,23,.55));opacity:0;transition:opacity .4s}
.gallery figure:hover::after{opacity:1}
.gallery figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:var(--creme);
  font-family:var(--serif);font-style:italic;font-size:1rem;opacity:0;transform:translateY(8px);transition:.4s}
.gallery figure:hover figcaption{opacity:1;transform:none}

/* ==========================================================================
   Pull quote — candlelit, with big decorative quotation mark
   ========================================================================== */
.pull{position:relative;overflow:hidden;background:
  radial-gradient(80% 120% at 50% 0%, rgba(201,162,75,.16), transparent 55%),
  linear-gradient(180deg,var(--plum),var(--bordeaux-dark))}
.pull::before{content:"\201C";position:absolute;top:-.12em;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:16rem;color:var(--gold);opacity:.12;line-height:1;pointer-events:none}
.pull blockquote{position:relative}
.pull cite{display:block;font-family:var(--script);font-style:normal;font-size:1.5rem;color:var(--gold-soft);margin-top:.6em}

/* ==========================================================================
   Blog — warmer cards, gold "read more" that slides
   ========================================================================== */
.blog-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.blog-card:hover{box-shadow:0 24px 54px -26px rgba(58,16,23,.55)}
.blog-cover{position:relative}
.blog-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(58,16,23,.28))}
.blog-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold);transition:gap .3s}
.blog-card:hover .blog-more{gap:12px}
.blog-more::after{content:"→"}

/* ==========================================================================
   Contact — invitation tone, gold-accented form focus
   ========================================================================== */
.contact{position:relative;background:
  radial-gradient(120% 90% at 0% 100%, rgba(201,162,75,.05), transparent 50%),var(--white)}
.contact-points li{transition:transform .25s}
.contact-points li:hover{transform:translateX(4px)}
.booking-form{position:relative}
.booking-form::before{content:"";position:absolute;inset:0;border-radius:8px;padding:1px;
  background:linear-gradient(160deg,rgba(201,162,75,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.16)}
.btn-block{font-size:.85rem}

/* ==========================================================================
   Footer — a last warm glow + gold divider
   ========================================================================== */
.site-footer{background:linear-gradient(180deg,var(--bordeaux-dark),var(--plum));position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.5),transparent)}
.footer-social a{color:var(--gold-soft)}
.footer-brand .brand-word::before{background:var(--gold)}

/* ==========================================================================
   Reveal — gentle stagger for children when a section enters
   ========================================================================== */
html.js .cards .card,html.js .strip-grid .strip-item,html.js .blog-grid .blog-card,
html.js .gallery figure,html.js .contact-points li{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.js .in .card,html.js .in .strip-item,html.js .in .blog-card,html.js .in figure,html.js .in .contact-points li{opacity:1;transform:none}
html.js .in .card:nth-child(2){transition-delay:.09s}
html.js .in .card:nth-child(3){transition-delay:.18s}
html.js .in .strip-item:nth-child(2){transition-delay:.1s}
html.js .in .strip-item:nth-child(3){transition-delay:.2s}
html.js .in .blog-card:nth-child(2){transition-delay:.09s}
html.js .in .blog-card:nth-child(3){transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  html.js .cards .card,html.js .strip-grid .strip-item,html.js .blog-grid .blog-card,
  html.js .gallery figure,html.js .contact-points li{opacity:1;transform:none;transition:none}
  .hero-media,.hero::before,.hero-content,.hero h1::after,.scroll-cue .glass::after{animation:none!important}
}

/* ==========================================================================
   Blog post page — candlelit hero to match the site
   ========================================================================== */
.post-hero{background:
  radial-gradient(80% 130% at 15% 100%, rgba(201,162,75,.16), transparent 55%),
  linear-gradient(160deg,var(--plum),var(--bordeaux-dark))!important;position:relative}
.post-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.4),transparent)}
.post-hero .kicker{color:var(--gold)}
.post-body a{color:var(--bordeaux);border-bottom:1px solid var(--gold-soft)}
.post-back{color:var(--gold)!important}
.post-body blockquote{font-family:var(--display);font-size:1.5rem;color:var(--bordeaux);border-left:3px solid var(--gold);padding-left:22px;margin:1.4em 0;font-style:normal}

/* ==========================================================================
   Responsive touch-ups
   ========================================================================== */
@media(max-width:680px){
  .pull::before{font-size:9rem}
  .concept-text > p:first-of-type::first-letter{font-size:2.8rem}
  .scroll-cue{display:none}
}