/* ==========================================================================
   Izama's — Premium motion layer (additive only; does not alter the theme)
   ========================================================================== */

:root {
  --iz-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --iz-gold-glow: 0 10px 30px rgba(201, 162, 39, 0.28);
}

/* ---------- Page load ---------- */
body { opacity: 1; }
html.iz-js body { animation: izPageIn 0.5s var(--iz-ease) both; }
html.iz-leaving body { animation: izPageOut 0.25s ease both; }
@keyframes izPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes izPageOut { to { opacity: 0; transform: translateY(-6px); } }

.site-header .brand { animation: izBrandIn 0.7s var(--iz-ease) both 0.05s; }
@keyframes izBrandIn { from { opacity: 0; transform: scale(0.92) translateY(-6px); } to { opacity: 1; transform: none; } }
.site-header .menu > li { animation: izNavIn 0.5s var(--iz-ease) both; }
.site-header .menu > li:nth-child(1) { animation-delay: 0.10s; }
.site-header .menu > li:nth-child(2) { animation-delay: 0.16s; }
.site-header .menu > li:nth-child(3) { animation-delay: 0.22s; }
.site-header .menu > li:nth-child(4) { animation-delay: 0.28s; }
.site-header .menu > li:nth-child(5) { animation-delay: 0.34s; }
.site-header .menu > li:nth-child(6) { animation-delay: 0.40s; }
.site-header .nav-right { animation: izNavIn 0.5s var(--iz-ease) both 0.46s; }
@keyframes izNavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero-slide img { will-change: transform; animation: izKen 18s ease-out both; }
@keyframes izKen { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.hero .hero-copy > *,
.hero .hero-inner > * { animation: izUp 0.8s var(--iz-ease) both; }
.hero .hero-copy > *:nth-child(1), .hero .hero-inner > *:nth-child(1) { animation-delay: 0.20s; }
.hero .hero-copy > *:nth-child(2), .hero .hero-inner > *:nth-child(2) { animation-delay: 0.34s; }
.hero .hero-copy > *:nth-child(3), .hero .hero-inner > *:nth-child(3) { animation-delay: 0.48s; }
.hero .hero-copy > *:nth-child(4), .hero .hero-inner > *:nth-child(4) { animation-delay: 0.62s; }
.hero .hero-copy > *:nth-child(5), .hero .hero-inner > *:nth-child(5) { animation-delay: 0.76s; }
@keyframes izUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.play, .btn-play, [class*="play"] .icon-play { position: relative; }
.play::after, .btn-play::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.6); animation: izPulse 2.6s ease-out infinite; pointer-events: none;
}
@keyframes izPulse {
  0% { transform: scale(0.92); opacity: 0.85; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Scroll reveal ---------- */
html.iz-js .iz-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--iz-ease), transform 0.7s var(--iz-ease); }
html.iz-js .iz-reveal.iz-in { opacity: 1; transform: none; }
html.iz-js .iz-zoom { opacity: 0; transform: scale(0.96); transition: opacity 0.8s var(--iz-ease), transform 0.8s var(--iz-ease); }
html.iz-js .iz-zoom.iz-in { opacity: 1; transform: none; }
html.iz-js .iz-line { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--iz-ease); }
html.iz-js .iz-line.iz-in { transform: scaleX(1); }


/* ---------- Buttons ---------- */
.btn { transition: transform 0.25s var(--iz-ease), box-shadow 0.25s var(--iz-ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--iz-gold-glow); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn svg { transition: transform 0.25s var(--iz-ease); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.menu > li > a { position: relative; transition: color 0.25s ease; }
.menu > li > a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: currentColor; opacity: 0.9; transform: scaleX(0); transform-origin: right center;
  transition: transform 0.32s var(--iz-ease);
}
.menu > li > a:hover::after,
.menu > li.active > a::after { transform: scaleX(1); transform-origin: left center; }
.menu .caret { transition: transform 0.28s var(--iz-ease); }
.menu li:hover > a > .caret, .menu li.open > a > .caret { transform: rotate(180deg); }
.menu .dropdown.sub { }
.menu li:hover > a > .caret + * { }
.menu .dropdown {
  transition: opacity 0.28s var(--iz-ease), transform 0.28s var(--iz-ease), visibility 0.28s;
}
@media (min-width: 981px) {
  .menu .dropdown { opacity: 0; transform: translateY(10px); }
  .menu li:hover > .dropdown, .menu li:focus-within > .dropdown { opacity: 1; transform: translateY(0); }
  .menu li:hover > .dropdown > li, .menu li:focus-within > .dropdown > li { animation: izDropIn 0.35s var(--iz-ease) both; }
  .menu .dropdown > li:nth-child(1) { animation-delay: 0.02s; }
  .menu .dropdown > li:nth-child(2) { animation-delay: 0.05s; }
  .menu .dropdown > li:nth-child(3) { animation-delay: 0.08s; }
  .menu .dropdown > li:nth-child(4) { animation-delay: 0.11s; }
  .menu .dropdown > li:nth-child(5) { animation-delay: 0.14s; }
  .menu .dropdown > li:nth-child(6) { animation-delay: 0.17s; }
  .menu .dropdown > li:nth-child(7) { animation-delay: 0.20s; }
  .menu .dropdown > li:nth-child(8) { animation-delay: 0.23s; }
  .menu .dropdown > li:nth-child(9) { animation-delay: 0.26s; }
  .menu .dropdown > li:nth-child(10) { animation-delay: 0.29s; }
  .menu .dropdown > li:nth-child(11) { animation-delay: 0.32s; }
}
@keyframes izDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang button { transition: color 0.2s ease, background-color 0.25s ease, transform 0.2s var(--iz-ease); }
.lang button:hover { transform: translateY(-1px); }

/* ---------- Cards ---------- */
.service-card, .card, .svc-card {
  transition: transform 0.35s var(--iz-ease), box-shadow 0.35s var(--iz-ease), border-color 0.35s ease;
}
.service-card:hover, .card:hover, .svc-card:hover { transform: translateY(-8px); box-shadow: var(--iz-gold-glow); }
.service-card img, .card img, .svc-card img { transition: transform 0.7s var(--iz-ease); }
.service-card:hover img, .card:hover img, .svc-card:hover img { transform: scale(1.07); }
.service-card .icon, .card .icon, .feature .icon { transition: transform 0.35s var(--iz-ease), color 0.3s ease; }
.service-card:hover .icon, .card:hover .icon, .feature:hover .icon { transform: translateY(-4px) scale(1.08); }
.service-card a svg, .card a svg { transition: transform 0.3s var(--iz-ease); }
.service-card:hover a svg, .card:hover a svg { transform: translateX(4px); }
.feature, .why-card { transition: transform 0.35s var(--iz-ease), box-shadow 0.35s var(--iz-ease); }
.feature:hover, .why-card:hover { transform: translateY(-6px); }

/* ---------- Gallery ---------- */
.gal-item, .gallery-item { overflow: hidden; }
.gal-item img, .gallery-item img { transition: transform 0.8s var(--iz-ease); }
.gal-item:hover img, .gallery-item:hover img { transform: scale(1.09); }
.gal-item .cap, .gallery-item .cap, .gal-item figcaption, .gallery-item figcaption {
  transition: transform 0.4s var(--iz-ease), opacity 0.4s ease, background-color 0.4s ease;
}
.gal-item:hover .cap, .gallery-item:hover .cap,
.gal-item:hover figcaption, .gallery-item:hover figcaption { transform: translateY(-4px); }
.lightbox { transition: opacity 0.3s ease; }
.lightbox img { animation: izLightbox 0.35s var(--iz-ease) both; }
@keyframes izLightbox { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* ---------- Testimonials ---------- */
.testimonial, .testi-card { transition: transform 0.35s var(--iz-ease), box-shadow 0.35s var(--iz-ease); }
.testimonial:hover, .testi-card:hover { transform: translateY(-6px); box-shadow: var(--iz-gold-glow); }

/* ---------- Forms ---------- */
input, select, textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22); outline: none; }
.form-msg, .alert { animation: izUp 0.45s var(--iz-ease) both; }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: izSpin 0.7s linear infinite;
}
@keyframes izSpin { to { transform: rotate(360deg); } }

/* ---------- Contact + footer ---------- */
.contact-item, .contact-card { transition: transform 0.3s var(--iz-ease); }
.contact-item:hover, .contact-card:hover { transform: translateX(4px); }
.site-footer a { transition: color 0.25s ease, transform 0.25s var(--iz-ease); }
.site-footer a:hover { transform: translateX(3px); }
.site-footer .social a, .footer-social a { display: inline-flex; transition: transform 0.3s var(--iz-ease), opacity 0.3s ease; }
.site-footer .social a:hover, .footer-social a:hover { transform: translateY(-3px) scale(1.12); }

/* ---------- Back to top ---------- */
#izTop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(201, 162, 39, 0.65); background: rgba(15, 15, 15, 0.85);
  color: #c9a227; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s var(--iz-ease), visibility 0.3s;
}
#izTop.on { opacity: 1; visibility: visible; transform: none; }
#izTop:hover { box-shadow: var(--iz-gold-glow); }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html.iz-js .iz-reveal, html.iz-js .iz-zoom { opacity: 1 !important; transform: none !important; }
}

/* ---------- Mobile header fit (longer FR labels must not overflow) ---------- */
@media (max-width: 640px) {
  .site-header .brand small,
  .site-header .brand .tagline,
  .site-header .brand span:last-child:not(:first-child) { display: none; }
  .site-header .nav-right .btn { display: none; }
  .site-header .lang { flex: 0 0 auto; }
  .site-header nav, .site-header .nav-inner { flex-wrap: nowrap; gap: 10px; }
}