/* =====================================================================
   SKRUZMANIS MARKETING LLC — Motion & media refinements
   ===================================================================== */

/* ---------------------------------------------------------------
   1. ROUNDED MEDIA
   Elementor ships `.elementor img { border-radius: 0 }`, which beats
   Tailwind's single-class utilities on specificity and squares off
   every photo. These rules restore the intended soft corners.
   --------------------------------------------------------------- */
.elementor img.feature-photo,
img.feature-photo {
    border-radius: 28px;
    overflow: hidden;
}

.elementor img.card-img,
img.card-img { border-radius: 0; }

.card-img-wrapper { border-radius: 22px 22px 0 0; overflow: hidden; }
.brand-card       { border-radius: 22px; }

.elementor img.brand-logo,
img.brand-logo { border-radius: 0; }

.about-deco { border-radius: 2rem; }

/* ---------------------------------------------------------------
   2. SCROLL BEHAVIOUR
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; }
section[id], div[id]   { scroll-margin-top: 110px; }

/* Thin progress indicator pinned above the navigation bar */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, #d69894, #c07f7a);
    z-index: 10000; transition: width .12s linear; pointer-events: none;
}

/* ---------------------------------------------------------------
   3. REVEAL ON SCROLL
   --------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 1s cubic-bezier(.22,.61,.36,1),
                transform 1s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: none; }

[data-anim] {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition: opacity .95s cubic-bezier(.22,.61,.36,1),
                transform .95s cubic-bezier(.22,.61,.36,1),
                filter .95s ease;
}
[data-anim="up"]    { transform: translateY(40px); }
[data-anim="down"]  { transform: translateY(-30px); }
[data-anim="left"]  { transform: translateX(-46px); }
[data-anim="right"] { transform: translateX(46px); }
[data-anim="zoom"]  { transform: scale(.93); }
[data-anim="blur"]  { transform: translateY(22px); filter: blur(9px); }
[data-anim].in      { opacity: 1; transform: none; filter: none; }

/* Ken Burns settle: photos ease out of a slight zoom as they appear */
.feature-photo {
    transform: scale(1.07);
    transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.reveal.active .feature-photo,
[data-anim].in .feature-photo,
[data-anim].in.feature-photo { transform: scale(1); }

/* Rose accent rules draw themselves in */
.accent-line { width: 0 !important; transition: width 1s cubic-bezier(.22,.61,.36,1) .25s; }
.reveal.active .accent-line,
[data-anim].in .accent-line { width: 2.5rem !important; }

/* ---------------------------------------------------------------
   4. HERO ENTRANCE
   --------------------------------------------------------------- */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(42px); }
    to   { opacity: 1; transform: none; }
}
.hero-stagger > * {
    opacity: 0;
    animation: heroRise 1.05s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-stagger > *:nth-child(1) { animation-delay: .12s; }
.hero-stagger > *:nth-child(2) { animation-delay: .26s; }
.hero-stagger > *:nth-child(3) { animation-delay: .40s; }
.hero-stagger > *:nth-child(4) { animation-delay: .54s; }
.hero-stagger > *:nth-child(5) { animation-delay: .68s; }

/* The hero backdrop drifts almost imperceptibly */
@keyframes heroDrift {
    from { background-position: center 48%; }
    to   { background-position: center 52%; }
}
.hero-bg { animation: heroDrift 18s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------
   5. NAVIGATION
   --------------------------------------------------------------- */
.custom-nav {
    transition: height .4s cubic-bezier(.22,.61,.36,1),
                box-shadow .4s ease,
                background-color .4s ease;
}
.custom-nav.scrolled {
    height: 72px;
    background-color: rgba(255,255,255,.98);
    box-shadow: 0 12px 34px -16px rgba(28,25,24,.22);
}
.brand-logo {
    transition: height .4s cubic-bezier(.22,.61,.36,1),
                transform .45s cubic-bezier(.22,.61,.36,1),
                opacity .35s ease;
}
.custom-nav.scrolled .brand-logo { height: 33px !important; }
.nav-content > a:hover .brand-logo { transform: scale(1.045); }

.nav-links a:not(.btn-primary) { position: relative; }
.nav-links a:not(.btn-primary)::after {
    content: ""; position: absolute; left: 0; bottom: -7px;
    height: 1.5px; width: 0; background: #d69894;
    transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:not(.btn-primary):hover::after { width: 100%; }

/* Mobile drawer slides rather than snapping */
#mobileMenu {
    transform-origin: top;
    animation: drawerDrop .35s cubic-bezier(.22,.61,.36,1);
}
#mobileMenu.hidden { display: none; }
@keyframes drawerDrop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}
.mobile-menu-btn i { transition: transform .35s ease; }
.mobile-menu-btn.open i { transform: rotate(90deg); }

/* ---------------------------------------------------------------
   5b. NAV ALIGNMENT FIX
   `.nav-links` was a plain block, so its anchors were inline boxes sat
   on a shared text baseline. The Contact Us button is an inline-block
   56px tall, so it defined that baseline and pushed the three text
   links ~17px below the logo. Flex + align-items:center puts every
   item on the same optical centre line.
   --------------------------------------------------------------- */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.nav-links a:not(.btn-primary) { line-height: 1.1; display: inline-flex; align-items: center; }
.nav-links a::after { bottom: -6px; }

/* Between 1025px and 1240px the logo and the four links only just fit,
   so tighten the type and the spacing rather than let them collide. */
 (min-width: 1025px) and (max-width: 1240px) {
    .nav-links a            { margin-left: 24px; font-size: .8rem; letter-spacing: .6px; }
    .nav-links a.btn-primary { margin-left: 26px !important; padding: 12px 26px; }
    .custom-nav .brand-logo  { height: 34px !important; }
    .custom-nav.scrolled .brand-logo { height: 30px !important; }
}

/* ---------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------- */
.btn-primary { position: relative; overflow: hidden; z-index: 0; }
.btn-primary::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #d69894;
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:hover { color: #fff !important; border-color: #d69894 !important; }

/* ---------------------------------------------------------------
   7. CARDS
   --------------------------------------------------------------- */
.brand-card { position: relative; }
.brand-card::after {
    content: ""; position: absolute; top: 0; left: -80%;
    width: 55%; height: 100%; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg);
}
.brand-card:hover::after { animation: cardShine 1.15s ease forwards; }
@keyframes cardShine {
    from { left: -80%; opacity: 1; }
    to   { left: 140%;  opacity: 1; }
}

/* Feature checklist items lift on hover */
.lift-item { transition: transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease; }
.lift-item:hover { transform: translateX(8px); }

/* Metric tiles */
.metric-tile { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.metric-tile:hover { transform: translateY(-8px); }
.metric-tile i { transition: transform .45s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.metric-tile:hover i { transform: translateY(-4px) scale(1.12); }

/* Logistics feature boxes */
.hover-lift { transition: transform .4s cubic-bezier(.22,.61,.36,1), background-color .4s ease; }
.hover-lift:hover { transform: translateY(-6px); }

/* ---------------------------------------------------------------
   8. FORMS & FOOTER
   --------------------------------------------------------------- */
input, textarea, button { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(214,152,148,.22); }

footer a { transition: color .3s ease, opacity .3s ease; }
footer img { transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease; }
footer img:hover { transform: scale(1.04); opacity: 1 !important; }

/* ---------------------------------------------------------------
   9. LEGAL PAGES
   --------------------------------------------------------------- */
.legal-toc a.current { color: #d69894; font-weight: 700; }
.legal-body section { opacity: 0; transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.legal-body section.in { opacity: 1; transform: none; }
.entity-card { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; }
.entity-card:hover { transform: translateY(-5px); box-shadow: 0 26px 48px -22px rgba(28,25,24,.55); }
.table-scroll, .legal-toc { border-radius: 16px; }

/* ---------------------------------------------------------------
   10. ACCESSIBILITY
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal, [data-anim], .legal-body section, .hero-stagger > * {
        opacity: 1 !important; transform: none !important; filter: none !important;
    }
}