/* ==========================================================================
   CZECH BURGER × NEBOZÍZEK · czechburger-nebozizek.cz
   Third site. Stack: Tailwind (Play CDN) + three.js + GSAP + Lenis.
   This file = effects Tailwind can't express (WebGL layer, outline type,
   marquees, paper texture, premium detailing). Palette per brand manual.
   ========================================================================== */
:root{
  --garnet:#6C150E; --brick:#B12C2A; --deep:#122F47; --deep-2:#0b1b2b;
  --floral:#FFF9EC; --steel:#7298B8;
  --ease-brand:cubic-bezier(.76,0,.24,1);
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:auto; background:var(--deep-2); }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
body{ overflow-x:hidden; }
::selection{ background:var(--brick); color:var(--floral); }

/* ---- brand fonts: embedded via css/fonts.css (base64 → load under file:// and offline) ---- */

/* ---- fonts / display ---- */
.display{ font-family:'Fredoka',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0; }
.font-body{ font-family:'Satoshi',sans-serif; }

.eyebrow{ font-weight:900; font-size:12px; letter-spacing:.24em; text-transform:uppercase; }

/* fluid display scale — restrained & readable; line-height >1 prevents overlap */
.h-hero{ font-size:clamp(36px,4.6vw,74px); line-height:1.02; }
.h-sec{ font-size:clamp(30px,4vw,60px); line-height:1.04; }
.h-cta{ font-size:clamp(40px,6vw,92px); line-height:.98; }
.h-foot{ font-size:clamp(40px,7.5vw,124px); line-height:.94; letter-spacing:.01em; }

/* ---- WebGL hero canvas ---- */
#webgl{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; }
.hero-shroud{ /* darkens webgl toward edges so type stays legible */
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(11,27,43,.35) 100%),
    linear-gradient(180deg, rgba(11,27,43,.35) 0%, transparent 22%, transparent 60%, rgba(11,27,43,.92) 100%);
}

/* ---- paper texture overlays (brand wrapping paper) ----
   light sections: darker warm parchment + heavily muted pattern for legibility */
.paper-light{
  background-color:#e9dcc2;
  background-image:linear-gradient(rgba(233,220,194,.80),rgba(233,220,194,.80)), url('../assets/paper-light.webp');
  background-size:auto, 1080px; background-repeat:no-repeat, repeat; background-position:center, center;
}
.paper-dark{ background-image:url('../assets/paper-dark.webp'); background-size:1080px; }
@media (max-width:640px){ .paper-light{ background-size:auto, 680px; } .paper-dark{ background-size:680px; } }

/* ---- marquee ---- */
.mq{ overflow:hidden; width:100%; }
.mq-track{ display:inline-flex; white-space:nowrap; will-change:transform; }
.mq-track>span{ display:inline-block; }
.mq-hero .mq-track{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(26px,4.2vw,60px); line-height:1.05; letter-spacing:-.01em; }
.mq-strip .mq-track{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(20px,2.6vw,36px); line-height:1.15; }

/* ---- nav ---- */
.nav-pill{ background:rgba(255,249,236,.10); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1.5px solid rgba(255,249,236,.22); border-radius:999px; }
.nav-link{ position:relative; padding-bottom:3px; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--steel); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-brand); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.btn{ font-family:'Satoshi',sans-serif; font-weight:900; letter-spacing:.05em; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:background-color .3s,color .3s,border-color .3s,transform .3s; }
.btn-steel{ background:var(--steel); color:var(--deep-2); padding:13px 26px; font-size:14px; border:2px solid var(--steel); }
.btn-steel:hover{ background:var(--floral); border-color:var(--floral); }
.btn-ghost{ background:transparent; color:var(--floral); padding:13px 26px; font-size:14px; border:2px solid rgba(255,249,236,.4); }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }
.btn-brick{ background:var(--brick); color:var(--floral); padding:16px 34px; font-size:15px; border:2px solid var(--brick); }
.btn-brick:hover{ background:var(--garnet); border-color:var(--garnet); }
.btn-lg{ padding:18px 40px; font-size:16px; }

/* ---- premium concept cards ---- */
.card{ border-radius:24px; padding:clamp(24px,2.6vw,36px); position:relative; height:100%; }
.card-glass{ background:rgba(255,249,236,.05); border:1.5px solid rgba(255,249,236,.16); color:var(--floral); backdrop-filter:blur(6px); transition:border-color .4s,background .4s,transform .4s; }
.card-glass:hover{ border-color:rgba(114,152,184,.6); background:rgba(255,249,236,.08); transform:translateY(-6px); }
.card-light{ background:var(--floral); border:3px solid var(--garnet); color:var(--deep); }

/* ---- premium photo placeholder (client drops real venue photos) ---- */
.photo-ph{ position:relative; border-radius:22px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.photo-ph--dark{ border:2px dashed rgba(255,249,236,.28); background:linear-gradient(135deg, rgba(114,152,184,.10), rgba(18,47,71,.30)); color:var(--floral); }
.photo-ph--light{ border:2px dashed rgba(18,47,71,.32); background:rgba(18,47,71,.04); color:var(--deep); }
.photo-ph .pin{ font-size:26px; display:block; margin-bottom:10px; }
.photo-ph b{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(16px,1.6vw,21px); display:block; }
.photo-ph small{ display:block; margin-top:6px; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }

/* ---- venue gallery (real Nebozízek photos) ---- */
.venue{ position:relative; border-radius:20px; overflow:hidden; background:#0d1f30; display:block; }
.venue img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-brand); }
.venue:hover img{ transform:scale(1.05); }
.venue figcaption{ position:absolute; left:0; right:0; bottom:0; padding:clamp(16px,2vw,26px); background:linear-gradient(transparent, rgba(11,27,43,.15) 30%, rgba(11,27,43,.92)); pointer-events:none; }
.venue figcaption span{ display:block; font-weight:900; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin-bottom:5px; }
.venue figcaption b{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(15px,1.5vw,21px); color:var(--floral); line-height:1.05; }

/* ---- menu strip ---- */
.menu-scroller{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.menu-scroller::-webkit-scrollbar{ display:none; }
.menu-card{ scroll-snap-align:center; flex:0 0 auto; width:min(80vw,330px); background:var(--floral); border:3px solid var(--garnet); border-radius:26px; padding:22px; display:flex; flex-direction:column; }
.menu-card .img{ height:190px; display:flex; align-items:center; justify-content:center; }
.menu-card .img img{ max-height:100%; width:auto; filter:drop-shadow(0 16px 24px rgba(108,21,14,.22)); }
.menu-card .img.round img{ height:180px; width:180px; object-fit:cover; border-radius:999px; border:3px solid var(--garnet); }

/* ---- reference list ---- */
.ref-row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:22px 0; border-bottom:2px solid rgba(114,152,184,.28); transition:padding-left .4s var(--ease-brand); }
.ref-row:first-child{ border-top:2px solid rgba(114,152,184,.28); }
.ref-name{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(26px,4.4vw,58px); line-height:1; color:var(--floral); }
.ref-place{ font-size:14px; font-weight:600; color:rgba(255,249,236,.6); }
.ref-tag{ font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 13px; border-radius:999px; transform:translateY(-.4em); }
@media (min-width:768px){
  .ref-row .ref-place{ margin-left:auto; opacity:0; transform:translateX(18px); transition:opacity .4s,transform .4s; }
  .ref-row:hover{ padding-left:22px; }
  .ref-row:hover .ref-place{ opacity:1; transform:translateX(0); }
}

/* ---- timeline ---- */
.phase{ display:grid; grid-template-columns:180px 1fr; gap:clamp(18px,3vw,44px); padding:clamp(24px,3vw,36px) 0; border-top:2px solid rgba(18,47,71,.16); }
.phase:last-child{ border-bottom:2px solid rgba(18,47,71,.16); }
@media (max-width:720px){ .phase{ grid-template-columns:1fr; gap:10px; } }
.phase-yr{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(26px,3.4vw,46px); color:var(--brick); line-height:1; }
.phase-yr small{ display:block; font-family:'Satoshi',sans-serif; font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(18,47,71,.5); margin-top:8px; }
.phase-h{ font-family:'Fredoka',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(18px,1.8vw,24px); color:var(--garnet); }
.chip{ font-size:13px; font-weight:700; background:rgba(18,47,71,.06); color:var(--deep); border:1.5px solid rgba(18,47,71,.16); border-radius:999px; padding:7px 15px; }

/* ---- floaty stickers ---- */
.floaty{ animation:floaty 6.5s ease-in-out infinite; will-change:transform; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--rot,0deg)); } }
[data-spin]{ animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- preloader ---- */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--deep-2); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pre-line{ display:block; overflow:hidden; }

/* ---- reveal gating (GSAP unhides) ---- */
.js [data-reveal],.js [data-pop]{ visibility:hidden; }
.js .mq [data-mqhide]{ visibility:hidden; }

/* ---- custom cursor ---- */
#cursor{ position:fixed; top:0; left:0; z-index:9998; width:10px; height:10px; background:var(--steel); border-radius:999px; pointer-events:none; transform:translate(-50%,-50%); display:none; mix-blend-mode:difference; }
@media (pointer:fine){ #cursor{ display:block; } }

@media (prefers-reduced-motion:reduce){
  .floaty,[data-spin]{ animation:none!important; }
  .js [data-reveal],.js [data-pop],.js .mq [data-mqhide]{ visibility:visible!important; }
  #webgl{ display:none; }
}