/* =========================================================
   KUVAELLO — MOTION LAYER v1
   Additive, non-destructive animation/interaction layer.
   Loaded AFTER styles.css. Does not remove or override
   brand colours, layout, typography or business logic.
   ========================================================= */

:root{
  --kv-ease:cubic-bezier(.22,.61,.36,1);
  --kv-ease-soft:cubic-bezier(.16,.8,.3,1);
}

/* -----------------------------------------------------------
   Respect reduced motion system-wide. This is the master
   switch: everything below becomes effectively instant.
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .heroimg.hero-kb{animation:none !important;transform:none !important}
}

/* -----------------------------------------------------------
   HERO — load-in reveal (headline, kicker, copy, CTAs)
   Runs once on page load. Never blocks pointer events, so the
   CTA is clickable immediately even mid-animation.
   ----------------------------------------------------------- */
.hero-line{
  opacity:0;
  transform:translateY(20px);
  animation:kvHeroIn .85s var(--kv-ease-soft) forwards;
  will-change:transform,opacity;
}
.hero .kicker.hero-line{animation-delay:.05s}
.hr-d2{animation-delay:.16s}
.hr-d3{animation-delay:.32s}
.hr-d4{animation-delay:.48s}
.hr-d5{animation-delay:.62s}

@keyframes kvHeroIn{
  to{opacity:1;transform:translateY(0)}
}

/* Subtle cinematic Ken Burns on the hero image — one-time, slow. */
.heroimg.hero-kb{
  animation:kvKenBurns 9s var(--kv-ease) forwards;
  transform-origin:62% 40%;
  will-change:transform;
}
@keyframes kvKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}

/* -----------------------------------------------------------
   GENERIC SCROLL REVEALS
   motion.js sets [data-reveal] on target elements, then adds
   .is-in once they cross the viewport threshold (fires once).
   ----------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--kv-ease-soft), transform .75s var(--kv-ease-soft);
  will-change:transform,opacity;
}
[data-reveal].is-in{opacity:1;transform:translateY(0)}

[data-reveal="img"]{transform:translateY(0) scale(.97)}
[data-reveal="img"].is-in{transform:translateY(0) scale(1)}

@media(max-width:640px){
  [data-reveal]{transform:translateY(16px);transition-duration:.6s}
}

/* -----------------------------------------------------------
   BUTTONS — tactile premium hover
   ----------------------------------------------------------- */
.btn{
  transition:transform .4s var(--kv-ease), box-shadow .4s var(--kv-ease),
             border-color .3s ease, background-color .3s ease, letter-spacing .3s ease;
}
.btn.primary:hover{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 14px 34px -14px rgba(255,122,33,.6);
  letter-spacing:.06em;
}
.btn.ghost:hover{
  transform:translateY(-2px);
  border-color:#ff7a21;
  background:#ffffff12;
}
.btn:active{transform:translateY(0) scale(.98)}

.btn .arrow{display:inline-block;transition:transform .35s var(--kv-ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* Hero CTA magnetic hover (JS adds .magnetic + inline transform) */
.actions .btn.primary.magnetic{transition:transform .25s var(--kv-ease-soft), box-shadow .4s var(--kv-ease)}

/* -----------------------------------------------------------
   NAV + LANGUAGE SWITCH micro-interactions
   ----------------------------------------------------------- */
nav a{position:relative;transition:color .25s ease}
nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:#ff7a21;transition:right .35s var(--kv-ease);
}
nav a:hover::after{right:0}

.lang-switch a{transition:opacity .25s ease, transform .25s ease}
.lang-switch a:not(.active){opacity:.55}
.lang-switch a:hover{opacity:1;transform:translateY(-1px)}

/* -----------------------------------------------------------
   PRODUCT / PRICING / GALLERY CARDS
   ----------------------------------------------------------- */
.prices article{
  transition:transform .5s var(--kv-ease), box-shadow .5s var(--kv-ease), border-color .35s ease;
}
.prices article:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 55px -24px rgba(0,0,0,.65);
  border-color:#ff7a2155;
}
.prices article.featured:hover{border-color:#ff7a21aa}

.product-options label span,.style-options label span,
.uniform-options label span,.delivery-choice label span{
  transition:transform .3s var(--kv-ease), border-color .3s ease, background .3s ease;
}
.product-options label:hover span,.style-options label:hover span,
.uniform-options label:hover span,.delivery-choice label:hover span{
  border-color:#ff7a2166;
  transform:translateY(-2px);
}

.gallery figure{transition:transform .55s var(--kv-ease)}
.gallery figure:hover{transform:translateY(-4px)}

.teamvisual img{transition:transform .5s var(--kv-ease)}
.teamvisual img:hover{transform:translateY(-3px) scale(1.02)}

.wall-card{transition:transform .5s var(--kv-ease)}
.wall-card img{transition:transform .7s var(--kv-ease)}
.wall-card:hover{transform:translateY(-4px)}
.wall-card:hover img{transform:scale(1.035)}

/* -----------------------------------------------------------
   FORM FIELDS — subtle focus glow
   ----------------------------------------------------------- */
.fields input,.notes textarea{
  transition:border-color .25s ease, box-shadow .25s ease;
}
.fields input:focus,.notes textarea:focus{
  box-shadow:0 0 0 3px rgba(255,116,24,.15);
}
.upload-box{transition:border-color .3s ease, background .3s ease, transform .3s var(--kv-ease)}
.upload-box:hover{transform:translateY(-2px)}

/* -----------------------------------------------------------
   DUO — cinematic curtain reveal
   Curtains are inserted by motion.js; the artwork itself is
   never altered, cropped or regenerated.
   ----------------------------------------------------------- */
.duo-visual{overflow:hidden}
.duo-visual:after{z-index:3}
.duo-curtain{
  position:absolute;top:0;bottom:0;width:52%;
  background:#050505;z-index:2;
  transition:transform 1.05s var(--kv-ease-soft);
}
.duo-curtain-left{left:0;transform:translateX(0)}
.duo-curtain-right{right:0;transform:translateX(0)}
.duo-visual.is-in .duo-curtain-left{transform:translateX(-100%);transition-delay:.12s}
.duo-visual.is-in .duo-curtain-right{transform:translateX(100%);transition-delay:.34s}

@media(max-width:640px){
  .duo-curtain{transition-duration:.75s}
}