/* De openingspagina. Alle opkomst-animaties schalen met --tempo: 1 bij het eerste bezoek, korter als je terugkomt,
   en bijna nul als je tijdens de opening op het scherm tikt. */

.opening {
  --tempo: 1;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 2.1rem) 1.6rem calc(var(--onder) + 1.9rem);
  background:
    radial-gradient(ellipse 85% 45% at 50% 62%, rgb(216 180 95 / .13), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 0%, rgb(22 58 51 / .5), transparent 65%);
  transition: padding-bottom .6s var(--ease-uit);
}
.opening.verbroken { padding-bottom: calc(var(--tabbalk-h) + var(--onder) + 1.6rem); }

.opening .in {
  animation-name: var(--anim, opkomen);
  animation-duration: calc(var(--duur, 1s) * var(--tempo));
  animation-delay: calc(var(--start, 0s) * var(--tempo));
  animation-timing-function: var(--ease-uit);
  animation-fill-mode: both;
}

@keyframes spatie { from { opacity: 0; letter-spacing: 1.1em; filter: blur(4px); } }
@keyframes onthul {
  from { opacity: 0; clip-path: inset(-20% 50% -20% 50%); letter-spacing: .32em; }
  to { opacity: 1; clip-path: inset(-20% -10% -20% -10%); }
}
@keyframes breed { from { opacity: 0; scale: 0 1; } }

.goudstof {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* ---------- De lijst ---------- */

.lijst {
  position: absolute;
  z-index: 1;
  inset: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(var(--onder) + 10px);
  pointer-events: none;
  transition: bottom .6s var(--ease-uit);
}
.opening.verbroken .lijst { bottom: calc(var(--tabbalk-h) + var(--onder) + 10px); }

.zijde {
  position: absolute;
  animation: breed calc(1.5s * var(--tempo)) var(--ease-uit) calc(.1s * var(--tempo)) both;
}
.zijde.boven, .zijde.onder { left: 63px; right: 63px; height: 7px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn-vaag); }
.zijde.boven { top: 0; }
.zijde.onder { bottom: 0; transform: scaleY(-1); }
.zijde.links, .zijde.rechts { top: 63px; bottom: 63px; width: 7px; border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn-vaag); animation-name: hoog; }
.zijde.links { left: 0; }
.zijde.rechts { right: 0; transform: scaleX(-1); }
@keyframes hoog { from { opacity: 0; scale: 1 0; } }

.hoek-plek { position: absolute; width: 64px; height: 64px; }
.hoek-plek.lb { left: 0; top: 0; }
.hoek-plek.rb { right: 0; top: 0; transform: scaleX(-1); }
.hoek-plek.lo { left: 0; bottom: 0; transform: scaleY(-1); }
.hoek-plek.ro { right: 0; bottom: 0; transform: scale(-1); }
.hoek { width: 100%; height: 100%; overflow: visible; }
.hoek path {
  stroke: var(--goud);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: teken calc(1.6s * var(--tempo)) var(--ease-uit) calc(.35s * var(--tempo)) forwards;
}
.hoek .vaag { stroke: var(--lijn); }
.hoek .ruit {
  fill: var(--goud);
  stroke: none;
  stroke-dasharray: none;
  animation: verschijnen calc(.8s * var(--tempo)) ease calc(1.3s * var(--tempo)) both;
  filter: drop-shadow(0 0 4px rgb(244 221 156 / .7));
}

/* ---------- Tekst ---------- */

.opening-inhoud {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.opening p { margin: 0; }

.familie {
  --anim: spatie; --start: .55s; --duur: 1.6s;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .74rem;
  letter-spacing: .42em;
  margin-right: -.42em;
}
.familie::before, .familie::after {
  content: "";
  width: .38rem; height: .38rem;
  rotate: 45deg;
  background: var(--goud);
  box-shadow: 0 0 6px rgb(244 221 156 / .6);
}

.verzoek {
  --start: .95s;
  margin-top: .75rem !important;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--creme-zacht);
}

.titel { position: relative; margin: .55rem 0 0; font-weight: 400; line-height: 1; }
.titel::before {
  /* een vaste gloed achter de titel; een filter zou bij elke glansbeweging opnieuw berekend worden */
  content: "";
  position: absolute;
  left: 50%; top: 62%;
  width: 115%; height: 80%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(216 180 95 / .2), transparent);
  z-index: -1;
  pointer-events: none;
}
.titel-het {
  --start: 1.25s;
  display: block;
  font-family: var(--deco);
  font-size: 1.3rem;
  letter-spacing: .55em;
  margin-right: -.55em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.titel-testament {
  --anim: onthul; --start: 1.4s; --duur: 1.7s;
  display: block;
  margin-top: .2rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 13vw, 5.4rem);
  letter-spacing: .03em;
}
.glans {
  background-image: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .9) 50%, transparent 58%), var(--metaal);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0, 0 0;
  animation: glans 7s ease-in-out calc(3.4s * var(--tempo)) infinite;
}
@keyframes glans {
  0% { background-position: 150% 0, 0 0; }
  28%, 100% { background-position: -50% 0, 0 0; }
}

.titel-onder {
  --start: 2.05s;
  margin-top: .55rem !important;
  font-style: italic;
  font-size: 1.22rem;
  color: var(--goud-licht);
}
.opening-inhoud > .ornament { --anim: breed; --start: 2.25s; --duur: 1.2s; margin-top: .9rem; }

/* ---------- Het tafereel: maan, stralen, schip en golven ---------- */

.scene {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: 11rem;
  max-height: 21rem;
  margin-block: .5rem .2rem;
  container-type: size;
  z-index: 0;
}

.stralen {
  --anim: stralen-in; --start: 2.3s; --duur: 2.4s;
  position: absolute;
  left: 50%;
  top: calc(100cqh - 3cqh - min(74cqh, 82cqw) / 2);
  width: max(240cqh, 150cqw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgb(244 221 156 / .16) 0deg 1.6deg, transparent 1.6deg 7.5deg);
  mask: radial-gradient(circle, #000 12%, rgb(0 0 0 / .5) 30%, transparent 58%);
  -webkit-mask: radial-gradient(circle, #000 12%, rgb(0 0 0 / .5) 30%, transparent 58%);
}
.stralen.in {
  animation:
    stralen-in calc(2.4s * var(--tempo)) var(--ease-uit) calc(2.3s * var(--tempo)) both,
    draaien 200s linear infinite;
}
@keyframes stralen-in { from { opacity: 0; scale: .4; } }

.scene::before {
  /* gloed achter de maan */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100cqh - 3cqh - min(74cqh, 82cqw) / 2);
  width: calc(min(74cqh, 82cqw) * 1.9);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgb(244 221 156 / .32), rgb(216 180 95 / .1) 40%, transparent 68%);
  animation: verschijnen calc(2s * var(--tempo)) ease calc(2.4s * var(--tempo)) both;
}

.maan {
  --anim: maan-op; --start: 2.1s; --duur: 2.2s;
  position: absolute;
  left: 50%;
  bottom: 3cqh;
  width: min(74cqh, 82cqw);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fff5d2 0%, #f2d68c 36%, #cf9f45 70%, #93702a 100%);
  -webkit-mask: linear-gradient(#000 0 50%, transparent 50% 53.5%, #000 53.5% 62%, transparent 62% 66%, #000 66% 73%, transparent 73% 78%, #000 78% 83.5%, transparent 83.5% 89.5%, #000 89.5% 93%, transparent 93%);
  mask: linear-gradient(#000 0 50%, transparent 50% 53.5%, #000 53.5% 62%, transparent 62% 66%, #000 66% 73%, transparent 73% 78%, #000 78% 83.5%, transparent 83.5% 89.5%, #000 89.5% 93%, transparent 93%);
  opacity: .92;
}
@keyframes maan-op { from { opacity: 0; translate: -50% 28%; } }

.schip-vaart {
  --anim: invaren; --start: 2.3s; --duur: 3s;
  position: absolute;
  left: 50%;
  bottom: 1cqh;
  width: min(102cqw, 152cqh);
  translate: -50% 0;
  z-index: 1;
}
@keyframes invaren {
  from { transform: translateX(-120cqw); opacity: 0; }
  20% { opacity: 1; }
}
.schip-deint {
  position: relative;
  transform-origin: 50% 84%;
  animation: deinen 5.5s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes deinen {
  from { transform: rotate(-1.3deg) translateY(0); }
  to { transform: rotate(1.1deg) translateY(1.6%); }
}
.schip { width: 100%; height: auto; overflow: visible; }
.schip .romp { fill: #080b0d; stroke: var(--goud); stroke-width: 1.4; stroke-linejoin: round; }
.schip .zwaard { fill: #080b0d; stroke: var(--goud); stroke-width: 1.1; }
.schip .boeisel { fill: none; stroke: var(--goud-licht); stroke-width: 1; }
.schip .streep { fill: none; stroke: rgb(216 180 95 / .45); stroke-width: .8; }
.schip .zeilen path { fill: rgb(8 11 13 / .93); stroke: var(--goud); stroke-width: 1.1; stroke-linejoin: round; }
.schip .naden { fill: none; stroke: rgb(216 180 95 / .32); stroke-width: .7; }
.schip .tuig { fill: none; stroke: var(--goud); stroke-width: 1.1; }
.schip .rondhout { fill: none; stroke: var(--goud-licht); stroke-width: 1.7; stroke-linecap: round; }
.schip .wimpel { fill: var(--bordeaux-licht); }
.schip .patrijspoorten circle { fill: #ffd27a; filter: drop-shadow(0 0 3px #ffb347); }

/* Goud en rood om en om, als de lampjes van een theaterluifel. */
.lampjes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: opacity;
  animation: knipperen 1.7s ease-in-out infinite alternate;
}
.lampjes path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 6.4; }
.lampjes.een path { stroke: #ffe6a6; filter: drop-shadow(0 0 2.5px #ffcd66); }
.lampjes.twee path { stroke: #ff9a7c; stroke-dashoffset: 3.2; filter: drop-shadow(0 0 2.5px #ff7a59); }
.lampjes.twee { animation-delay: -1.7s; }
@keyframes knipperen { from { opacity: 1; } to { opacity: .2; } }

.zee {
  position: absolute;
  z-index: 2;
  left: -12%; right: -12%; bottom: 0;
  height: 21cqh;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.golf {
  --anim: verschijnen; --start: 1.9s; --duur: 1.6s;
  position: absolute;
  left: 0;
  width: 200%;
  z-index: 2;
  overflow: visible;
}
.golf .vlak { fill: #0a1012; }
.golf .rand { fill: none; stroke: var(--goud); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.golf.in { animation: verschijnen calc(1.6s * var(--tempo)) ease calc(1.9s * var(--tempo)) both, golven var(--snel) linear infinite; }
.golf-1 { --snel: 22s; bottom: 9cqh; height: 8cqh; opacity: .55; }
.golf-1 .vlak { fill: #0c1517; }
.golf-2 { --snel: 15s; bottom: 4cqh; height: 8cqh; animation-direction: normal, reverse !important; }
.golf-2 .rand { stroke: rgb(216 180 95 / .7); }
.golf-3 { --snel: 10s; bottom: -1px; height: 7.5cqh; }
.golf-3 .vlak { fill: var(--nacht); }
@keyframes golven { to { transform: translateX(-50%); } }

.glinsters { position: absolute; left: 50%; bottom: 0; width: min(60cqh, 70cqw); height: 14cqh; translate: -50% 0; z-index: 3; }
.glinsters i {
  position: absolute;
  left: 50%;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--goud-licht), transparent);
  translate: -50% 0;
  animation: glinster 2.8s ease-in-out infinite;
}
.glinsters i:nth-child(1) { bottom: 72%; width: 44%; animation-delay: -.4s; }
.glinsters i:nth-child(2) { bottom: 55%; width: 62%; animation-delay: -1.5s; }
.glinsters i:nth-child(3) { bottom: 38%; width: 36%; animation-delay: -.9s; }
.glinsters i:nth-child(4) { bottom: 22%; width: 54%; animation-delay: -2.2s; }
.glinsters i:nth-child(5) { bottom: 8%; width: 28%; animation-delay: -1.1s; }
@keyframes glinster { 0%, 100% { opacity: .15; scale: .7 1; } 50% { opacity: .85; scale: 1 1; } }

/* ---------- Onder het tafereel ---------- */

.plaats { --start: 3.55s; margin-top: .9rem !important; font-size: .68rem; letter-spacing: .2em; margin-right: -.2em !important; white-space: nowrap; }
@media (min-width: 26rem) { .plaats { letter-spacing: .3em; margin-right: -.3em !important; } }
.verjaardag { --start: 3.85s; margin-top: .3rem !important; font-style: italic; color: var(--creme-zacht); font-size: 1.02rem; }
.verjaardag::before, .verjaardag::after { content: "\2014"; margin-inline: .45em; color: var(--goud); }
.teaser {
  --anim: onthul; --start: 4.2s; --duur: 1.4s;
  margin-top: .85rem !important;
  font-style: italic;
  font-weight: 500;
  font-size: 1.16rem;
  color: #f0c9c9;
  text-shadow: 0 0 18px rgb(176 50 68 / .55);
}

.opening-actie { margin-top: 1.1rem; min-height: 9.5rem; width: 100%; display: grid; place-items: center; }

/* ---------- Het lakzegel ---------- */

.zegel-plek {
  --anim: stempel; --start: 4.7s; --duur: .9s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
@keyframes stempel {
  0% { opacity: 0; scale: 1.7; filter: blur(5px); }
  60% { opacity: 1; scale: .94; filter: blur(0); }
  80% { scale: 1.03; }
}
.zegel {
  position: relative;
  width: clamp(5.6rem, 25vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / .65));
  transition: transform .35s var(--ease-veer);
}
.zegel:hover { transform: scale(1.05) rotate(-4deg); }
.zegel:active { transform: scale(.95); }
.zegel:focus-visible { outline-offset: 8px; border-radius: 50%; }
.zegel-gloed {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(244 221 156 / .5), rgb(216 180 95 / .12) 45%, transparent 68%);
  animation: gloed 2.6s ease-in-out infinite;
}
@keyframes gloed { 0%, 100% { opacity: .35; scale: .88; } 50% { opacity: 1; scale: 1.06; } }
.zegel-svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.zegel-helft { transform-box: view-box; transform-origin: 60px 60px; }
.zegel-barst {
  fill: none;
  stroke: #ffe9ad;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px #ffcf62);
}
.zegel-tekst { font-size: .66rem; letter-spacing: .34em; margin-right: -.34em !important; animation: ademen 2.6s ease-in-out infinite; }
@keyframes ademen { 50% { opacity: .45; } }

.breekt .zegel { animation: schudden .11s linear 3; }
.breekt .zegel-gloed, .breekt .zegel-tekst { animation: none; opacity: 0; transition: opacity .2s; }
.breekt .zegel-barst { animation: teken .22s ease-out .05s forwards, verdwijnen .2s ease .4s forwards; }
.breekt .zegel-helft.links { animation: val-links 1s cubic-bezier(.45, 0, .8, .3) .3s forwards; }
.breekt .zegel-helft.rechts { animation: val-rechts 1s cubic-bezier(.45, 0, .8, .3) .3s forwards; }
@keyframes schudden { 25% { transform: translate(-2px, 1px) rotate(-3deg); } 75% { transform: translate(2px, -1px) rotate(3deg); } }
@keyframes verdwijnen { to { opacity: 0; } }
@keyframes val-links { to { transform: translate(-30px, 120px) rotate(-42deg); opacity: 0; } }
@keyframes val-rechts { to { transform: translate(34px, 140px) rotate(36deg); opacity: 0; } }

.flits {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 85%), rgb(255 246 218 / .95), rgb(244 221 156 / .45) 10%, rgb(216 180 95 / .1) 34%, transparent 62%);
}
.breekt .flits { animation: flits 1.2s ease-out .25s; }
@keyframes flits { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Na het zegel: het menu ---------- */

.opening-menu { display: none; width: 100%; max-width: 26rem; }
.opening.verbroken .zegel-plek { display: none; }
.opening.verbroken .opening-menu { display: flex; flex-direction: column; gap: .75rem; }

.opening-menu > * { animation: opkomen .9s var(--ease-uit) both; }
.opening-menu > :nth-child(1) { animation-delay: .1s; }
.opening-menu > :nth-child(2) { animation-delay: .22s; }
.opening-menu > :nth-child(3) { animation-delay: .4s; }
.opening-menu > :nth-child(4) { animation-delay: .55s; }
.opening.terug .opening-menu > * { animation-delay: calc((4.6s + var(--i, 0) * .14s) * var(--tempo)); }
.opening.terug .opening-menu > :nth-child(2) { --i: 1; }
.opening.terug .opening-menu > :nth-child(3) { --i: 2; }
.opening.terug .opening-menu > :nth-child(4) { --i: 3; }

.ticket {
  --punt: 14px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.5rem .85rem 1.3rem;
  text-decoration: none;
  text-align: left;
  color: var(--creme);
  background: linear-gradient(90deg, var(--goud), var(--goud-donker) 50%, var(--goud));
  clip-path: polygon(var(--punt) 0, calc(100% - var(--punt)) 0, 100% 50%, calc(100% - var(--punt)) 100%, var(--punt) 100%, 0 50%);
  transition: transform .35s var(--ease-veer), filter .3s;
}
.ticket::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: linear-gradient(100deg, rgb(22 58 51 / .97), rgb(10 16 18 / .98) 65%);
  clip-path: polygon(var(--punt) 0, calc(100% - var(--punt)) 0, 100% 50%, calc(100% - var(--punt)) 100%, var(--punt) 100%, 0 50%);
}
.ticket { isolation: isolate; }
.ticket:hover, .ticket:focus-visible { transform: translateX(4px); filter: brightness(1.12); }
.ticket:active { transform: scale(.98); }
.ticket-nr {
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border: 1px solid var(--goud);
  rotate: 45deg;
  font-family: var(--display);
  font-size: .95rem;
  color: var(--goud-licht);
}
.ticket-nr > span { rotate: -45deg; }
.ticket-tekst { display: flex; flex-direction: column; gap: .1rem; }
.ticket-titel { font-family: var(--deco); font-size: 1.45rem; letter-spacing: .06em; color: var(--goud-licht); line-height: 1.1; }
.ticket-sub { font-style: italic; font-size: .98rem; color: var(--creme-zacht); line-height: 1.25; }
.ticket-pijl { font-family: var(--deco); font-size: 2rem; color: var(--goud); line-height: 1; }

.binnenkort { margin-top: .35rem !important; font-style: italic; font-size: .98rem; color: var(--creme-vaag); }
.opnieuw { align-self: center; padding: .5rem .8rem; font-size: .6rem; color: var(--creme-vaag); transition: color .2s; }
.opnieuw:hover { color: var(--goud-licht); }

/* ---------- Kleine en grote schermen ---------- */

@media (max-width: 24rem) {
  .familie { letter-spacing: .3em; margin-right: -.3em; gap: .6rem; }
}

@media (max-height: 700px) {
  .opening { padding-top: calc(env(safe-area-inset-top, 0px) + 1.9rem); padding-bottom: calc(var(--onder) + 1.4rem); }
  .familie { font-size: .68rem; }
  .verzoek { margin-top: .5rem !important; }
  .opening-inhoud > .ornament { margin-top: .6rem; }
  .scene { min-height: 8.5rem; }
  .zegel { width: 5rem; }
  .verzoek { font-size: .98rem; }
  .titel-testament { font-size: clamp(2.4rem, 12.5vw, 4.6rem); }
  .opening-actie { min-height: 7rem; margin-top: .6rem; }
  .teaser { margin-top: .55rem !important; }
}

@media (min-width: 48rem) {
  .opening { padding-inline: 3rem; }
  .scene { max-height: 25rem; }
  .lijst { inset: 18px; }
  .opening.verbroken .lijst { bottom: calc(var(--tabbalk-h) + 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .goudstof, .stralen { display: none; }
}