/*
Theme Name: Studio/Belak
Theme URI: https://rembel.pl
Author: Remigiusz Belak
Author URI: https://rembel.pl
Description: Motyw WordPress dla Studio/Belak — projektowanie wnętrz, design, wizualizacje 3D.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: belak-studio
Tags: portfolio, one-page, minimal
*/

html { scroll-behavior: smooth; }
body { font-family: 'Archivo', system-ui, sans-serif; background: #f1ede6; color: #1a1816; }

.serif { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 30, 'opsz' 144; }
.serif-italic { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-variation-settings: 'SOFT' 100, 'opsz' 144; }
.serif-soft-40 { font-variation-settings: 'SOFT' 40, 'opsz' 144, 'wght' 300; }
.serif-soft-60 { font-variation-settings: 'SOFT' 60, 'opsz' 144, 'wght' 300; }
.serif-soft-80 { font-variation-settings: 'SOFT' 80, 'opsz' 144, 'wght' 400; }
.serif-soft-100 { font-variation-settings: 'SOFT' 100, 'opsz' 144, 'wght' 400; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: #b34a2a; color: #f1ede6; }

/* Marquee */
.marquee-track { animation: marquee 38s linear infinite; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Grain */
.grain {
  background-image:
    radial-gradient(rgba(26,24,22,0.06) 1px, transparent 1px),
    radial-gradient(rgba(26,24,22,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

/* Link underline */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.link-underline:hover { background-size: 100% 1px; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }

/* Hero parallax */
.hero-title { will-change: transform; transition: transform 80ms linear; }
.hero-meta  { will-change: transform; transition: transform 80ms linear; }

/* FAQ accordion */
.faq-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.faq.open .faq-body        { max-height: 400px; opacity: 1; }
.faq.open .faq-icon-plus   { display: none; }
.faq .faq-icon-minus       { display: none; }
.faq.open .faq-icon-minus  { display: block; }

/* Project tile zoom */
.project-tile-bg { transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.project-tile:hover .project-tile-bg { transform: scale(1.04); }

/* Mobile menu */
.mobile-menu { opacity: 0; pointer-events: none; transition: opacity 250ms; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }

/* Form success toggle */
.form-hidden { display: none; }

/* Inputs */
input, textarea { font-family: 'Archivo', sans-serif; }
input:focus, textarea:focus { outline: none; }

/* Service card */
.service-card { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s; }
.service-card:hover { transform: translateY(-4px); border-color: rgba(26, 24, 22, 0.3); }
.service-card:hover .card-arrow { opacity: 1; transform: rotate(45deg); }
.card-arrow { opacity: 0.3; transition: all 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Live dot */
.live-dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Hover helpers */
.rotate-on-hover    { transition: transform 0.3s; }
.group:hover .rotate-on-hover    { transform: rotate(45deg); }
.translate-on-hover { transition: transform 0.3s; }
.group:hover .translate-on-hover { transform: translateX(4px); }
.widen-on-hover     { transition: width 0.3s; }
.group:hover .widen-on-hover     { width: 4rem !important; }

/* Lightbox */
.lightbox { opacity: 0; pointer-events: none; transition: opacity 300ms; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-stage { transform: scale(0.96); transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.lightbox.open .lightbox-stage { transform: scale(1); }