/* ============ Café Studio — dag/nacht ============ */

@font-face {
  font-family: "Alternate Gothic No3 D";
  src: url("../fonts/AlternateGothicNo3D.otf") format("opentype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* Overdag (dag) — uit kleurstijl studio.txt */
  --bordeaux:  #7e132f;
  --donkerrood:#8c1f1e;
  --lichtrood: #d32027;
  --beige:     #ebdac4;

  /* Nacht */
  --nachtblauw-d: #221c3f;
  --nachtblauw:   #2a3883;
  --night-text:   #f5e6cf;

  /* Warme gloed (nacht) */
  --glow-core: rgba(242,166,90,.55);
  --glow-mid:  rgba(242,166,90,.42);
  --glow-out1: rgba(217,122,43,.32);
  --glow-out2: rgba(217,122,43,.22);

  --font-title: "Alternate Gothic No3 D", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:  system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bordeaux);
  color: var(--beige);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ============ Portal (dag/nacht keuze) ============ */
.portal {
  position: relative;
  width: 100%;
  height: min(94svh, 940px);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  user-select: none; -webkit-user-select: none;
  touch-action: none;         /* directe swipe, geen scroll-vertraging */
  cursor: grab;
  --wave: 50%;
}
.portal.is-dragging { cursor: grabbing; }

/* Beeldlagen: nacht vult alles, dag ligt erover en wordt (golvend) geknipt door JS */
.portal__layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* background-image staat in de inline <style> van index.html (document-relatief) */
.portal__day {
  clip-path: inset(0 50% 0 0);   /* fallback vóór JS; JS zet een golvende clip */
  will-change: clip-path;
}

/* Geen native link-sleep (anders kaapt de browser het swipe-gebaar) */
.portal a, .portal__hit { -webkit-user-drag: none; user-select: none; }

/* Zichtbare tekst — alleen visueel, vangt geen klikken; leesbaar in rust */
.portal__text {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  transition: opacity .16s linear;
}
.portal__text--night { color: var(--night-text); }
.portal__inner {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px; text-align: center;
  width: max-content; max-width: 42vw; padding: 0 10px;
}
.portal__text--day  .portal__inner { left: 25%; }
.portal__text--night .portal__inner { left: 75%; }

.portal__kicker { font-family: var(--font-title); letter-spacing: .28em; text-transform: uppercase; font-size: clamp(11px,1.2vw,14px); margin: 0; opacity: .92; font-weight: 500; }
.portal__title  { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(30px, 5.4vw, 92px); line-height: .9; margin: 4px 0; }
.portal__sub    { font-family: var(--font-title); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(12px,1.5vw,18px); margin: 0; }
.portal__title--glow {
  color: var(--night-text);
  text-shadow: 0 0 12px var(--glow-core), 0 0 30px var(--glow-mid), 0 0 54px var(--glow-out1), 0 0 82px var(--glow-out2);
}

/* Golf-handvat op de scheiding */
.portal__knob {
  position: absolute; top: 50%; left: var(--wave); transform: translate(-50%,-50%);
  z-index: 5; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(20,14,30,.30); border: 2px solid var(--beige);
  backdrop-filter: blur(4px); pointer-events: none;
  display: grid; place-items: center;
  box-shadow: 0 0 20px rgba(245,230,207,.35);
  transition: box-shadow .18s ease;
}
.portal__knob::after { content: "‹ ›"; color: var(--beige); font-size: 17px; letter-spacing: -2px; font-family: var(--font-body); }
.portal:hover .portal__knob { box-shadow: 0 0 30px rgba(245,230,207,.6); }

/* Klik-zones (echte links), gesplitst op de golf-X */
.portal__hit { position: absolute; top: 0; bottom: 0; z-index: 4; display: block; }
.portal__hit--day   { left: 0; width: var(--wave); }
.portal__hit--night { left: var(--wave); right: 0; }
.portal__hit:focus-visible { outline: 3px solid var(--beige); outline-offset: -10px; }

/* Hint + CTA */
.portal__hint {
  position: absolute; left: 50%; bottom: clamp(20px, 6vh, 60px); transform: translateX(-50%);
  z-index: 6; font-family: var(--font-title); text-transform: uppercase; letter-spacing: .22em;
  font-size: 13px; color: var(--beige); background: rgba(20,14,30,.42);
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(245,230,207,.3);
  backdrop-filter: blur(4px); pointer-events: none; transition: opacity .3s ease;
}
.portal.is-dragging .portal__hint { opacity: 0; }

.portal__cta-wrap { position: absolute; left: 50%; top: clamp(20px, 5vh, 48px); transform: translateX(-50%); z-index: 6; }
.portal__cta {
  font-family: var(--font-title); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  text-decoration: none; color: #1a1d24; background: var(--beige);
  padding: 12px 30px; border-radius: 999px; font-size: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.portal__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

@media (max-width: 560px) {
  .portal__title { font-size: clamp(30px, 12vw, 64px); }
  .portal__inner { max-width: 46vw; }
}

/* ============ Animaties ============ */
@media (prefers-reduced-motion: no-preference) {
  .portal__layer { animation: cs-zoom 18s ease-out both; }
  .portal__kicker { animation: cs-rise .7s cubic-bezier(.16,1,.3,1) both; }
  .portal__title  { animation: cs-rise .7s cubic-bezier(.16,1,.3,1) .08s both; }
  .portal__sub    { animation: cs-rise .7s cubic-bezier(.16,1,.3,1) .16s both; }
  .portal__cta, .portal__hint { animation: cs-fade .8s ease .5s both; }
  .portal__title--glow { animation: cs-rise .7s cubic-bezier(.16,1,.3,1) .08s both, cs-glow 3.6s ease-in-out 1s infinite; }
  .portal.portal--hint .portal__hint { animation: cs-fade .8s ease .5s both, cs-pulse 2.2s ease-in-out 3 .6s; }

  @keyframes cs-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cs-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes cs-glow {
    0%,100% { text-shadow: 0 0 12px var(--glow-core), 0 0 30px var(--glow-mid), 0 0 54px var(--glow-out1), 0 0 82px var(--glow-out2); }
    50%     { text-shadow: 0 0 18px var(--glow-core), 0 0 44px var(--glow-mid), 0 0 74px var(--glow-out1), 0 0 110px var(--glow-out2); }
  }
  @keyframes cs-pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
}