/* ============================================================================
   enhancements.css — iyul-tsvetochnyy demo
   Task: iyul_responsive_enhancement_css (parent build_iyul_tsvetochnyy_site_s1)
   Owner: dev-middle-0

   Scoped polish layer for exactly five selector families:
   .hero-art img, .card, .mood, .form, .footer
   - No global/universal selectors; every rule is scoped to those families.
   - Transforms: only the existing .card:hover lift (re-declared so it
     survives this file loading after the base inline <style>). No other
     transform or animation is introduced.
   - Colors and shadows use only :root tokens already defined in index.html
     (var(--...)). No new raw hex values.
   - No width/height/padding/margin changes anywhere → zero layout-overflow
     risk at 1440 / 768 / 390 (shadows, outlines, filters and colors do not
     affect layout; the .card border is absorbed by the global border-box).
   - This file must load AFTER the base inline <style> block.
   ============================================================================ */

/* --- Hero art: soft hover depth — shadow + saturation only, no layout --- */
.hero-art img{
  transition:box-shadow .3s ease,filter .3s ease;
}
.hero-art img:hover{
  box-shadow:var(--shadow);
  filter:saturate(1.05);
}

/* --- Cards: hairline definition, hover lift + image response --- */
.card{
  border:1px solid var(--line);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.card img{
  transition:filter .3s ease;
}
.card:hover img{
  filter:saturate(1.08);
}

/* --- Mood tiles: hover depth + visible keyboard focus (base had none) --- */
.mood{
  transition:box-shadow .25s ease;
}
.mood:hover{
  box-shadow:var(--shadow);
}
.mood:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:3px;
}

/* --- Form: lift on focus-within, input hover, visible button focus,
           softer placeholder --- */
.form{
  transition:box-shadow .25s ease;
}
.form:focus-within{
  box-shadow:var(--shadow);
}
.form input,
.form textarea{
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form input:hover,
.form textarea:hover{
  border-color:var(--pine);
}
.form input::placeholder,
.form textarea::placeholder{
  color:var(--ink);
  opacity:.55;
}
.form .primary:focus-visible{
  outline:3px solid var(--pine);
  outline-offset:3px;
}

/* --- Footer: link hover/focus affordance using token colors --- */
.footer a{
  transition:color .2s ease;
}
.footer a:hover{
  color:var(--mist);
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer a:focus-visible{
  outline:2px solid var(--mist);
  outline-offset:2px;
}

/* --- Mobile polish: soften corner radii at the smallest scale --- */
@media (max-width:430px){
  .hero-art img{
    border-radius:28px;
  }
  .card{
    border-radius:22px;
  }
  .mood{
    border-radius:22px;
  }
  .form{
    border-radius:22px;
  }
}

/* --- Motion: honour reduced-motion preference for this file's selectors
       (the base media block only lists its own selectors) --- */
@media (prefers-reduced-motion:reduce){
  .hero-art img,
  .card,
  .card img,
  .mood,
  .form,
  .form input,
  .form textarea,
  .footer a{
    transition:none;
  }
}