/* =========================================================
   De Knapperij — tijdelijke pagina (opening zomer 2027)
   Opgebouwd uit losse lagen, zodat hij schermvullend scherp blijft:
   linnen (echte weefstructuur als tegel) · logo (beeld, transparant) ·
   tekst (HTML) · rondje (beeld + SVG-tekst) · strook met sfeerbeelden
   ========================================================= */

:root{
  /* merkkleuren, gemeten in de openingsfoto */
  --color-primary:#4B4A2E;    /* olijf borduurgaren */
  --color-secondary:#8A5E3B;  /* koper schaar */
  --color-accent:#C8AE97;     /* linnen */

  --linnen-licht:#D6BDAC;
  --linnen-diep:#AF9177;
  --tekst:#35321F;            /* donker genoeg voor kleine tekst op linnen (AA) */
  --koper-tekst:#6A4830;      /* koper, verdiept voor contrast */
  --licht:#F3E9DE;

  --font-heading:"Cormorant Garamond","Georgia","Times New Roman",serif;

  --spacing-xs:.5rem;
  --spacing-sm:1rem;
  --spacing-md:1.5rem;
  --spacing-lg:3rem;
}

/* Brede schermen: onder ~1935px verandert er niets, daarboven schaalt alles mee. */
html{font-size:clamp(1rem,0.827vw,1.833rem)}

*{box-sizing:border-box}

/* ---------- laag 1: linnen ----------
   De tegel is de echte weefstructuur uit haar foto, met de plooien
   eruit gefilterd. Hij ligt in soft-light over de kleur en de plooien,
   zodat de kleur stuurbaar blijft. Tegel is 256px en naadloos. */
body{
  margin:0;
  min-height:100dvh;
  color:var(--tekst);
  font-family:var(--font-heading);
  -webkit-font-smoothing:antialiased;
  background-color:var(--color-accent);
  background-image:
    url("../images/linnen-tegel.webp"),
    linear-gradient(118deg, transparent 16%, rgba(255,246,236,.22) 29%, transparent 42%, rgba(110,80,55,.13) 57%, transparent 69%, rgba(255,246,236,.16) 81%, transparent 93%),
    radial-gradient(120% 70% at 15% 18%, rgba(214,189,172,.9) 0%, transparent 60%),
    radial-gradient(90% 60% at 88% 88%, rgba(214,189,172,.75) 0%, transparent 60%),
    radial-gradient(70% 55% at 82% 12%, rgba(175,145,119,.5) 0%, transparent 65%),
    radial-gradient(80% 60% at 8% 92%, rgba(175,145,119,.45) 0%, transparent 65%),
    linear-gradient(160deg, #CDB39C 0%, #C8AE97 50%, #D2B9A5 100%);
  background-size:256px 256px, auto, auto, auto, auto, auto, auto;
  background-blend-mode:soft-light, normal, normal, normal, normal, normal, normal;
  background-attachment:fixed;
}

/* Ademende gloed: twee zachte lichtvlekken die heel traag over het
   linnen schuiven. Bedoeld om net niet op te vallen. */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 52% at 22% 28%, rgba(246,236,225,.30) 0%, transparent 66%),
    radial-gradient(34% 48% at 80% 72%, rgba(122,88,60,.15) 0%, transparent 64%);
  animation:adem 26s ease-in-out infinite alternate;
}
@keyframes adem{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}

.verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- opbouw ---------- */
.opening{
  position:relative;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--spacing-md);
  padding:var(--spacing-lg) var(--spacing-sm);
  animation:paginaIn .4s ease-out;
}
@keyframes paginaIn{from{opacity:0}to{opacity:1}}

.opening__midden{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:.9rem;
  text-align:center;
}

/* Scrim: zachte lichte waas achter de tekst, zodat die loskomt van het
   linnen. Groot en zonder harde rand, dus je ziet het vlak niet. */
.opening__midden::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1.5rem;
  transform:translateX(-50%);
  width:min(52rem, 96vw);
  height:19rem;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 52%, rgba(247,239,230,.55) 0%, rgba(247,239,230,.30) 45%, transparent 72%);
}

/* ---------- laag 2: het geborduurde logo ---------- */
.opening__logo{
  display:block;
  /* Bitmap van 918px breed: tot 820px blijft hij scherp. Op lagere
     schermen (laptops) krimpt hij mee met de zichtbare hoogte, zodat
     alles zonder scrollen past. 28rem = alles behalve het logo. */
  width:clamp(13rem, min(80vw, 820px, calc((100dvh - 28rem) * 1.669)), 820px);
  height:auto;
}

/* ---------- laag 3: tekst ---------- */
.opening__datum{
  margin:-.4rem 0 .45rem;
  font-size:clamp(1rem, 2vw, 1.45rem);
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--koper-tekst);
  font-variant-numeric:lining-nums;
}
.opening__verhaal{
  margin:0;
  max-width:min(56ch, 100%);
  font-size:clamp(1.1rem, 2.4vw, 1.4rem);
  font-style:italic;
  font-weight:600;
  line-height:1.3;
  text-wrap:balance;
  color:var(--color-primary);
}
.opening__regel{
  margin:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .9rem;
  font-size:clamp(.85rem, 1.9vw, 1rem);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tekst);
}
.opening__stip{
  width:.3rem;height:.3rem;border-radius:50%;
  background:var(--color-secondary);
}

.opening__knoppen{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  margin-top:.4rem;
}
.knop{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-heading);
  font-size:1.1rem;font-weight:600;letter-spacing:.06em;
  text-decoration:none;
  color:var(--licht);
  background:var(--color-primary);
  border:1px solid var(--color-primary);
  padding:.7rem 1.4rem;
  border-radius:999px;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.knop:hover{background:var(--color-secondary);border-color:var(--color-secondary);color:var(--licht);transform:scale(1.02)}
.knop--lijn{background:transparent;color:var(--tekst);border-color:var(--color-primary)}
.knop:focus-visible{outline:.15rem solid var(--color-secondary);outline-offset:.25rem}
.knop__icoon{
  width:1.15rem;height:1.15rem;
  fill:none;stroke:currentColor;stroke-width:1.8;
}
.knop__vol{fill:currentColor;stroke:none}

/* ---------- laag 4: strook met sfeerbeelden ----------
   Twee identieke reeksen achter elkaar; de band schuift precies een
   halve spoorbreedte op en begint daardoor onzichtbaar opnieuw.
   Elke tegel heeft een rechtermarge in plaats van een gap, zodat die
   helft exact klopt. Timing is bewust lineair: een marquee met een
   ease-curve zou bij elke ronde zichtbaar versnellen en vertragen. */
.strook{
  width:min(100%, 44rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.strook__spoor{
  display:flex;
  width:max-content;
  animation:schuif 46s linear infinite;
}
.strook__item{
  flex:none;
  width:6rem;
  height:auto;
  margin-right:.75rem;
  display:block;
  border-radius:2px;
  background:var(--licht);
  padding:.25rem;
  box-shadow:0 .5rem 1.2rem -.6rem rgba(46,44,31,.45);
}
@keyframes schuif{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- laag 5: het terrazzo-rondje ---------- */
.rondje{
  position:relative;
  display:block;
  width:7rem;
  flex:none;
  aspect-ratio:1;
  border-radius:50%;
  color:var(--color-primary);
  text-decoration:none;
  transition:transform .3s ease;
}
.rondje__svg{display:block;width:100%;height:100%;overflow:visible}
.rondje__schijf{transition:filter .3s ease}
.rondje__tekst{
  font-family:var(--font-heading);
  font-size:21px;
  font-weight:600;
  letter-spacing:5px;
  fill:currentColor;
}
.rondje:hover{transform:translateY(-.25rem) scale(1.05)}
.rondje:hover .rondje__schijf{filter:drop-shadow(0 .6rem .9rem rgba(46,44,31,.45))}
.rondje:focus-visible{outline:.15rem solid var(--color-secondary);outline-offset:.2rem}

.rondje__tip{
  position:absolute;
  left:calc(100% + .4rem);
  top:50%;
  transform:translate(-.5rem,-50%);
  white-space:nowrap;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--tekst);
  background:rgba(243,233,222,.94);
  padding:.35rem .8rem;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
@media (hover:hover){
  .rondje:hover .rondje__tip,
  .rondje:focus-visible .rondje__tip{opacity:1;transform:translate(0,-50%)}
}
@media (hover:none){
  .rondje__tip{display:none}
}

/* groot scherm: rondje linksonder, los van de strook */
@media (min-width:1024px){
  /* strook smaller houden, zodat het rondje linksonder er niet tegenaan komt */
  .strook{width:min(100% - 24rem, 44rem)}
  .rondje{
    position:absolute;
    left:clamp(1.5rem, 4vw, 5rem);
    bottom:clamp(1.5rem, 4dvh, 4rem);
    /* bitmapschijf is 192px; nooit meer dan ~10% opschalen */
    width:clamp(8.5rem, 12vw, 280px);
  }
}

/* smal: regels onder elkaar, zonder losse stip */
@media (max-width:599px){
  .opening__regel{flex-direction:column;gap:.35rem}
  .opening__stip{display:none}
  .strook__item{width:5.25rem}
}

@media (prefers-reduced-motion:reduce){
  .opening{animation:none}
  body::after{animation:none}
  .rondje,.rondje__schijf,.rondje__tip,.knop{transition:none}
  /* geen beweging: de strook wordt met de hand verschuifbaar */
  .strook{overflow-x:auto}
  .strook__spoor{animation:none}
}