/* Pohyb a reakce: čtverce profesí, odkrývání, stavy při najetí */

/* lišta průběhu */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;background:var(--yellow);transform-origin:left;transform:scaleX(0)}

/* slova nadpisů */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;will-change:transform}

/* profese: čtverce s detailem */
.prof-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:dense;gap:12px;margin-top:clamp(32px,4vw,48px)}
.tile{display:contents}
.tile-btn{position:relative;aspect-ratio:1;border:0;border-radius:18px;overflow:hidden;background:var(--ink-2);color:var(--white);font-family:inherit;text-align:left;cursor:pointer;padding:0;outline-offset:3px;transition:transform .3s var(--ease),box-shadow .3s}
.tile-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s}
.tile-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.86) 100%);transition:opacity .3s}
.tile-btn.glow::before{z-index:1}
.tile-ag{position:absolute;z-index:2;top:12px;left:12px;font-size:.78rem;font-weight:800;color:var(--ink);background:var(--white);border-radius:999px;padding:5px 10px;transition:background .25s}
.tile-name{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;font-size:clamp(.95rem,1.35vw,1.15rem);font-weight:800;font-stretch:106%;line-height:1.15}
.tile-plus{position:absolute;z-index:2;top:10px;right:10px;width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(20,20,20,.72);fill:none;stroke:var(--white);stroke-width:2.4;stroke-linecap:round;transition:transform .35s var(--ease),background .25s,stroke .25s}
.tile-btn.on{box-shadow:0 0 0 3px var(--yellow)}
.tile-btn.on .tile-ag,.tile-btn.on .tile-plus{background:var(--yellow)}
.tile-btn.on .tile-plus{stroke:var(--ink);transform:rotate(45deg)}
.tile-call{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;aspect-ratio:1;border-radius:18px;padding:14px;background:var(--yellow);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease),background .25s}
.tile-call.glow::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%)}
.tile-call small{font-size:.8rem;font-weight:700}
.tile-call strong{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:850;font-stretch:106%;line-height:1.15}
.tile-call span{font-size:.92rem;font-weight:700}
.tile-detail{display:none;grid-column:1/-1;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:center;background:var(--ink);color:var(--white);border-radius:18px;padding:clamp(20px,3vw,32px)}
.tile-detail.open{display:grid;animation:detail-in .45s var(--ease)}
@keyframes detail-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.tile-main h3{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:850;font-stretch:110%;line-height:1.08}
.prof-does{margin-top:12px;color:#E4E1DA}
.prof-does b{color:var(--yellow);font-weight:700}
.prof-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.prof-tags li{font-size:.84rem;font-weight:600;color:#E8E5DF;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;transition:background .2s,color .2s,border-color .2s}
.prof-why{color:var(--muted-dark);font-size:.98rem}
.prof-rec{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:16px;background:var(--yellow);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease),background .25s}
.prof-rec small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.prof-rec strong{display:block;font-size:1.6rem;font-weight:900;font-stretch:118%;line-height:1.1}
.prof-rec em{font-style:normal;font-size:.84rem;font-weight:600}
.prof-rec svg{width:28px;height:28px;flex:none;transition:transform .3s var(--ease)}

@media (max-width:860px){
  .prof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-detail{grid-template-columns:1fr;gap:14px}
}

/* měděné pájky */
.copper{background:var(--white)}
.cu-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.cu-warn{margin-top:20px;padding:14px 18px;border-radius:14px;background:var(--cream);font-size:.95rem;color:var(--text)}
.cu-warn b{color:#A85A00}
.cu-photo{border-radius:22px;overflow:hidden}
.cu-photo img{width:100%;height:auto;transition:transform .7s var(--ease)}
.cu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px)}
.cu-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:18px;background:var(--cream);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .3s var(--ease),background .25s,color .25s}
.cu-card strong{font-size:1.45rem;font-weight:900;font-stretch:115%;line-height:1.1}
.cu-card small{font-size:.84rem;font-weight:600;color:var(--muted);transition:color .25s}
.cu-card b{margin-top:10px;font-size:1.02rem;color:#A85A00;transition:color .25s}
.cu-card p{margin-top:4px;font-size:.93rem;color:var(--muted);flex:1;transition:color .25s}
.cu-card span{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:.9rem;font-weight:700}
.cu-card span svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.row-group{padding:22px 0 8px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-dark);border-bottom:1px solid var(--cream-2)}
.more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.more b{margin-right:6px}
.more a{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--white);color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;transition:background .2s,transform .25s var(--ease)}
.step{display:flex;flex-direction:column}
.step>p{margin-bottom:22px}
.step .flame{margin-top:auto}
.step .flame img{width:100%;height:100%;object-fit:cover}
@media (max-width:1250px){.logo span{display:none}}
@media (max-width:1000px){.cu-top{grid-template-columns:1fr}}
@media (max-width:860px){.cu-grid{grid-template-columns:1fr}}

/* kroky: linka průběhu */
.steps{position:relative}
.steps-line{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--yellow);transform-origin:left;transform:scaleX(0)}
.step{transition:transform .3s var(--ease)}
.step::before{transition:color .25s,-webkit-text-stroke .25s}

/* fotky s pohybem uvnitř výřezu */
.flame img,.why-img>img{will-change:transform}
.why-img{transition:transform .4s var(--ease)}
.strip img{will-change:transform}

/* žár za kurzorem */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(247,181,0,.28),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.prof-rec.glow::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%)}

/* obecná reakce na dotyk */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn:active,.chip:active,.thumb:active,.prof-rec:active,.tile-btn:active{transform:scale(.97)}

@media (hover:hover){
  .glow:hover::before{opacity:1}

  /* tlačítka */
  .btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-110%);transition:transform .6s var(--ease)}
  .btn:hover::after{transform:translateX(110%)}
  .btn:hover{box-shadow:0 10px 30px rgba(247,181,0,.28)}
  .btn-ghost:hover,.btn-dark:hover{box-shadow:0 10px 30px rgba(0,0,0,.25)}

  /* menu */
  .nav a:not(.btn){position:relative}
  .nav a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav a:not(.btn):hover::after,.nav a.active::after{transform:scaleX(1)}
  .logo img{transition:transform .3s var(--ease)}
  .logo:hover img{transform:translateX(3px) scale(1.04)}

  /* hero */
  .stage{transition:box-shadow .3s;transform-style:preserve-3d;will-change:transform}
  .stage:hover{box-shadow:0 30px 70px rgba(247,181,0,.2)}
  .stage-specs div{transition:background .2s}
  .stage-specs div:hover{background:var(--yellow)}
  .stage-specs div:hover small{color:var(--ink)}
  .thumb{transition:border-color .2s,background .2s,transform .25s var(--ease)}
  .thumb:hover{transform:translateX(6px);border-color:rgba(247,181,0,.6)}
  .thumb img{transition:transform .3s var(--ease)}
  .thumb:hover img{transform:scale(1.1)}
  .hero-facts>div{transition:transform .3s var(--ease)}
  .hero-facts>div:hover{transform:translateY(-4px)}
  .hero-facts>div:hover b{color:var(--yellow)}

  /* co to je */
  .what-points>div{transition:transform .3s var(--ease)}
  .what-points>div:hover{transform:translateX(8px)}
  .what-points i{transition:transform .35s var(--ease),background .25s,color .25s}
  .what-points>div:hover i{background:var(--yellow);color:var(--ink);transform:rotate(-8deg) scale(1.08)}
  .rod{transition:transform .4s var(--ease),box-shadow .4s}
  .rod:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.18)}

  /* kroky a fotky */
  .step:hover{transform:translateY(-6px)}
  .step:hover::before{color:transparent;-webkit-text-stroke:2px var(--yellow)}
  .flame figcaption{transition:background .25s,color .25s}
  .flame:hover figcaption{background:var(--yellow);color:var(--ink)}

  /* profese */
  .tile-btn:hover{transform:translateY(-5px)}
  .tile-btn:hover img{transform:scale(1.1);filter:saturate(1.15) brightness(1.06)}
  .tile-btn:hover .tile-ag{background:var(--yellow)}
  .tile-btn:hover .tile-plus{background:var(--yellow);stroke:var(--ink)}
  .tile-btn:not(.on):hover .tile-plus{transform:rotate(90deg)}
  .tile-call:hover{transform:translateY(-5px);background:#FFC72B}
  .prof-tags li:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
  .prof-rec:hover{transform:translateY(-3px) scale(1.015);background:#FFC72B}
  .prof-rec:hover svg{transform:translateX(6px)}

  /* měděné pájky */
  .cu-photo:hover img{transform:scale(1.05)}
  .cu-card:hover{transform:translateY(-5px);background:var(--ink);color:var(--white)}
  .cu-card:hover small,.cu-card:hover p{color:#CFCBC3}
  .cu-card:hover b{color:var(--yellow)}
  .cu-card:hover span svg{transform:translateX(5px)}
  .more a:hover{background:var(--yellow);transform:translateY(-2px)}

  /* průvodce */
  .chip{transition:background .2s,color .2s,border-color .2s,transform .25s var(--ease)}
  .chip:hover{transform:translateY(-3px);border-color:var(--yellow);color:var(--white)}
  .chip[aria-pressed="true"]:hover{color:var(--ink)}
  .result-specs div{transition:background .2s,transform .25s var(--ease)}
  .result-specs div:hover{background:var(--yellow);transform:translateY(-2px)}
  .result-specs div:hover small{color:var(--ink)}

  /* sortiment: ostatní řádky ustoupí */
  .row{transition:opacity .25s,background .2s,padding .3s var(--ease);border-radius:10px}
  #rows:hover .row:not(:hover){opacity:.4}
  .row:hover{padding-left:12px;padding-right:12px}
  .track{transition:height .25s var(--ease)}
  .row:hover .track{height:20px}
  .row:hover .bar{filter:saturate(1.3) brightness(1.08);box-shadow:0 0 22px rgba(247,181,0,.7)}
  .row:hover .track em{color:var(--ink);font-weight:800}

  /* výrobce */
  .why-img:hover{transform:translateY(-6px)}
  .why-list>div{transition:transform .3s var(--ease)}
  .why-list>div:hover{transform:translateY(-4px)}
  .why-list b::before{transition:transform .35s var(--ease)}
  .why-list>div:hover b::before{transform:rotate(225deg) translateY(2px) scale(1.3)}

  /* otázky */
  .faq summary{transition:padding .3s var(--ease),color .2s}
  .faq summary:hover{padding-left:12px;color:var(--yellow-dark)}

  /* kontakt */
  .contact>a,.contact>div{transition:background .2s,transform .3s var(--ease)}
  .contact>a:hover{transform:translateY(-5px)}
  .contact>a:hover b{color:var(--yellow)}
}

@media (prefers-reduced-motion:reduce){
  .progress,.steps-line{display:none}
}

/* odhalení nesmí zdržovat čtení */
.rv{transition-duration:.5s}