/* 4ONE-026. Native motion tokens; layout and business logic stay in their components. */
:root {
  --accent:#b7a3ff;
  --motion-fast:160ms;
  --motion-normal:280ms;
  --motion-enter:560ms;
  --motion-ambient:12s;
  --motion-ease:cubic-bezier(.2,.75,.25,1);
  --motion-distance:16px;
  --motion-scale:1.025;
  --motion-stagger:70ms;
  --motion-alpha:.55;
  --speed:var(--motion-normal);
  --ease:var(--motion-ease);
}
:focus-visible { outline-color:var(--accent) }
::selection { background:var(--accent);color:#111019 }
.primary,.skip { background:var(--accent);color:#111019 }
.primary:hover { background:#d0c2ff;box-shadow:0 8px 28px #8462d329 }
.secondary:hover,.nav-cta:hover { border-color:#ad91ef;background:#272234 }
.nav-cta { background:#292335;border-color:#5f497b;color:#e5d7ff }
.status-dot { background:#b69aff;box-shadow:0 0 14px #9c70ff66 }
.gradient-text { background:linear-gradient(110deg,#8fa5ff,#c19bff 55%,#ed9bd8);background-clip:text;color:#c3a3ff;-webkit-text-fill-color:transparent }
.header { background:#09090df5;isolation:isolate }
.header::before { content:'';position:absolute;inset:0;background:#09090df2;border-bottom:1px solid #ffffff10;z-index:-1;transform-origin:top;transition:transform var(--motion-normal) var(--motion-ease) }
.header-inner { transition:transform var(--motion-normal) var(--motion-ease) }
.header.scrolled { background:transparent;box-shadow:none }
.header.scrolled::before { transform:scaleY(.88);backdrop-filter:blur(16px) }
.header.scrolled .header-inner { transform:translateY(-4px) }
#navigation>a:not(.button) { position:relative }
#navigation>a:not(.button)::after { content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-normal) var(--motion-ease) }
#navigation>a:hover::after,#navigation>a:focus-visible::after { transform:scaleX(1) }
.button>span { transition:transform var(--motion-fast) var(--motion-ease) }
.button:hover>span,.button:focus-visible>span { transform:translate(2px,-2px) }
input,select,textarea { transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background var(--motion-fast) }
input:focus-visible,select:focus-visible,textarea:focus-visible { box-shadow:0 0 0 3px #b7a3ff18 }
input:user-invalid,textarea:user-invalid { border-color:#e7a9a9 }
input:checked { accent-color:var(--accent) }
.event-type-choices button,.client-caipi-fruits label,.client-caipi-spirits label { transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast) }
.event-type-choices button[aria-pressed=true],.client-caipi-fruits label:has(:checked),.client-caipi-spirits label:has(:checked) { box-shadow:inset 0 0 0 1px #b7a3ff65 }
.home .ticker { background:#181320;border-block:1px solid #6f518f55 }
.home .ticker-track span { color:#d6c7ed }
.home .ticker-icon { filter:invert(1);opacity:.75 }
.home .catalog-home-offers a { border-color:#a887d666;background:#1a1524b8;color:#e3d4ff }
.home .catalog-home-offers a:hover { background:#30223f }
.home .hero-actions .button { animation:motion-action var(--motion-enter) var(--motion-ease) backwards }
.home .hero-actions .button:nth-child(2) { animation-delay:var(--motion-stagger) }
.home .hero .hero-copy>* { animation-name:motion-copy;animation-duration:var(--motion-enter) }
.home .hero .hero-art { animation:motion-photo var(--motion-enter) var(--motion-ease) backwards }
.home .hero .hero-photo::after { background:linear-gradient(0deg,#090a0d70,transparent 50%) }
.hero-copy::after { content:'';position:absolute;z-index:-1;inset:10% -15%;border-radius:50%;background:radial-gradient(ellipse,#6735a52b,transparent 65%);pointer-events:none;animation:motion-light var(--motion-ambient) ease-in-out infinite alternate }
.hero-copy { isolation:isolate }
.home .final-cta { display:grid;grid-template-columns:1.1fr .9fr;gap:12px 40px;border-color:#7f58b04d;background:radial-gradient(at 25% 80%,#3c225e70,transparent 65%),var(--panel) }
.final-cta>.eyebrow,.final-cta>h2,.final-cta>.button { grid-column:1 }
.final-cta>.button { justify-self:start }
.final-cta-photo { grid-column:2;grid-row:1/4;align-self:stretch;width:100%;height:100%;min-height:240px;max-height:380px;object-fit:cover;border-radius:14px }
.final-cta .cta-orbit { opacity:.3;pointer-events:none;animation:motion-light var(--motion-ambient) ease-in-out infinite alternate }
.motion-ready .reveal { transition-duration:var(--motion-enter);transition-timing-function:var(--motion-ease) }
.motion-ready .reveal:not(.visible) { transform:translateY(var(--motion-distance)) }
.motion-ready .reveal:focus-within { opacity:1;transform:none;transition:none }
.gallery-link { position:relative;display:block;overflow:hidden;border-radius:inherit }
.gallery-link img { transition:transform var(--motion-enter) var(--motion-ease) }
.gallery-link::after { content:'Ampliar ↗';position:absolute;right:18px;bottom:18px;padding:12px 16px;background:#111019dd;border:1px solid #d2baff66;border-radius:40px;color:#fff;font-size:12px;pointer-events:none;transition:background var(--motion-fast) }
.gallery-link:hover,.gallery-link:focus-visible { box-shadow:0 0 0 1px #ba9ce880,0 15px 50px #7948ba20 }
.gallery-link:hover img { transform:scale(var(--motion-scale)) }
.gallery-dialog { width:min(1100px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:18px;border:1px solid #8b6fa4;border-radius:20px;background:#121016;color:var(--text);overflow:auto;overscroll-behavior:contain }
.gallery-dialog::backdrop { background:#05030ceb;backdrop-filter:blur(8px) }
.gallery-toolbar { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px }
.gallery-toolbar button,.gallery-controls button { min-height:44px;min-width:44px }
.gallery-dialog figure { margin:0;touch-action:pan-y }
.gallery-dialog img { width:100%;height:min(68dvh,760px);object-fit:contain }
.gallery-dialog figcaption { color:#c7c0d2;font-size:13px;padding:16px 4px;line-height:1.6 }
.gallery-controls { display:flex;align-items:center;justify-content:space-between;gap:12px }
.planner-progress { position:relative;inset:auto;display:flex;flex-direction:row;gap:8px;align-items:center;padding:12px;border:1px solid #483958;background:#15111d;border-radius:14px;margin-bottom:28px;max-height:none;overflow:visible }
.catalog-ingredients>.gallery-link { align-self:center }
.catalog-ingredients>.gallery-link img { width:100%;height:auto;border-radius:16px }
.planner-progress a { flex:1;padding:12px;border-radius:8px;font-size:12px;color:#b4a8c4;transition:background var(--motion-normal),color var(--motion-normal) }
.planner-progress a[aria-current=step] { background:#b7a3ff;color:#16101e }
.planner-progress a[data-complete=true]::after { content:' ✓';display:inline-block;animation:motion-check var(--motion-normal) var(--motion-ease) }
.planner-stage { scroll-margin-top:100px }
.document-progress { display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 16px;color:#cfc1e5;font-size:12px }
.document-progress[hidden] { display:none }
.document-progress::before { content:'';width:18px;height:18px;flex-shrink:0;border:2px solid #68517d;border-top-color:#d4c3ff;border-radius:50%;animation:motion-spin 1s linear infinite }
.is-document-busy { cursor:progress }
.is-document-busy #event-menu-preview { opacity:.7;transition:opacity var(--motion-fast) }
#planner-errors:not(:empty) { padding:14px;border:1px solid #bd7b62;border-radius:8px;background:#39211a;color:#f6c6b5 }
#menu-status:not(:empty),#event-vintage-status:not(:empty) { border-left:2px solid #a888d9;padding-left:12px;color:#d4c3eb }
.testimonial-track { display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth }
.testimonial-track>article { flex:0 0 min(85%,520px);scroll-snap-align:start;padding:32px;border:1px solid #594269;border-radius:var(--radius);background:var(--panel) }
.testimonial-controls { display:flex;align-items:center;gap:12px;margin-top:20px }
.testimonial-controls button { min-height:44px }
@supports (transition-behavior:allow-discrete) {
  #menu-caipi-options,.barback-proposal { opacity:1;transform:none;transition:opacity var(--motion-normal),transform var(--motion-normal) var(--motion-ease),display var(--motion-normal) allow-discrete }
  #menu-caipi-options[hidden],.barback-proposal[hidden] { display:none;opacity:0;transform:translateY(8px) }
  @starting-style { #menu-caipi-options:not([hidden]),.barback-proposal:not([hidden]) { opacity:0;transform:translateY(8px) } }
}
@supports (animation-timeline:view()) {
  .final-cta .cta-orbit { animation:motion-parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100% }
}
/* Observed in the supplied mobile recording: the preceding card recedes as the next enters. */
@supports (timeline-scope:--fourone-panel-2) and (animation-timeline:view()) {
  .experience-panels { timeline-scope:--fourone-panel-2,--fourone-panel-3,--fourone-panel-4 }
  .experience-panel-2 { view-timeline:--fourone-panel-2 block }
  .experience-panel-3 { view-timeline:--fourone-panel-3 block }
  .experience-panel-4 { view-timeline:--fourone-panel-4 block }
  .experience-stack.is-stackable .experience-panel:where(:not(:last-child)) { transform-origin:center top;animation:motion-stack-depth linear both;animation-range:entry 0% entry 100% }
  .experience-stack.is-stackable .experience-panel-1 { animation-timeline:--fourone-panel-2 }
  .experience-stack.is-stackable .experience-panel-2 { animation-timeline:--fourone-panel-3 }
  .experience-stack.is-stackable .experience-panel-3 { animation-timeline:--fourone-panel-4 }
  .experience-stack:has(:focus-visible) .experience-panel { animation:none;transform:none }
}
@media(min-width:851px) {
  .home .hero.wrap { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:44px clamp(24px,4vw,64px);min-height:clamp(660px,calc(100svh - 76px),850px);background:#090a0d }
  .home .hero .hero-art { position:relative;inset:auto;grid-column:1;grid-row:1;width:100%;height:clamp(540px,67vh,720px);border-radius:22px;overflow:hidden }
  .home .hero .hero-copy { grid-column:2;grid-row:1;padding:24px 0;width:auto;min-width:0 }
  .home .hero .hero-copy h1 { font-size:clamp(42px,4.3vw,70px) }
  .home .hero .hero-cover-image { object-position:70% center;mask-image:none;max-width:none;width:100% }
  .home .hero-copy p { font-size:15px }
}
@media(max-width:850px) {
  .header.scrolled .header-inner { transform:translateY(-3px) }
  html.nav-ready #navigation { display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--motion-normal),transform var(--motion-normal) var(--motion-ease),visibility var(--motion-normal) }
  html.nav-ready #navigation.open { visibility:visible;opacity:1;transform:none;pointer-events:auto;animation:none }
  html:not(.nav-ready) #navigation { display:flex;position:static;flex-wrap:wrap;max-height:none;padding:12px }
  html:not(.nav-ready) .header { height:auto;position:relative }
  html:not(.nav-ready) .header-inner { flex-wrap:wrap }
  html:not(.nav-ready) .menu-toggle { display:none }
  .home .hero .hero-photo::after { background:linear-gradient(0deg,#090a0df2,#090a0d99 55%,#090a0d40) }
  .home .final-cta { grid-template-columns:1fr }
  .final-cta-photo { grid-column:1;grid-row:4;height:220px;min-height:0 }
}
@media(max-width:430px) {
  .planner-progress { gap:4px;padding:6px }
  .planner-progress a { font-size:11px;padding:12px 8px }
  .gallery-dialog { padding:12px }
  .home .hero .hero-copy { padding-top:55px }
}
@media(hover:hover) and (pointer:fine) {
  .hero-actions .primary { translate:var(--magnetic-x,0) var(--magnetic-y,0);transition:translate var(--motion-fast) var(--motion-ease),background var(--motion-fast),box-shadow var(--motion-fast) }
}
@keyframes motion-action { from { opacity:var(--motion-alpha);transform:translateY(8px) } }
@keyframes motion-copy { from { opacity:.75;transform:translateY(12px) } }
@keyframes motion-photo { from { transform:scale(.985) } }
@keyframes motion-light { to { transform:translate(12px,-10px) scale(1.04);opacity:.65 } }
@keyframes motion-spin { to { transform:rotate(360deg) } }
@keyframes motion-check { from { opacity:0;transform:translateY(3px) scale(.8) } }
@keyframes motion-parallax { from { transform:translateY(12px) rotateX(40deg) rotate(-30deg) } to { transform:translateY(-12px) rotateX(40deg) rotate(-30deg) } }
@keyframes motion-stack-depth { from { transform:scale(1) } to { transform:scale(.965) } }
/* Pausing is also a complete motion fallback, including animations started by JS. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
.motion-paused .hero-actions .primary { translate:none }
.motion-paused .experience-panel { transform:none!important }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
  .hero-actions .primary { translate:none }
  .testimonial-track { scroll-behavior:auto }
}