/* Waypoints: GM Selent/Bemavi/Itwheel. Curva West e entradas escalonadas. */
:root { --ease-reveal: cubic-bezier(.38,0,.02,1); --time-reveal: 1.15s; }
.motion-ready .waypoint:not(.animated) { opacity: 0; }
.motion-ready .waypoint.animated:not(.reveal-complete) {
    animation: charlots-fade-bottom var(--time-reveal) var(--ease-reveal) var(--reveal-delay,0ms) both;
}
.motion-ready .waypoint.animation_scale.animated:not(.reveal-complete) { animation-name: charlots-fade-scale; }
.motion-ready .waypoint.animation_left.animated:not(.reveal-complete) { animation-name: charlots-fade-left; }
.waypoint.reveal-complete { opacity: 1; }
@keyframes charlots-fade-bottom { from { opacity: 0; transform: translate3d(0,36px,0); } to { opacity: 1; transform: none; } }
@keyframes charlots-fade-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes charlots-fade-left { from { opacity: 0; transform: translate3d(-28px,0,0); } to { opacity: 1; transform: none; } }

/* O indicador usa a duração longa das transições dos projetos de referência. */
.desktop-nav.has-indicator { position: relative; isolation: isolate; background: #eae9e7; }
.desktop-nav.has-indicator a { position: relative; z-index: 1; background: transparent; color: #fff; mix-blend-mode: difference; transition: none; }
.desktop-nav.has-indicator a.is-indicator-target { color: #fff; }
.nav-indicator {
    position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
    border-radius: inherit; background: #1f1f1f; pointer-events: none;
    transition: transform 1s var(--ease-reveal), width 1s var(--ease-reveal), opacity .3s;
}
.nav-indicator.is-positioning { transition: none; }

/* Rótulo que rola: base dos botões do Itwheel, sem duplicar o nome acessível. */
.btn.has-motion {
    position: relative; isolation: isolate; overflow: hidden;
    transition: color .45s, border-color .45s, box-shadow .55s var(--ease-reveal), transform .55s var(--ease-reveal);
}
.btn.has-motion::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
    background: #080808; transform: translate3d(0,102%,0);
    transition: transform .65s var(--ease-reveal);
}
.btn-light.has-motion::before { background: #fff; }
.btn-outline-light.has-motion::before { background: #ffffff24; }
.button-content, .button-echo { display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .65s var(--ease-reveal), opacity .4s; }
.button-echo { position: absolute; inset: 0; padding: inherit; transform: translate3d(0,130%,0); opacity: 0; pointer-events: none; }
.btn.has-motion:focus-visible::before { transform: translate3d(0,0,0); }
.btn.has-motion:focus-visible .button-content { transform: translate3d(0,-180%,0); opacity: 0; }
.btn.has-motion:focus-visible .button-echo { transform: translate3d(0,0,0); opacity: 1; }
.btn-outline.has-motion:focus-visible { color: #fff; border-color: #1f1f1f; }
.btn.has-motion:active { transform: translateY(1px); }
.btn.has-motion:disabled { opacity: .6; cursor: wait; }

.product-card, .line-card { transition: transform .8s var(--ease-reveal), box-shadow .8s var(--ease-reveal); }
.product-photo img, .line-photo img, .detail-photo img { transition: transform 1.25s var(--ease-reveal), filter .9s ease; }
.line-photo { overflow: hidden; }
.product-photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg,transparent 25%,#ffffff38 45%,transparent 65%);
    transform: translate3d(-110%,0,0); transition: transform 1.2s var(--ease-reveal);
}
.product-tag { transition: background .6s, transform .8s var(--ease-reveal); }
.text-link { text-underline-offset: 6px; text-decoration-color: transparent; transition: color .35s, text-decoration-color .4s; }
.text-link i { transition: transform .6s var(--ease-reveal); }
.product-card:focus-visible, .line-card:focus-visible { transform: translateY(-7px); box-shadow: 0 22px 44px #1f1f1f20; }
.product-card:focus-visible img, .line-card:focus-visible img { transform: scale(1.055); }
.product-card:focus-visible .text-link i, .line-card:focus-visible .text-link i { transform: translate(4px,-3px); }
.footer-links>a { width: fit-content; text-underline-offset: 5px; text-decoration: underline; text-decoration-color: transparent; transition: color .35s, text-decoration-color .35s; }
.footer-links>a:focus-visible { text-decoration-color: currentColor; }
.icon-btn { transition: background .4s, color .4s, transform .5s var(--ease-reveal); }
.hero-track { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.48,.17,.28,1); }
.hero-dots button { transition: width .75s var(--ease-reveal); }
.hero-slide .hero-copy > * { transition: opacity .75s ease, transform 1.1s var(--ease-reveal); }
.hero-slide[aria-hidden=true] .hero-copy > * { opacity: 0; transform: translate3d(35px,0,0); }
.hero-slide:not([aria-hidden=true]) .hero-copy > :nth-child(2) { transition-delay: .1s; }
.hero-slide:not([aria-hidden=true]) .hero-copy > :nth-child(3) { transition-delay: .18s; }
.hero-slide:not([aria-hidden=true]) .hero-copy > :nth-child(4) { transition-delay: .26s; }

@media (hover:hover) and (pointer:fine) {
    .btn-dark.has-motion:hover { background: linear-gradient(135deg,#1f1f1f,#454545); }
    .btn-light.has-motion:hover { background: #f6f5f3; }
    .btn-outline.has-motion:hover, .btn-outline-light.has-motion:hover { background: transparent; }
    .btn.has-motion:hover { transform: translateY(-2px); box-shadow: 0 12px 25px #1f1f1f22; }
    .btn.has-motion:hover::before { transform: translate3d(0,0,0); }
    .btn.has-motion:hover .button-content { transform: translate3d(0,-180%,0); opacity: 0; }
    .btn.has-motion:hover .button-echo { transform: translate3d(0,0,0); opacity: 1; }
    .btn-outline.has-motion:hover { border-color: #1f1f1f; }
    .product-card:hover, .line-card:hover { transform: translateY(-7px); box-shadow: 0 22px 44px #1f1f1f20; }
    .product-card:hover img, .line-card:hover img { transform: scale(1.055) rotate(-.4deg); }
    .product-card:hover .product-photo::after { transform: translate3d(110%,0,0); }
    .product-card:hover .product-tag { background: #fff; transform: translateY(2px); }
    .product-card:hover .text-link i, .line-card:hover .text-link i { transform: translate(4px,-3px); }
    .text-link:hover { text-decoration: underline; text-decoration-color: currentColor; }
    .text-link:hover i { transform: translateX(4px); }
    .footer-links>a:hover { text-decoration-color: currentColor; }
    .icon-btn:hover { transform: scale(1.08); }
}
@keyframes charlots-menu-open { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@media (max-width: 999px) {
    .mobile-nav:not([hidden]) { animation: charlots-menu-open .6s var(--ease-reveal) both; }
}
@media (max-width: 1024px) {
    :root { --time-reveal: .85s; }
    @keyframes charlots-fade-bottom { from { opacity: 0; transform: translate3d(0,22px,0); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .motion-ready .waypoint, .motion-ready .waypoint.animated:not(.reveal-complete) { opacity: 1; animation: none; transform: none; }
    .btn.has-motion .button-content { transform: none; opacity: 1; }
    .btn.has-motion .button-echo { display: none; }
    .product-card:hover, .line-card:hover, .btn.has-motion:hover, .icon-btn:hover,
    .product-card:focus-visible, .line-card:focus-visible { transform: none; }
    .product-card img, .line-card img, .text-link i { transform: none !important; }
}
@media print { .motion-ready .waypoint { opacity: 1 !important; animation: none !important; transform: none !important; } }
