/* Horecast fase 1: meer diepte, beweging en een betere telefoonervaring (Arthur 6/10/2026).
   Een laag bovenop theo.css: niets in theo.css is gewijzigd, deze file eruit = de oude look.
   Alles respecteert prefers-reduced-motion. */

/* --plus-shadow, --plus-glow en --plus-spring: in tokens.css (UX fase 4) */

/* een link naar een bepaald item (factuur, reservatie, overheidspost): kort oplichten (consistentie 31/10) */
.doel-flits { outline: 2px solid var(--brand-deep); outline-offset: 2px; animation: doel-flits 2.4s ease-out; }
@keyframes doel-flits { 0%, 40% { background-color: var(--messing-tint); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .doel-flits { animation: none; } }

/* ---- kopband: glas, met een schaduw zodra je scrolt ---- */
.topbar {
  background: rgba(214, 200, 150, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: left .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
body.plus-scrolled .topbar { background: rgba(214, 200, 150, .92); box-shadow: 0 6px 22px -8px rgba(80, 66, 30, .45); }

/* ---- kaarten: gelaagde schaduw en een zacht licht bovenaan ---- */
.card {
  box-shadow: var(--plus-shadow);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 90px);
}

/* ---- tegels: optillen, gouden gloed op de balk, indrukken bij een tik ---- */
.tile-link {
  position: relative; overflow: hidden;
  transition: transform .25s var(--plus-spring), box-shadow .25s var(--ease), background .2s, border-color .2s;
}
/* de lichtvlek die de muis volgde is weg (UX fase 1, 19/10) */
@media (hover: hover) {
  .tile-link:hover { transform: translateY(-3px); box-shadow: var(--plus-shadow-hover); border-left-color: var(--brand); background: var(--surface-3); }
}
.tile-link:active { transform: scale(.98); transition-duration: .08s; }

/* ---- knoppen: een veerkrachtige druk ---- */
button, .btn, a.btn { transition: transform .18s var(--plus-spring), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; }
button:not(:disabled):active, .btn:active { transform: scale(.96); }
button.primary:not(:disabled), .btn.primary { box-shadow: 0 2px 0 rgba(120, 95, 20, .25), 0 6px 14px -6px rgba(184, 149, 44, .7); }
@media (hover: hover) {
  button.primary:not(:disabled):hover, .btn.primary:hover { box-shadow: 0 2px 0 rgba(120, 95, 20, .25), 0 10px 22px -8px rgba(184, 149, 44, .85); }
}
:focus-visible { outline: none; box-shadow: var(--plus-glow) !important; border-radius: 6px; }

/* ---- laden: een glanzende plaatshouder in plaats van alleen tekst ---- */
.loading {
  position: relative; min-height: 120px; border-radius: var(--r-l);
  background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 45%, var(--surface-3) 60%);
  background-size: 300% 100%; animation: plus-glans 1.4s ease-in-out infinite;
  color: transparent; user-select: none;
}
@keyframes plus-glans { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---- zijbalk: de actieve pagina glijdt mee ---- */
.sidenav a { transition: background .2s, color .2s, transform .2s var(--plus-spring); }
@media (hover: hover) { .sidenav a:hover { transform: translateX(3px); } }

/* ---- pagina's: iets meer zwier bij binnenkomst ---- */
.view { animation: plus-viewin .38s var(--ease); }
@keyframes plus-viewin { from { opacity: 0; transform: translateY(10px) scale(.995); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.stagger > * { animation: plus-viewin .42s var(--ease) backwards; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .20s; }
.start-tiles > .tile { animation: plus-viewin .45s var(--ease) backwards; }
.start-tiles > .tile:nth-child(2) { animation-delay: .06s; }
.start-tiles > .tile:nth-child(3) { animation-delay: .12s; }
.start-tiles > .tile:nth-child(4) { animation-delay: .18s; }
.start-tiles > .tile:nth-child(5) { animation-delay: .24s; }

/* ---- telefoon ---- */
@media (max-width: 760px) {
  /* Start: het logoblok compact (het nam het halve scherm), de cijfers twee per rij */
  .start-hero-card { grid-template-columns: auto 1fr !important; gap: .9rem !important; padding: .8rem 1rem !important; align-items: center; }
  .start-hero-card .theo-hero { padding: 0 !important; }
  .start-hero-card .theo-hero img { width: 84px !important; }
  .start-hero-card .theo-hero-rule, .start-hero-card .theo-tagline { display: none; }
  .start-hero-card .theo-links { gap: 10px !important; font-size:var(--t-xs); flex-wrap: wrap; justify-content: center; }
  .start-hero-card h1, .start-hero-card h2 { font-size:var(--t-xl) !important; margin: 0; }
  .start-hero-card p { font-size:var(--t-m); margin: .3rem 0 0; }
  .row.start-tiles { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .row.start-tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .start-tiles .tile .v { font-size:var(--t-xl); }

  /* personeel: een vaste balk onderaan met de vier schermen die je het meest gebruikt */
  body.plus-has-tabbar main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.plus-has-tabbar .fab, body.plus-has-tabbar #tk-fab, body.plus-has-tabbar .tk-fab { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
.plus-tabbar { display: none; }
@media (max-width: 760px) {
  .plus-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35;
    background: rgba(251, 248, 234, .88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px -10px rgba(60, 50, 30, .45);
    padding: 6px; animation: plus-tabin .45s var(--plus-spring);
  }
  .plus-tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; border-radius: 13px; color: var(--text-2); text-decoration: none; font-size:var(--t-xs); font-weight: 600;
    transition: background .2s, color .2s, transform .2s var(--plus-spring);
  }
  .plus-tabbar a svg, .plus-tabbar a .ic { width: 22px; height: 22px; }
  .plus-tabbar a.on { background: var(--brand); color: var(--p-inkt-2); box-shadow: 0 4px 12px -4px rgba(184, 149, 44, .8); }
  .plus-tabbar a:active { transform: scale(.92); }
  body.nav-open-phone .plus-tabbar { display: none; }
}
@keyframes plus-tabin { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- wie geen beweging wil, krijgt er geen ---- */
@media (prefers-reduced-motion: reduce) {
  .view, .stagger > *, .start-tiles > .tile, .plus-tabbar { animation: none !important; }
  .loading { animation: none; }
  .tile-link:hover, .sidenav a:hover { transform: none; }
}