/* ============================================================
   Bramborárna — Motion system
   Foundation tokens · hero entrance · reveal variants ·
   product / use-case / quality / delivery / contact motion ·
   reduced-motion + no-JS fallbacks
   (Process section styles live in css/process.css)
   ============================================================ */

:root {
  /* Motion durations */
  --motion-fast: 160ms;
  --motion-normal: 360ms;
  --motion-slow: 720ms;
  --motion-cinematic: 1100ms;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Legacy aliases kept so existing rules keep working */
  --duration-fast: var(--motion-fast);
  --duration-normal: var(--motion-normal);
  --duration-slow: var(--motion-slow);
}

/* ============================================================
   1. HERO ENTRANCE — layered product composition
   ============================================================ */

.hero__eyebrow,
.hero__proof,
.hero .scroll-cue {
  opacity: 0;
  transform: translateY(12px);
}

.hero__title,
.hero__subtitle,
.hero__actions,
.hero__support {
  opacity: 0;
  transform: translateY(16px);
}

.hero-photo-card,
.hero-badge,
.hero-surface-shadow {
  opacity: 0;
}

.hero-photo-main {
  opacity: 1;
  transform: translate3d(0, 10px, 0) scale(1.01);
  will-change: transform;
}

.hero-photo-card--one {
  transform: translate3d(30px, 28px, 0) scale(0.94);
}

.hero-photo-card--two {
  transform: translate3d(-28px, 32px, 0) scale(0.94);
}

.hero-badge {
  transform: translateY(10px) scale(0.96);
}

.hero-surface-shadow {
  transform: none;
}

/* Entrance timeline — text first, visuals follow */
.hero.is-entered .hero__eyebrow {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) forwards;
}

.hero.is-entered .hero__title {
  animation: hero-fade-up var(--motion-slow) var(--ease-out) forwards;
}

.hero.is-entered .hero__subtitle {
  animation: hero-fade-up var(--motion-slow) var(--ease-out) 90ms forwards;
}

.hero.is-entered .hero__actions {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 200ms forwards;
}

.hero.is-entered .hero__support {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 300ms forwards;
}

.hero.is-entered .hero__proof {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 380ms forwards;
}

.hero.is-entered .scroll-cue {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 520ms forwards;
}

.hero.is-entered .hero-surface-shadow {
  animation: hero-surface-fade var(--motion-slow) var(--ease-out) 240ms forwards;
}

.hero.is-entered .hero-photo-main {
  animation: hero-photo-in 680ms var(--ease-out) 160ms forwards;
  will-change: auto;
}

.hero.is-entered .hero-photo-card--one {
  animation: hero-card-in var(--motion-slow) var(--ease-out) 560ms forwards;
}

.hero.is-entered .hero-photo-card--two {
  animation: hero-card-in var(--motion-slow) var(--ease-out) 680ms forwards;
}

.hero.is-entered .hero-badge {
  animation: hero-badge-in var(--motion-normal) var(--ease-out) 860ms forwards;
}

@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-photo-in {
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-card-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-badge-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hero-surface-fade {
  to {
    opacity: 1;
  }
}

/* ============================================================
   2. SCROLL REVEAL SYSTEM — variants
   ============================================================ */

html.is-reveal-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-normal) var(--ease-out),
    transform var(--motion-normal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.is-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Headings — small movement, quick */
html.is-reveal-ready [data-reveal="section-heading"]:not(.is-revealed) {
  transform: translateY(12px);
  transition-duration: var(--motion-normal);
}

/* Image cards — clip + scale */
html.is-reveal-ready [data-reveal="photo-card"]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.99);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

html.is-reveal-ready [data-reveal="photo-card"].is-revealed {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Product cards — y + subtle scale */
[data-reveal="product-card"] {
  transform: translateY(26px) scale(0.985);
  transition-duration: var(--motion-slow);
}

/* Contact cards — stronger, one-time */
[data-reveal="contact-card"] {
  transform: translateY(30px) scale(0.98);
  transition-duration: var(--motion-slow);
}

[data-reveal="audience-card"] {
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition-duration: var(--motion-slow);
}

/* Section headings — parent stays visible, children stagger */
[data-reveal="section-heading"] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.is-reveal-ready [data-reveal="section-heading"]:not(.is-revealed) > * {
  opacity: 0;
  transform: translateY(12px);
}

[data-reveal="section-heading"].is-revealed > .section-heading__eyebrow {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) forwards;
}

[data-reveal="section-heading"].is-revealed > .section-heading__title {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 60ms forwards;
}

[data-reveal="section-heading"].is-revealed > .section-heading__lead {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) 120ms forwards;
}

[data-reveal="benefit-card"] {
  transform: translateY(18px) scale(0.99);
  transition-duration: var(--motion-slow);
}

[data-reveal="benefit-card"].is-revealed .benefit-card__icon {
  animation: benefit-icon-in var(--motion-normal) var(--ease-snap) 80ms forwards;
}

@keyframes benefit-icon-in {
  from {
    transform: scale(0.88);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

[data-reveal="faq-item"] {
  transform: translateY(14px);
  transition-duration: var(--motion-normal);
}

[data-reveal="process-showcase"] {
  transform: translate3d(0, 20px, 0) scale(0.992);
  transition-duration: var(--motion-slow);
}

[data-reveal="partner-panel"] {
  transform: translateY(22px);
  transition-duration: var(--motion-slow);
}

[data-reveal="quality-funding"] {
  transform: translateY(16px) scale(0.99);
  transition-duration: var(--motion-slow);
}

/* ============================================================
   3. TRUST STRIP — stagger
   ============================================================ */

.trust-strip__item {
  opacity: 0;
  transform: translateY(12px);
}

.trust-strip.is-revealed .trust-strip__item {
  animation: hero-fade-up var(--motion-normal) var(--ease-out) forwards;
  animation-delay: calc(var(--item-index, 0) * 100ms);
}

.trust-strip__item:nth-child(1) { --item-index: 0; }
.trust-strip__item:nth-child(2) { --item-index: 1; }
.trust-strip__item:nth-child(3) { --item-index: 2; }

/* ============================================================
   4. PRODUCT CARDS — tactile product sheets
   ============================================================ */

.product-card__media {
  overflow: hidden;
}

.product-card__media img {
  transition: transform var(--motion-slow) var(--ease-out);
}

/* prep-line under the title (looks like a clean cut line) */
.product-card__title {
  position: relative;
}

.product-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-normal) var(--ease-out);
}

@media (min-width: 1024px) {
  .product-card {
    transition:
      border-color var(--motion-fast) ease,
      transform var(--motion-normal) var(--ease-out);
  }

  .product-card:hover,
  .product-card:focus-within {
    border-color: var(--color-border-strong);
    transform: translateY(-4px);
  }

  .product-card:hover::before,
  .product-card:focus-within::before {
    opacity: 1;
  }

  .product-card:hover .product-card__media img,
  .product-card:focus-within .product-card__media img {
    transform: translateY(-6px) scale(1.035);
  }

  .product-card:hover .product-card__title::after,
  .product-card:focus-within .product-card__title::after {
    transform: scaleX(1);
  }

  .product-card__link {
    transition: gap var(--motion-fast) var(--ease-out);
  }

  .product-card__link .product-card__arrow {
    display: inline-block;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .product-card:hover .product-card__link .product-card__arrow,
  .product-card:focus-within .product-card__link .product-card__arrow {
    transform: translateX(5px);
  }

  /* chip micro-stagger on hover */
  .product-card .chip {
    transition:
      transform var(--motion-normal) var(--ease-out),
      background var(--motion-fast) ease;
  }

  .product-card:hover .chip,
  .product-card:focus-within .chip {
    background: var(--color-accent-soft);
    transform: translateY(-2px);
  }

  .product-card .chip:nth-child(2) { transition-delay: 40ms; }
  .product-card .chip:nth-child(3) { transition-delay: 80ms; }
  .product-card .chip:nth-child(4) { transition-delay: 120ms; }
}

/* ============================================================
   5. USE-CASE FLOW — supply/prep path
   ============================================================ */

.use-case-flow {
  position: relative;
  padding-left: 0.25rem;
}

.use-case-flow::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 1.375rem;
  width: 2px;
  background: var(--color-border);
  border-radius: 1px;
}

.use-case-flow::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 1.375rem;
  width: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  transform-origin: top center;
  transform: scaleY(var(--flow-progress, 0));
  transition: transform var(--motion-slow) var(--ease-out);
}

.use-case-list__item {
  position: relative;
  opacity: 0.5;
  transform: translateX(6px);
  transition:
    opacity var(--motion-normal) var(--ease-out),
    transform var(--motion-normal) var(--ease-out),
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}

.use-case-list__item.is-active {
  opacity: 1;
  transform: translateX(0);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.use-case-list__item .use-case-list__icon {
  transition: transform var(--motion-normal) var(--ease-out);
  transform: scale(0.96);
}

.use-case-list__item.is-active .use-case-list__icon {
  transform: scale(1);
  color: var(--color-accent);
}

/* ============================================================
   6. QUALITY / KLASA — restrained trust reveal
   ============================================================ */

.quality-panel__item {
  position: relative;
  overflow: hidden;
}

.quality-panel__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(232 221 208 / 0.55) 45%,
    rgb(232 221 208 / 0.55) 55%,
    transparent 100%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.quality-panel__item[data-reveal].is-revealed::before {
  animation: quality-sweep var(--motion-cinematic) var(--ease-out) 120ms 1;
}

@keyframes quality-sweep {
  to {
    transform: translateX(120%);
  }
}

/* ============================================================
   7. DELIVERY — route reveal
   ============================================================ */

.distribution-grid {
  position: relative;
}

@media (min-width: 768px) {
  .distribution-grid::before {
    content: "";
    position: absolute;
    top: 1.65rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-cinematic) var(--ease-out);
    z-index: 0;
  }

  .distribution-grid.is-route-active::before {
    transform: scaleX(1);
  }

  .distribution-card {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
   8. PARTNER V-TEK — gentle route card
   ============================================================ */

.partner-panel .btn--secondary .partner-panel__arrow {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-out);
}

.partner-panel .btn--secondary:hover .partner-panel__arrow,
.partner-panel .btn--secondary:focus-visible .partner-panel__arrow {
  transform: translateX(4px);
}

/* ============================================================
   9. CONTACT — conversion moment
   ============================================================ */

.contact-phone,
.contact-hero .btn--ghost {
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-normal) var(--ease-out),
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.contact-phone:hover,
.contact-phone:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.22);
}

/* one-time highlight when section enters viewport or is targeted */
.contact-hero {
  position: relative;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-lg) + 8px);
  border: 2px solid rgb(232 221 208 / 0.55);
  box-shadow: 0 0 0 4px rgb(107 79 50 / 0.22);
  opacity: 0;
  transform: scale(0.98);
  will-change: opacity, transform;
  pointer-events: none;
}

#kontakt.is-targeted .contact-hero::after {
  animation: contact-ring 1400ms var(--ease-out) 1;
}

@keyframes contact-ring {
  0% { opacity: 0; transform: scale(0.98); }
  22% { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ============================================================
   10. HERO → PROCESS scroll cue
   ============================================================ */

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.scroll-cue__line {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-border-strong);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--color-accent);
  border-radius: 1px;
  animation: cue-run 2.4s var(--ease-in-out) infinite;
}

@keyframes cue-run {
  0% { transform: translateX(-110%); }
  60% { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

/* Hero ambient loop — slow drift, no layout cost */
.hero-loop__orb--one {
  animation: hero-orb-drift-a 18s var(--ease-in-out) infinite alternate;
}

.hero-loop__orb--two {
  animation: hero-orb-drift-b 22s var(--ease-in-out) infinite alternate;
}

@keyframes hero-orb-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, 14px, 0); }
}

@keyframes hero-orb-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12px, -10px, 0); }
}

/* Global button micro lift */
@media (min-width: 768px) {
  .btn:not(:disabled):hover,
  .btn:not(:disabled):focus-visible {
    transform: translateY(-1px);
  }

  .btn {
    transition:
      background var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      color var(--motion-fast) ease,
      transform var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-normal) var(--ease-out);
  }

  .btn--primary:hover,
  .btn--primary:focus-visible {
    box-shadow: 0 6px 18px rgb(107 79 50 / 0.22);
  }
}

/* Benefit cards — tactile hover */
@media (min-width: 768px) {
  .benefit-card {
    transition:
      box-shadow var(--motion-normal) var(--ease-out),
      border-color var(--motion-fast) ease,
      transform var(--motion-normal) var(--ease-out);
  }

  .benefit-card:hover,
  .benefit-card:focus-within {
    transform: translateY(-3px);
  }

  .benefit-card__icon {
    transition: transform var(--motion-normal) var(--ease-out);
  }

  .benefit-card:hover .benefit-card__icon,
  .benefit-card:focus-within .benefit-card__icon {
    transform: scale(1.06);
  }
}

/* FAQ — subtle border glow on hover */
@media (min-width: 768px) {
  .faq-item {
    transition:
      border-color var(--motion-fast) ease,
      box-shadow var(--motion-normal) var(--ease-out),
      transform var(--motion-normal) var(--ease-out);
  }

  .faq-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 8px 24px rgb(44 38 32 / 0.06);
    transform: translateY(-2px);
  }
}

/* Partner panel image polish */
.partner-panel__media img {
  transition: transform var(--motion-slow) var(--ease-out);
}

@media (min-width: 768px) {
  .partner-panel:hover .partner-panel__media img,
  .partner-panel:focus-within .partner-panel__media img {
    transform: scale(1.02);
  }
}

/* Quality funding badges — gentle emphasis when revealed */
.quality-funding__item img {
  transition: transform var(--motion-slow) var(--ease-out);
}

.quality-funding__item.is-revealed img {
  animation: funding-badge-in var(--motion-slow) var(--ease-out) forwards;
}

@keyframes funding-badge-in {
  from {
    transform: scale(0.96);
    opacity: 0.85;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__proof,
  .hero .scroll-cue,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__support,
  .hero-photo-main,
  .hero-photo-card,
  .hero-badge,
  .hero-surface-shadow {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  [data-reveal],
  [data-reveal="photo-card"],
  [data-reveal="section-heading"] > *,
  .trust-strip__item {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
  }

  .hero-loop__orb--one,
  .hero-loop__orb--two {
    animation: none;
  }

  .benefit-card:hover,
  .benefit-card:focus-within,
  .faq-item:hover,
  .btn:hover,
  .btn:focus-visible {
    transform: none;
  }

  .quality-funding__item.is-revealed img {
    animation: none;
  }

  .use-case-list__item {
    opacity: 1;
    transform: none;
  }

  .use-case-list__item .use-case-list__icon {
    transform: none;
  }

  .use-case-flow::after { transition: none; }

  .quality-panel__item::before {
    display: none;
  }

  .distribution-grid::before {
    transition: none;
  }

  .product-card:hover,
  .product-card:focus-within,
  .product-card:hover .product-card__media img,
  .product-card:focus-within .product-card__media img {
    transform: none;
  }

  .product-card__title::after {
    transition: none;
  }

  .product-card::before {
    transition: none;
  }

  .contact-phone:hover,
  .contact-phone:focus-visible {
    transform: none;
  }

  #kontakt.is-targeted .contact-hero::after { animation: none; }

  .scroll-cue__line::after {
    animation: none;
    transform: translateX(0);
    width: 100%;
  }
}

/* ============================================================
   NO-JS FALLBACK — everything visible
   ============================================================ */

html:not(.js) .hero__eyebrow,
html:not(.js) .hero__proof,
html:not(.js) .hero__title,
html:not(.js) .hero__subtitle,
html:not(.js) .hero__actions,
html:not(.js) .hero__support,
html:not(.js) .hero-photo-main,
html:not(.js) .hero-photo-card,
html:not(.js) .hero-badge,
html:not(.js) .hero-surface-shadow,
html:not(.js) [data-reveal],
html:not(.js) [data-reveal="photo-card"],
html:not(.js) [data-reveal="section-heading"] > *,
html:not(.js) .trust-strip__item {
  opacity: 1;
  transform: none;
  animation: none;
}

html:not(.js) .use-case-list__item {
  opacity: 1;
  transform: none;
}

html:not(.js) .scroll-cue {
  display: none;
}