/* ===========================================================
   Effectopia — theme.css
   Komponentní styly (Tailwind utility třídy jdou z CDN).
   =========================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Outfit', sans-serif; }
::selection { background: #9A2462; color: #fff; }

/* WP admin bar fix */
.admin-bar #site-header { top: 32px; }
@media (max-width: 782px){ .admin-bar #site-header { top: 46px; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* Buttons */
.pill { border-radius: 999px; }
.btn { position: relative; overflow: hidden; transition: all .35s ease; }
.btn::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s ease; }
.btn:hover::after { left:140%; }
.btn-primary { background:#7A0E45; color:#fff; box-shadow:0 10px 30px -10px rgba(122,14,69,.55); }
.btn-primary:hover { background:#9A2462; transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(154,36,98,.6); }
.btn-primary:disabled { opacity:.4; pointer-events:none; }
.btn-ghost { border:1.5px solid rgba(255,255,255,.7); color:#fff; }
.btn-ghost:hover { background:#fff; color:#5C0632; }
.btn-dark { border:1.5px solid #5C0632; color:#5C0632; }
.btn-dark:hover { background:#5C0632; color:#fff; }

/* Silver accents */
.silver-line { height:1px; background:linear-gradient(90deg,transparent,#C5C9D2,transparent); position:relative; overflow:hidden; }
.silver-line::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); transform:translateX(-100%); animation:eff-shimmer 4s infinite; }
@keyframes eff-shimmer { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(200%)} }
.silver-text { background:linear-gradient(120deg,#9AA0AC,#E7E9EE,#9AA0AC); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Nav */
#nav { transition: all .4s ease; }
#nav.scrolled { background: rgba(251,249,246,.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(27,22,32,.07); }
#nav.scrolled .nav-link, #nav.scrolled .nav-logo, #nav.scrolled .nav-extra { color:#1B1620 !important; }
#nav.scrolled .nav-cta { background:#7A0E45; color:#fff; border-color:#7A0E45; }
/* Logo varianta podle pozadí: bílé na tmavém (nahoře), růžové na světlém (po scrollu) */
.nav-logo .logo-dark { display:none; }
#nav.scrolled .nav-logo .logo-light { display:none; }
#nav.scrolled .nav-logo .logo-dark { display:inline-block; }
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#9A2462; transition:width .35s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color:#9A2462 !important; }

/* Cards */
.card-hover { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(36,5,20,.25); }

/* Mobile menu */
#mobileMenu { transform: translateX(100%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
#mobileMenu.open { transform: none; }

/* Custom cursor (homepage) */
@media (hover:hover) and (pointer:fine){
  body.eff-cursor * { cursor:none !important; }
  #cursor { position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%; background:#5C0632; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,background .25s; }
  #cursor-ring { position:fixed; top:0; left:0; width:38px; height:38px; border:1.5px solid rgba(92,6,50,.45); border-radius:50%; z-index:9999; pointer-events:none; transform:translate(-50%,-50%); transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s; }
  #cursor-ring.hover { width:66px; height:66px; border-color:rgba(197,201,210,.9); background:rgba(92,6,50,.06); }
  #cursor.hover { background:#C5C9D2; }
}
@media (hover:none){ #cursor,#cursor-ring{ display:none; } }

/* Scroll progress (homepage) */
#progress { position:fixed; top:0; left:0; height:3px; width:0%; z-index:9998; background:linear-gradient(90deg,#5C0632,#9A2462,#C5C9D2); box-shadow:0 0 12px rgba(154,36,98,.5); }

/* Hero animations */
@keyframes eff-kb { from{transform:scale(1.08)} to{transform:scale(1.2)} }
.kenburns { animation:eff-kb 22s ease-out forwards; }
@keyframes eff-floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
.orb { position:absolute; border-radius:50%; filter:blur(60px); animation:eff-floaty 9s ease-in-out infinite; }

/* Marquee */
.marquee { display:flex; gap:3.5rem; width:max-content; animation:eff-scroll 26s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state:paused; }
@keyframes eff-scroll { to { transform:translateX(-50%); } }

/* Tilt */
.tilt { transition: transform .25s ease, box-shadow .4s ease, border-color .4s ease; will-change:transform; }
.tilt:hover { box-shadow:0 40px 70px -30px rgba(36,5,20,.3); }

/* Process tabs */
.step-tab { transition:all .35s ease; }
.step-tab.active { background:#5C0632; color:#fff; }
.step-tab.active .step-num { color:rgba(255,255,255,.4); }
.step-panel { display:none; animation:eff-fadeUp .5s ease; }
.step-panel.active { display:block; }
@keyframes eff-fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* Testimonial slider */
.slides { display:flex; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.slide { min-width:100%; }
@media(min-width:768px){ .slide{ min-width:33.3333%; } }
.dot { width:9px; height:9px; border-radius:50%; background:#C5C9D2; transition:all .3s; }
.dot.active { background:#5C0632; width:28px; border-radius:99px; }

/* FAQ */
.faq-a { max-height:0; overflow:hidden; transition:max-height .5s ease; }
.faq.open .faq-a { max-height:440px; }
.faq.open .faq-icon { transform:rotate(135deg); color:#9A2462; }
.faq-icon { transition:transform .4s ease, color .3s; }
.faq:hover { border-color:#C5C9D2; }

/* Portfolio filter + screenshot scroll */
.filter-btn { transition:all .3s; }
.filter-btn.active { background:#5C0632; color:#fff; border-color:#5C0632; }
.shot { transition:transform 5s ease; }
.card-hover:hover .shot { transform:translateY(calc(-100% + 240px)); }
.logo-cell { transition:all .35s; }
.logo-cell:hover { background:#fff; box-shadow:0 20px 40px -22px rgba(36,5,20,.25); }

/* Ceník billing toggle */
.toggle-opt { transition:all .3s; }
.toggle-opt.active { background:#5C0632; color:#fff; }

/* Forms */
.field { transition:border-color .3s, box-shadow .3s; }
.field:focus { outline:none; border-color:#9A2462; box-shadow:0 0 0 4px rgba(154,36,98,.12); }

/* Charts */
.chart-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:1.5rem; }
.seg { transition:stroke-dasharray 1.3s cubic-bezier(.16,1,.3,1); }
.bar-fill { transition:transform 1.1s cubic-bezier(.16,1,.3,1); transform-box:fill-box; transform-origin:left; transform:scaleX(0); }
.dot-pt { transition:opacity .5s ease; }
#lineTip { position:absolute; pointer-events:none; opacity:0; transition:opacity .2s; background:#fff; color:#1B1620; font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.3); transform:translate(-50%,-135%); white-space:nowrap; z-index:5; }

/* Wizard */
.opt { transition:all .22s; cursor:pointer; background:#fff; }
.opt:hover { border-color:#9A2462; transform:translateY(-2px); box-shadow:0 16px 32px -20px rgba(36,5,20,.35); }
.opt.sel { border-color:#5C0632; background:rgba(92,6,50,.04); box-shadow:0 0 0 3px rgba(154,36,98,.12); }
#card { transition:opacity .22s ease, transform .22s ease; }
#card.out { opacity:0; transform:translateY(14px); }
#progressbar { transition:width .55s cubic-bezier(.16,1,.3,1); }

/* Back to top */
#toTop { opacity:0; transform:translateY(20px) scale(.9); transition:all .4s ease; pointer-events:none; }
#toTop.show { opacity:1; transform:none; pointer-events:auto; }

/* WP content (editor) basic typography for prose areas */
.eff-prose p { margin-bottom: 1rem; line-height: 1.75; }
.eff-prose h2 { font-family:'Outfit',sans-serif; font-weight:600; font-size:1.6rem; margin:1.5rem 0 .75rem; }
.eff-prose ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }