/*
Theme Name: bookadew26
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.8.2
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bookadew26
Tags: 
*/

:root {
  --tilt-height-desktop: 96px;
  --tilt-height-mobile: 48px;
  --tilt-bg: var(--wp--preset--color--background-primary);
}

.spacer {
  background-color: var(--wp--preset--color--background-primary);
  min-height: 64px;
}

@media (max-width: 768px) {
  .spacer {
    background-color: var(--wp--preset--color--background-primary);
    min-height: 32px;
  }
}


/* FLOAT EFFECTEN */

/* varianten */
x.floaty1 { animation: bob1 7s ease-in-out infinite; }
x.floaty2 { animation: bob2 6s ease-in-out infinite; }
x.floaty3 { animation: bob3 5.5s ease-in-out infinite; }
x.floaty4 { animation: bob4 8s ease-in-out infinite; }

/* keyframes */
@keyframes bob1 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-12px) rotate(1deg); }
}
@keyframes bob2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-8px) rotate(-1.5deg); }
}
@keyframes bob3 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-15px) rotate(2deg); }
}
@keyframes bob4 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-10px) rotate(-0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .floaty1, .floaty2, .floaty3, .floaty4 { animation: none !important; }
}

/* Hero canvas */
.Hero { min-height: calc(70vh + 40px); overflow: hidden; }

/* Ouders (Foto …) dienen alleen als container */
.Foto { position: relative; }

/* De lege innerlaag met het boek */
.book-layer{
  position: absolute;
  inset: 0;
  background: center/contain no-repeat; /* stel de afbeelding in via blokinstellingen */
  z-index: 1;
  pointer-events: none;                 /* optioneel: niet klikbaar */
}

/* Content en andere children bewegen niet mee */
.Foto > *:not(.book-layer){ position: relative; z-index: 2; }

/* 1) Strakke val (zoals eerder, zonder scale) */
@keyframes fallIn {
  0%   { transform: translateY(-120vh); opacity: 0; }
  100% { transform: translateY(0);      opacity: 1; }
}

/* 2) Bob gebruikt variabelen voor amplitude en tilt */
@keyframes bobVar {
  0%,100% {
    transform: translateY(0) rotate(var(--base-rot, 0deg));
  }
  50% {
    transform: translateY(calc(-1 * var(--amp, 0px)))
               rotate(calc(var(--base-rot, 0deg) + var(--tilt, 0deg)));
  }
}

/* 3) Dempen: laat amplitude/tilt naar 0 lopen zodat bob vanzelf stopt */
@property --amp  { syntax: '<length>'; initial-value: 0px;  inherits: false; }
@property --tilt { syntax: '<angle>';  initial-value: 0deg; inherits: false; }

@keyframes settleAmp  { to { --amp: 0px; } }
@keyframes settleTilt { to { --tilt: 0deg; } }

/* 4) Koppeling per laag: fallIn -> bobVar (oneindig) + demping naar nul */
.floaty1 {
  /* startwaarden (kun je per laag tweaken) */
  --amp: 14px;            /* begin-bob hoogte */
  --tilt: 1deg;           /* begin-bob extra rotatie */
  --base-rot: 0deg;       /* eventuele vaste eindtilt */
  --fall: 1.0s;           /* valduur */
  --bob:  6.0s;           /* bob-cyclusduur */
  --settle: 8s;           /* dempingsduur tot stilstand */

  /* animaties: val -> (bob + demp tegelijk) */
  animation:
    fallIn var(--fall) cubic-bezier(0.22,1,0.36,1) forwards,
    bobVar var(--bob) ease-in-out infinite var(--fall),
    settleAmp  var(--settle) ease-out forwards var(--fall),
    settleTilt var(--settle) ease-out forwards var(--fall);
}

.floaty2 {
  --amp: 12px; --tilt: 0.8deg; --base-rot: 0deg;
  --fall: 1.1s; --bob: 5.5s; --settle: 7s;
  animation:
    fallIn var(--fall) cubic-bezier(0.22,1,0.36,1) forwards,
    bobVar var(--bob) ease-in-out infinite var(--fall),
    settleAmp  var(--settle) ease-out forwards var(--fall),
    settleTilt var(--settle) ease-out forwards var(--fall);
}

.floaty3 {
  --amp: 16px; --tilt: 1.2deg; --base-rot: 0deg;
  --fall: 1.2s; --bob: 6s; --settle: 18.5s;
  animation:
    fallIn var(--fall) cubic-bezier(0.22,1,0.36,1) forwards,
    bobVar var(--bob) ease-in-out infinite var(--fall),
    settleAmp  var(--settle) ease-out forwards var(--fall),
    settleTilt var(--settle) ease-out forwards var(--fall);
}

.floaty4 {
  --amp: 10px; --tilt: 0.6deg; --base-rot: 0deg;
  --fall: 1.3s; --bob: 6.5s; --settle: 7.5s;
  animation:
    fallIn var(--fall) cubic-bezier(0.22,1,0.36,1) forwards,
    bobVar var(--bob) ease-in-out infinite var(--fall),
    settleAmp  var(--settle) ease-out forwards var(--fall),
    settleTilt var(--settle) ease-out forwards var(--fall);
}

/* Optioneel: respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floaty1, .floaty2, .floaty3, .floaty4 { animation: none !important; }
}