/* Tapas V11: only top navigation visual polish + entrance motion.
   The original 1080p five-phone animation, beige gap, red section,
   and all sections below are unchanged from the approved V10 draft. */

/* Navigation composition: quiet, legible and understated */
.header .nav { align-items:center; gap:8px !important; }
.header .nav a {
  display:inline-flex;
  position:relative;
  align-items:center;
  min-height:42px;
  padding:9px 13px;
  border-radius:7px;
  color:#3e1b14 !important;
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:.005em;
  transition:background-color .2s ease,color .2s ease !important;
}
.header .nav a::after {
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:5px;
  height:2px;
  border-radius:3px;
  background:#9e6b40;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s ease;
}
.header .nav a:hover, .header .nav a:focus-visible { color:#7d2c1b !important; background:rgba(118,55,35,.055); }
.header .nav a:hover::after, .header .nav a:focus-visible::after { transform:scaleX(1); }
.header .nav-demo {
  min-height:48px;
  display:inline-flex;
  gap:15px;
  align-items:center;
  justify-content:center;
  padding:6px 8px 6px 20px !important;
  background:#581e13 !important;
  color:#fff5e6 !important;
  border:1px solid rgba(246,210,167,.34) !important;
  border-radius:10px !important;
  box-shadow:0 8px 23px rgba(64,25,12,.13), 0 2px 5px rgba(64,25,12,.09) !important;
  text-shadow:none !important;
  letter-spacing:.005em;
  text-decoration:none;
  transition:background-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.header .nav-demo:hover, .header .nav-demo:focus-visible {
  background:#742818 !important;
  box-shadow:0 11px 23px rgba(64,25,12,.21) !important;
  transform:translateY(-1px);
}
.nav-demo-arrow {
  width:31px;
  height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(255,242,213,.13);
  font-size:18px;
  font-weight:500;
  line-height:1;
  color:#f3cf9b;
}
.header .brand img { filter:brightness(0) saturate(100%) invert(13%) sepia(48%) saturate(1444%) hue-rotate(335deg) brightness(88%) contrast(96%)!important; }
/* Phones stay untouched. Only logo/navigation/CTA travel a few pixels after the video ends. */
html.has-hero-intro:not(.hero-intro-finished) .header .brand,
html.has-hero-intro:not(.hero-intro-finished) .header .nav a,
html.has-hero-intro:not(.hero-intro-finished) .header .nav-demo,
html.has-hero-intro:not(.hero-intro-finished) .header .menu-button {
  opacity:0;
  transform:translateY(-20px);
  visibility:hidden;
  pointer-events:none;
}
html.has-hero-intro .header .brand,
html.has-hero-intro .header .nav a,
html.has-hero-intro .header .nav-demo,
html.has-hero-intro .header .menu-button {
  transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .78s cubic-bezier(.22,1,.36,1), visibility 0s linear .78s, background-color .2s, box-shadow .2s;
}
html.has-hero-intro.hero-intro-finished .header .brand,
html.has-hero-intro.hero-intro-finished .header .nav a,
html.has-hero-intro.hero-intro-finished .header .nav-demo,
html.has-hero-intro.hero-intro-finished .header .menu-button {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity .72s cubic-bezier(.22,1,.36,1), transform .78s cubic-bezier(.22,1,.36,1), visibility 0s, background-color .2s, box-shadow .2s;
}
html.hero-intro-finished .header .brand{transition-delay:.10s !important;}
html.hero-intro-finished .header .nav a:nth-child(1){transition-delay:.18s !important;}
html.hero-intro-finished .header .nav a:nth-child(2){transition-delay:.25s !important;}
html.hero-intro-finished .header .nav a:nth-child(3){transition-delay:.32s !important;}
html.hero-intro-finished .header .nav-demo,
html.hero-intro-finished .header .menu-button{transition-delay:.40s !important;}
@media(max-width:800px){
 .header .nav-demo {display:none !important;}
 .header .nav {display:none !important;}
 .header .menu-button{width:44px;height:44px;align-items:center;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
 html.has-hero-intro .header .brand,
 html.has-hero-intro .header .nav a,
 html.has-hero-intro .header .nav-demo,
 html.has-hero-intro .header .menu-button {
  opacity:1 !important;transform:none !important;visibility:visible !important;pointer-events:auto!important;transition:none!important;
 }
}

/* V12 — the four-part navigation entrance plays in place without scrolling.
   Override older transition timing with a one-time animation at video end. */
@keyframes tapasNavDrop {
  0% { opacity:0; transform:translate3d(0,-18px,0); }
  100% { opacity:1; transform:translate3d(0,0,0); }
}
html.has-hero-intro.hero-intro-finished .header .brand,
html.has-hero-intro.hero-intro-finished .header .nav a,
html.has-hero-intro.hero-intro-finished .header .nav-demo,
html.has-hero-intro.hero-intro-finished .header .menu-button {
  animation-name:tapasNavDrop;
  animation-duration:620ms;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-fill-mode:both;
  animation-iteration-count:1;
  visibility:visible!important;
  pointer-events:auto;
  transition:none!important;
}
html.has-hero-intro.hero-intro-finished .header .brand { animation-delay:80ms; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(1) { animation-delay:190ms; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(2) { animation-delay:275ms; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(3) { animation-delay:360ms; }
html.has-hero-intro.hero-intro-finished .header .nav-demo,
html.has-hero-intro.hero-intro-finished .header .menu-button { animation-delay:450ms; }
@media (prefers-reduced-motion:reduce) {
  html.has-hero-intro.hero-intro-finished .header .brand,
  html.has-hero-intro.hero-intro-finished .header .nav a,
  html.has-hero-intro.hero-intro-finished .header .nav-demo,
  html.has-hero-intro.hero-intro-finished .header .menu-button {
    animation:none!important; opacity:1!important; transform:none!important;
  }
}

/* V13: tighter nav cascade; starts before the video ends. */
html.has-hero-intro.hero-intro-finished .header .brand { animation-delay:0ms!important; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(1) { animation-delay:80ms!important; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(2) { animation-delay:150ms!important; }
html.has-hero-intro.hero-intro-finished .header .nav a:nth-child(3) { animation-delay:220ms!important; }
html.has-hero-intro.hero-intro-finished .header .nav-demo,
html.has-hero-intro.hero-intro-finished .header .menu-button { animation-delay:290ms!important; }