/* ═══════════════════════════════════════════════════════════════════════
   hero-open.css · editorial opener
   Statische intro-pagina: portretten Roy (links) & Bas (rechts) +
   centrale intro-tekst op nek-hoogte. Géén scroll-animatie, géén
   filter-calc per frame — rustig, stabiel, geen flikker.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-open{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--paper, #f5ece1);
  color:var(--ink, #1a1612);
  isolation:isolate;
}

.hero-open-stage{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(84px, 12vh, 140px) 0 clamp(60px, 10vh, 120px);
}

/* ─── Paper substrate + crop marks ──────────────────────────────────── */
.hero-open-bp{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* warm wash die zacht ademt (via animation op background-position) */
    radial-gradient(1200px 800px at 70% 20%, rgba(184,150,74,.09), transparent 60%),
    radial-gradient(900px 700px at 20% 80%, rgba(26,34,48,.06), transparent 65%),
    var(--paper, #f5ece1);
  background-size:auto, auto, auto;
  background-position:center, center, center;
  opacity:.95;
  animation:hero-open-paper-breath 18s ease-in-out infinite;
}
@keyframes hero-open-paper-breath {
  0%, 100% { filter:brightness(1) saturate(1); }
  50%      { filter:brightness(1.03) saturate(1.06); }
}

/* Ambient video achter de portretten — zeer lage opacity, drukt niks weg */
.hero-open-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:multiply;
  /* lichte subtiele zoom-drift om de film ademend te laten voelen */
  animation:hero-open-video-drift 32s ease-in-out infinite alternate;
}
@keyframes hero-open-video-drift {
  0%   { transform:scale(1.02) translate3d(-1.5%, 0, 0); }
  100% { transform:scale(1.06) translate3d(1.5%, -1%, 0); }
}

/* Blauwdruk-raster — subtiele draw-in op page-load + hele zachte drift */
.hero-open-grid{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation:hero-open-grid-fade 1.8s ease-out .2s forwards;
}
@keyframes hero-open-grid-fade {
  from { opacity:0; }
  to   { opacity:.9; }
}
/* Peilijn (horizontale) — tekent zich van links naar rechts in */
.hero-open-grid-h{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:hero-open-grid-draw 2.6s cubic-bezier(.22,.61,.36,1) .6s forwards;
}
.hero-open-grid-v{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:hero-open-grid-draw 2.2s cubic-bezier(.22,.61,.36,1) .4s forwards;
}
@keyframes hero-open-grid-draw {
  to { stroke-dashoffset:0; }
}
.hero-open-crop{
  position:absolute;
  width:28px; height:28px;
  z-index:1;
  border-color:rgba(26,22,18,.35);
  border-style:solid;
  border-width:0;
  pointer-events:none;
}
.hero-open-crop.tl{ top:22px;    left:22px;  border-top-width:1px; border-left-width:1px; }
.hero-open-crop.tr{ top:22px;    right:22px; border-top-width:1px; border-right-width:1px; }
.hero-open-crop.bl{ bottom:22px; left:22px;  border-bottom-width:1px; border-left-width:1px; }
.hero-open-crop.br{ bottom:22px; right:22px; border-bottom-width:1px; border-right-width:1px; }

/* Title-block signature (onderin links) */
.hero-open-titleblock{
  position:absolute;
  left:clamp(24px, 3vw, 48px);
  bottom:clamp(24px, 3vw, 48px);
  display:grid;
  grid-template-columns:auto auto;
  column-gap:14px;
  row-gap:2px;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(26,22,18,.55);
  z-index:2;
  pointer-events:none;
}
.hero-open-titleblock .k{ opacity:.6; }
.hero-open-titleblock .v{ font-family:var(--serif, 'Fraunces', serif); letter-spacing:0; text-transform:none; font-size:.82rem; color:rgba(26,22,18,.8); }
.hero-open-titleblock .v em{ font-style:italic; color:var(--accent, #b8964a); }

/* ─── Portretten — STATISCH, geen flikker ──────────────────────────── */
.hero-open-figures{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  /* contain:paint isoleert paint zodat nabije layers deze laag niet
     opnieuw laten rasteren bij andere repaints. */
  contain:paint;
}

.hero-open-figure{
  position:absolute;
  bottom:0;
  height:min(92vh, 860px);
  width:auto;
  max-width:48vw;
  object-fit:contain;
  object-position:bottom center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
  /* Statisch, discrete filter — GEEN var() calc die per frame herrekent. */
  filter:grayscale(.04) contrast(1.02) brightness(.98);
  /* GPU-laag expliciet geforceerd. GEEN will-change:filter (die houdt de
     layer eindeloos "hot" en veroorzaakt resampling bij elke repaint). */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Start onzichtbaar én iets buiten beeld; fade-in + schuif-in op load. */
  opacity:0;
}
/* Roy (links): schuift bij load subtiel van links in, en ademt daarna
   zeer rustig op-en-neer. De keyframes bevatten de horizontale rust-
   positie zodat de animation-composite (niet CSS transform) stabiel is. */
.hero-open-figure.is-roy{
  left:0;
  animation:
    hero-open-roy-enter 1.3s cubic-bezier(.22,.61,.36,1) .25s forwards,
    hero-open-roy-float 11s ease-in-out 1.6s infinite;
}
/* Bas (rechts): schuift van rechts in, ademt op eigen tempo — creëert
   het gevoel van twee onafhankelijke ritmes die samen in balans zijn. */
.hero-open-figure.is-bas{
  right:0;
  animation:
    hero-open-bas-enter 1.3s cubic-bezier(.22,.61,.36,1) .25s forwards,
    hero-open-bas-float 13s ease-in-out 1.6s infinite;
}

/* Entry-animaties — fade + subtiele slide van buiten naar rust-positie */
@keyframes hero-open-roy-enter {
  0%   { opacity:0; transform:translate3d(-48%, 16px, 0); }
  100% { opacity:1; transform:translate3d(-36%,  0px, 0); }
}
@keyframes hero-open-bas-enter {
  0%   { opacity:0; transform:translate3d( 48%, 16px, 0); }
  100% { opacity:1; transform:translate3d( 36%,  0px, 0); }
}

/* Breathing floats — lichte verticale ademhaling. Twee verschillende
   perioden zodat de portretten nooit perfect in sync lopen. */
@keyframes hero-open-roy-float {
  0%, 100% { transform:translate3d(-36%, 0,   0); }
  50%      { transform:translate3d(-36%, -9px, 0); }
}
@keyframes hero-open-bas-float {
  0%, 100% { transform:translate3d( 36%, 0,    0); }
  50%      { transform:translate3d( 36%, -12px, 0); }
}

@media (max-width: 980px){
  .hero-open-figure{ height:64vh; max-width:60vw; }
  .hero-open-figure.is-roy{
    animation:hero-open-roy-enter-m 1.3s cubic-bezier(.22,.61,.36,1) .25s forwards,
              hero-open-roy-float-m 11s ease-in-out 1.6s infinite;
  }
  .hero-open-figure.is-bas{
    animation:hero-open-bas-enter-m 1.3s cubic-bezier(.22,.61,.36,1) .25s forwards,
              hero-open-bas-float-m 13s ease-in-out 1.6s infinite;
  }
  @keyframes hero-open-roy-enter-m { 0% { opacity:0; transform:translate3d(-60%, 14px, 0); } 100% { opacity:.55; transform:translate3d(-48%, 0, 0); } }
  @keyframes hero-open-bas-enter-m { 0% { opacity:0; transform:translate3d( 60%, 14px, 0); } 100% { opacity:.55; transform:translate3d( 48%, 0, 0); } }
  @keyframes hero-open-roy-float-m { 0%, 100% { transform:translate3d(-48%, 0, 0); } 50% { transform:translate3d(-48%, -7px, 0); } }
  @keyframes hero-open-bas-float-m { 0%, 100% { transform:translate3d( 48%, 0, 0); } 50% { transform:translate3d( 48%, -9px, 0); } }
}

@media (prefers-reduced-motion: reduce){
  .hero-open-figure{ animation:none; opacity:1; }
  .hero-open-figure.is-roy{ transform:translate3d(-36%, 0, 0); }
  .hero-open-figure.is-bas{ transform:translate3d( 36%, 0, 0); }
  .hero-open-bp,
  .hero-open-video,
  .hero-open-grid-h,
  .hero-open-grid-v{ animation:none; }
  .hero-open-grid-h,
  .hero-open-grid-v{ stroke-dashoffset:0; }
}

/* ─── Intro-tekst blok (centraal, nek-hoogte) ──────────────────────── */
.hero-open-intro{
  position:relative;
  z-index:3;
  max-width:720px;
  padding:0 clamp(20px, 4vw, 40px);
  text-align:center;
  /* Editoriële vorm-opbouw: eyebrow → titel → body → cue */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.2vh, 26px);
}

.hero-open-intro .eyebrow{
  display:inline-block;
  margin:0;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:clamp(.68rem, 1vw, .8rem);
  color:var(--accent, #b8964a);
  opacity:0;
  transform:translateY(8px);
  animation:hero-open-text .7s ease-out .25s forwards;
}

.hero-open-intro .hero-intro-title{
  margin:0;
  font-family:var(--serif, 'Fraunces', 'Cormorant Garamond', 'Playfair Display', serif);
  font-size:clamp(2.8rem, 7.5vw, 5.8rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--ink, #1a1612);
  opacity:0;
  transform:translateY(12px);
  animation:hero-open-text .9s ease-out .4s forwards;
}
.hero-open-intro .hero-intro-title em{
  font-style:italic;
  color:var(--accent, #b8964a);
  font-weight:500;
}

.hero-open-intro .hero-intro-body{
  margin:0;
  max-width:52ch;
  font-family:var(--sans, 'Inter', sans-serif);
  font-size:clamp(.96rem, 1.25vw, 1.08rem);
  line-height:1.7;
  color:var(--ink-soft, #4a4035);
  opacity:0;
  transform:translateY(10px);
  animation:hero-open-text .9s ease-out .6s forwards;
}

/* Scroll-cue: discrete uitnodiging om door te scrollen */
.hero-open-cue{
  margin-top:clamp(8px, 2vh, 20px);
  display:inline-flex;
  align-items:center;
  gap:.9em;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft, #4a4035);
  text-decoration:none;
  opacity:0;
  animation:hero-open-cue-fade 1.2s ease-out .95s forwards;
  transition:color .3s ease;
}
.hero-open-cue:hover{ color:var(--accent, #b8964a); }
.hero-open-cue-line{
  width:44px; height:1px;
  background:currentColor;
  transform-origin:left center;
  animation:hero-open-cue-pulse 2.8s ease-in-out 1.8s infinite;
}
.hero-open-cue-text{ display:inline-block; }

@keyframes hero-open-text {
  to { opacity:1; transform:translateY(0); }
}
@keyframes hero-open-cue-fade {
  to { opacity:.78; }
}
@keyframes hero-open-cue-pulse {
  0%, 100% { transform:scaleX(.45); opacity:.55; }
  50%      { transform:scaleX(1);   opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-open-intro .eyebrow,
  .hero-open-intro .hero-intro-title,
  .hero-open-intro .hero-intro-body,
  .hero-open-cue{ animation:none; opacity:1; transform:none; }
  .hero-open-cue-line{ animation:none; transform:scaleX(1); }
}