/* ==========================================================================
   IIFIS Transitions — transitions.dev Custom Stylesheet
   ========================================================================== */

/* ── 05. Menu Dropdown ── */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

/* Mega menu specific overrides to preserve centering/alignments */
.mega-menu.t-dropdown {
  transform: translateX(-50%) translateY(10px) scale(var(--dropdown-pre-scale));
  visibility: visible; /* Let opacity/pointer-events control open state */
}
.mega-menu.t-dropdown.is-open {
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega-menu.t-dropdown.is-closing {
  transform: translateX(-50%) translateY(0) scale(var(--dropdown-closing-scale));
}

/* Right-aligned mega-menus override */
.nav-item:last-child .mega-menu.t-dropdown,
.nav-item:nth-last-child(2) .mega-menu.t-dropdown,
.nav-item:nth-last-child(3) .mega-menu.t-dropdown {
  transform: translateY(10px) scale(var(--dropdown-pre-scale));
}
.nav-item:last-child .mega-menu.t-dropdown.is-open,
.nav-item:nth-last-child(2) .mega-menu.t-dropdown.is-open,
.nav-item:nth-last-child(3) .mega-menu.t-dropdown.is-open {
  transform: translateY(0) scale(1);
}
.nav-item:last-child .mega-menu.t-dropdown.is-closing,
.nav-item:nth-last-child(2) .mega-menu.t-dropdown.is-closing,
.nav-item:nth-last-child(3) .mega-menu.t-dropdown.is-closing {
  transform: translateY(0) scale(var(--dropdown-closing-scale));
}

/* ── 17. Tooltip ── */
.t-tt-wrap {
  position: relative;
  display: inline-block;
}
.t-tt {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 0) scale(var(--tt-scale));
  transform-origin: 50% 100%;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--tt-bg);
  color: var(--tt-fg);
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.05),
    0 4px 42px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition:
    opacity   var(--tt-out-dur) var(--tt-out-ease),
    transform var(--tt-out-dur) var(--tt-out-ease);
}
.t-tt-wrap:hover .t-tt,
.t-tt-trigger:focus-visible + .t-tt {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-duration: var(--tt-in-dur);
  transition-timing-function: var(--tt-in-ease);
  transition-delay: var(--tt-delay);
}

/* ── 02. Number Pop-in ── */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

/* ── 06. Modal Open / Close ── */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

/* ── 10. Success Check ── */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path,
.t-success-check svg polyline {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path,
.t-success-check[data-state="in"] svg polyline {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* ── 18. Texts Reveal ── */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

/* ── Accessibility guard ── */
@media (prefers-reduced-motion: reduce) {
  .t-dropdown,
  .t-tt,
  .t-digit-group .t-digit,
  .t-modal,
  .t-success-check,
  .t-success-check svg path,
  .t-success-check svg polyline,
  .t-stagger-line {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
  }
}