/* DREWTEX — premium styles, complements Tailwind */

:root {
  --forest:#1B3A2A;
  --green:#245C42;
  --green2:#2E7D57;
  --wood:#9C6B3F;
  --woodd:#5E3F24;
  --cream:#F6F2E9;
  --cream2:#ECE5D6;
  --charcoal:#161916;
  --sand:#C9A227;
}

html, body { background: var(--cream); color: var(--charcoal); }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .display { font-family: 'Cabinet Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Grain overlay (subtelny pył drzewny) */
.grain::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0 0.14 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: .08; mix-blend-mode: overlay;
}

/* Marquee */
.marquee { display:flex; overflow:hidden; gap:3rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:flex; gap:3rem; animation: marquee 38s linear infinite; flex-shrink:0; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Scroll progress bar */
.scroll-progress { position: fixed; top:0; left:0; right:0; height:3px; z-index:60; background: linear-gradient(90deg, #C9A227, #2E7D57); transform-origin: 0 0; transform: scaleX(0); pointer-events:none; }

/* Magnetic button */
.btn-magnetic { transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* Reveal — initial states for GSAP */
[data-reveal] { opacity: 0; transform: translateY(36px); }
[data-reveal-x] { opacity: 0; transform: translateX(-36px); }
[data-reveal-scale] { opacity: 0; transform: scale(0.94); }
[data-split] .word, [data-split] .char { display: inline-block; }

/* Image reveal mask — overlay added by JS only; if JS fails, image is visible */
[data-img-reveal] { position: relative; overflow: hidden; }

/* Header sticky transitions */
header.site-header { transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .25s ease; }
header.site-header.is-scrolled { background-color: rgba(22,25,22,0.85); backdrop-filter: blur(12px); border-color: rgba(255,255,255,.06); }

/* Dropdown */
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; }

/* Card tilt */
.card-tilt { transform-style: preserve-3d; transition: box-shadow .3s ease; }
.card-tilt:hover { box-shadow: 0 30px 60px -25px rgba(27,58,42,.45); }
.card-tilt img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.card-tilt:hover img { transform: scale(1.08); }

/* Number underline */
.num-accent::after {
  content: "";
  display:block; width: 48px; height: 4px; margin-top: 12px;
  background: linear-gradient(90deg, var(--green2), var(--sand));
  border-radius: 2px;
}

/* Section divider */
.divider-grain {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,25,22,.18), transparent);
}

/* Lightbox */
.lightbox { position: fixed; inset:0; background: rgba(10,12,10,.92); display:none; align-items:center; justify-content:center; z-index: 80; padding: 2rem; }
.lightbox.is-open { display:flex; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox button { position:absolute; top: 1.25rem; right: 1.25rem; color: #fff; font-size: 1.75rem; background: rgba(255,255,255,.08); width: 48px; height:48px; border-radius:9999px; display:grid; place-items:center; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background: rgba(255,255,255,.08); color: #fff; border-radius: 9999px; display:grid; place-items:center; }
.lightbox .nav.prev { left: 1rem; }
.lightbox .nav.next { right: 1rem; }

/* Cookie banner */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70; max-width: 720px; margin: 0 auto; background: var(--charcoal); color: var(--cream); padding: 1.25rem 1.5rem; border-radius: 14px; box-shadow: 0 25px 60px rgba(0,0,0,.35); display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.cookie-banner[hidden] { display:none; }

/* Hero kinetic */
.hero-headline .word { overflow: hidden; display: inline-block; line-height: 0.95; padding-right: .18em; }
.hero-headline .word > span { display: inline-block; transform: translateY(110%); }
.hero-headline .line { overflow:hidden; display:block; }

/* Glow */
.glow-on-hover { position: relative; overflow: hidden; isolation: isolate; }
.glow-on-hover::before {
  content:""; position:absolute; inset:-2px; z-index:-1; opacity:0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(201,162,39,0.18), transparent 40%);
  transition: opacity .35s ease;
}
.glow-on-hover:hover::before { opacity: 1; }

/* Card lift */
.card-lift { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.card-lift:hover { transform: translateY(-4px); }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position:absolute; inset:0; background: rgba(10,12,10,.5); opacity: 0; transition: opacity .3s ease; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position:absolute; right: 0; top:0; height: 100%; width: min(420px, 90vw); background: var(--cream); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); padding: 2rem 1.5rem; overflow-y:auto; }
.drawer.is-open .drawer__panel { transform: translateX(0); }

/* Forms */
.input, .textarea { width:100%; background: var(--cream2); border: 1px solid rgba(22,25,22,.1); padding: .9rem 1rem; border-radius: 10px; font-family: inherit; color: var(--charcoal); transition: border-color .2s, background-color .2s; }
.input:focus, .textarea:focus { outline: none; border-color: var(--green2); background: #fff; }
.textarea { min-height: 160px; resize: vertical; }

/* Utilities */
.no-scroll { overflow: hidden; }
.bg-noise { background-color: var(--forest); position: relative; overflow: hidden; }
.bg-noise::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.04), transparent 60%); pointer-events:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
  [data-reveal], [data-reveal-x], [data-reveal-scale] { opacity: 1 !important; transform: none !important; }
  .hero-headline .word > span { transform: none !important; }
  [data-img-reveal] .img-reveal__mask { display:none !important; }
  .scroll-progress { display:none !important; }
}

/* Selection */
::selection { background: var(--green2); color: var(--cream); }

/* Focus visible */
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 4px; }
