/* ==========================================================================
   Casablanca brand layer for the Caffino build.
   Loaded last; the palette itself lives in css/colors/scheme-01.css.
   ========================================================================== */

:root {
  --casa-green: #2b4e35;   /* palm, sampled from the logo */
  --casa-crema: #c68b4f;
  --casa-ink: #14100d;

  /* Marcellus/Roboto have no Georgian coverage; Cyrillic comes from Roboto. */
  --body-font: "Roboto", "Noto Sans Georgian", system-ui, sans-serif;
}

/* The replacement photography is lighter than the stock frames, so the hero
   copy needs its own scrim rather than relying on the image being dark. */
#section-hero::before,
.section-dark.parallax-back::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(20, 16, 13, 0.86) 0%, rgba(20, 16, 13, 0.62) 52%, rgba(20, 16, 13, 0.3) 100%);
  pointer-events: none;
}
#section-hero > *,
.section-dark.parallax-back > * { position: relative; z-index: 2; }

/* The logo is 3.1:1, wider than the mark the template shipped with. */
#logo img, .logo-main, .logo-scroll, .logo-mobile { height: 38px; width: auto; max-width: none; }

/* Vendor bug in css/swiper-custom-1.css: the hero reveal animations declare
   no animation-fill-mode, so each element snaps back to its `.anim-order-*
   { opacity: 0 }` base state the instant the animation ends -- the headline
   fades in and then vanishes. Hold the end state instead. */
.swiper-slide.swiper-slide-active [class*="anim-order-"],
.swiper-slide.swiper-slide-duplicate-active [class*="anim-order-"] {
  animation-fill-mode: forwards;
}

/* Same file, line 8: `animation-name: scaleIn  animation-duration: 1.5s;` is
   missing a semicolon, which voids the whole declaration. */
.swiper-slide.swiper-slide-active .swiper-inner,
.swiper-slide.swiper-slide-duplicate-active .swiper-inner {
  animation-name: scaleIn;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  .swiper-slide [class*="anim-order-"] { animation: none !important; opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Uppercase titles. Latin and Cyrillic are handled here; Georgian is
   unicameral and CSS uppercase is a deliberate no-op under lang="ka", so
   Georgian titles would need casing in the render layer (as on main).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .widget-title {
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
h1, .hero-title { line-height: 1.06; }

/* --------------------------------------------------------------------------
   Motion
   The template animates 114 elements into view with five different entrance
   effects and 106 hand-set delays, so the page is never still while you read
   it. One quiet, consistent entrance replaces the lot; the hero keeps its own
   staged reveal (.anim-order-*, untouched here) as the single deliberate
   moment on the page.
   -------------------------------------------------------------------------- */

@keyframes casaRise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.wow {
  animation-name: casaRise !important;
  animation-duration: 0.5s !important;
  animation-delay: 0s !important;                 /* drops the stagger */
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  animation-fill-mode: both !important;
}

/* Hover feedback answers something the reader did, so it stays - just
   quicker, and only on things that are actually interactive. */
a, button, .btn-main, .casa-btn { transition-duration: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated,
  [class*="anim-order-"],
  .swiper-slide [class*="anim-order-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Header
   The theme toggles .smaller, .clone, .nav-up and .scroll-down from three
   handlers that disagree mid-scroll, so the bar flickered between states.
   Those classes are neutralised below and appearance keys off .casa-solid,
   set by components/HeaderScroll.jsx alone.
   -------------------------------------------------------------------------- */

header,
header.smaller,
header.clone,
header.nav-up,
header.scroll-down,
header.autoshow,
header.autoshow.scrollOn,
header.autoshow.scrollOff {
  position: fixed;
  top: 0;
  /* style.css hides the bar with `.scroll-down { margin-top: -90px }` and
     `header.autoshow.scrollOff { top: -120px }`; neutralising only `top` on
     the single-class selectors left both of those still firing. */
  margin-top: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Over the hero: no bar, just a scrim so the nav stays legible on photography. */
header:not(.casa-solid)::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 16, 13, 0.62) 0%, rgba(20, 16, 13, 0.28) 45%, transparent 100%);
}

/* Past the hero: commit to a solid bar. */
header.casa-solid {
  /* Opaque enough that a backdrop blur adds nothing, and blur promotes the
     bar to its own compositing layer, which cost more than it was worth. */
  background-color: rgba(20, 16, 13, 0.97);
  box-shadow: 0 1px 0 rgba(239, 231, 218, 0.10), 0 10px 30px rgba(0, 0, 0, 0.28);
}
header.casa-solid::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}


/* --------------------------------------------------------------------------
   Language switcher (ქარ / ENG / РУС)
   -------------------------------------------------------------------------- */
.casa-lang {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-inline-end: 14px;
  padding: 3px;
  vertical-align: middle;
  border: 1px solid rgba(239, 231, 218, 0.22);
  border-radius: 2px;
  background: rgba(20, 16, 13, 0.35);
}

.casa-lang a {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #efe7da;
  opacity: 0.8;
  border-radius: 2px;
  transition: opacity 0.18s, background-color 0.18s, color 0.18s;
}

.casa-lang a:hover { opacity: 1; }

.casa-lang a[aria-current="true"] {
  opacity: 1;
  color: #14100d;
  background: var(--casa-crema, #c68b4f);
}

@media (max-width: 1200px) {
  .casa-lang a { padding: 4px 6px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Pack shots (components/PackShot.jsx)
   The template's offset colour block, with the photo floated over it, a
   hairline mat inside the photo, a second hairline frame just outside it and
   a caption tab straddling the bottom edge.
   -------------------------------------------------------------------------- */

.casa-shot { position: relative; margin: 0; padding: 48px 0; }
.casa-shot::before,
.casa-shot::after { content: ''; position: absolute; }
.casa-shot::before { inset: 0 30% 0 0; background: var(--primary-color); }
.casa-shot.flip::before { inset: 0 0 0 30%; background: var(--secondary-color); }
.casa-shot::after {
  inset: 30px calc(12% - 18px);
  border: 1px solid rgba(var(--bg-dark-1-rgb), 0.35);
}
.casa-shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 76%;
  margin: 0 auto;
  box-shadow: 0 34px 60px -26px rgba(var(--bg-dark-1-rgb), 0.75);
  outline: 1px solid rgba(239, 231, 218, 0.55);
  outline-offset: -14px;
}
.casa-shot figcaption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 48px;
  transform: translate(-50%, 50%);
  padding: 10px 24px;
  white-space: nowrap;
  background: var(--bg-dark-3);
  border: 1px solid rgba(var(--primary-color-rgb), 0.7);
  color: var(--bg-default);
  font-family: var(--heading-font), var(--body-font);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}