/*
 * Café Non Olet — Theme Styles
 * Designed & developed by Ilias Albay · Werbeagentur Way of Art · Krefeld · https://wayofart.de/
 */

html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #132922; }
::-webkit-scrollbar-thumb { background: #4A7C5C; border-radius: 3px; }

/* Hero */
.hero-bg {
  background-image: url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1920&q=85');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  .hero-bg { background-attachment: scroll; }
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* Line grow */
.line-grow {
  width: 0;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-grow.visible { width: 60px; }

/* Image reveal */
.img-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* Hover lift */
.hover-lift {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

/* Image zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.img-zoom:hover img { transform: scale(1.06); }

/* Nav */
.nav-solid {
  background: rgba(19, 41, 34, 0.95) !important;
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(74, 124, 92, 0.1);
}

/* Btn */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
.btn-premium:hover::before { transform: translateX(100%); }
.btn-premium:hover { letter-spacing: 0.2em; }

/* Divider */
.divider-line {
  background: linear-gradient(to right, transparent, #4A7C5C, transparent);
}

/* Floating */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.float-gentle { animation: gentle-float 4s ease-in-out infinite; }

/* Coin slow rotation */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 120s linear infinite; }

/* Value card */
.value-card {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              background 0.5s ease;
  background: linear-gradient(180deg, rgba(74, 124, 92, 0.04) 0%, rgba(74, 124, 92, 0) 100%);
}
.value-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(180deg, rgba(74, 124, 92, 0.1) 0%, rgba(74, 124, 92, 0.02) 100%);
}
.value-card .value-num {
  transition: color 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.value-card:hover .value-num {
  color: rgba(123, 166, 138, 0.5);
  transform: translateX(4px);
}

/* Roman chapter number */
.chapter-roman {
  font-feature-settings: "lnum" 1;
  letter-spacing: -0.02em;
}

/* Cookie banner */
.cookie-banner {
  transform: translateY(120%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.visible { transform: translateY(0); }

/* WordPress-Inhalt (the_content) im dunklen Layout */
.nonolet-content h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 2rem; color: #F5EDDA; margin: 1.5rem 0 0.75rem; line-height: 1.2; }
.nonolet-content h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: #F5EDDA; margin: 1.25rem 0 0.5rem; }
.nonolet-content p { margin-bottom: 1rem; }
.nonolet-content a { color: #7BA68A; text-decoration: underline; text-underline-offset: 4px; }
.nonolet-content a:hover { color: #F5EDDA; }
.nonolet-content ul, .nonolet-content ol { margin: 1rem 0 1rem 1.25rem; list-style: disc; }
.nonolet-content ol { list-style: decimal; }
.nonolet-content li { margin-bottom: 0.5rem; }
.nonolet-content img { border-radius: 1rem; margin: 1.5rem 0; max-width: 100%; height: auto; }
.nonolet-content blockquote { border-left: 2px solid rgba(123,166,138,0.5); padding-left: 1.25rem; font-style: italic; color: #F5EDDA; margin: 1.5rem 0; }

/* Grain overlay */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}