/*
 * Kalimera motion foundation
 *
 * This file owns shared timing, easing, elevation and layer tokens. Component
 * styles should consume these values instead of inventing one-off durations or
 * z-index numbers. The utilities are intentionally opt-in so loading this file
 * cannot change existing behavior before a component is migrated.
 */
:root {
  color-scheme: light;

  --motion-duration-instant: 0ms;
  --motion-duration-fast: 140ms;
  --motion-duration-feedback: 210ms;
  --motion-duration-menu: 280ms;
  --motion-duration-menu-close: 170ms;
  --motion-duration-surface: 360ms;
  --motion-duration-sheet: 420ms;
  --motion-duration-slow: 520ms;

  --motion-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-ease-spring: cubic-bezier(.2, .9, .25, 1.08);

  --motion-distance-press: 1px;
  --motion-distance-hover: 4px;
  --motion-distance-enter: 18px;
  --motion-distance-sheet: 48px;

  --motion-opacity-disabled: .52;
  --motion-opacity-muted: .72;
  --motion-opacity-backdrop: .48;
  --motion-blur-control: 10px;
  --motion-blur-menu: 12px;
  --motion-blur-media: 7px;
  --motion-blur-overlay: 14px;

  --motion-shadow-1: 0 4px 14px rgba(10, 28, 37, .08);
  --motion-shadow-2: 0 14px 34px rgba(10, 28, 37, .13);
  --motion-shadow-3: 0 22px 52px rgba(10, 28, 37, .18);
  --motion-shadow-overlay: 0 28px 80px rgba(10, 28, 37, .28);

  /* Preserve the current production stacking order while giving future
     components named layers instead of arbitrary integers. */
  --layer-content: 0;
  --layer-raised: 10;
  --layer-floating: 1180;
  --layer-sticky: 1200;
  --layer-menu: 1210;
  --layer-menu-panel: 1211;
  --layer-notification-panel: 1300;
  --layer-popover: 1400;
  --layer-overlay: 2000;
  --layer-overlay-control: 2002;
  --layer-toast: 4000;
  --layer-critical: 10050;
  --overlay-scrollbar-compensation: 0px;
  --overlay-viewport-height: 100dvh;
}

html[data-overlay-open="true"],
body.kalimera-overlay-locked {
  overscroll-behavior: none;
}

[data-overlay-managed] {
  --overlay-state: 0;
}

[data-overlay-managed][data-overlay-state="opening"],
[data-overlay-managed][data-overlay-state="open"],
[data-overlay-managed][data-overlay-state="submitting"],
[data-overlay-managed][data-overlay-state="success"],
[data-overlay-managed][data-overlay-state="error"] {
  --overlay-state: 1;
}

[data-overlay-managed][data-overlay-state="submitting"] {
  cursor: progress;
}

.kalimera-global-action-status {
  position:fixed;
  z-index:var(--layer-toast);
  inset-inline:16px;
  inset-block-end:max(86px, calc(env(safe-area-inset-bottom) + 72px));
  width:fit-content;
  max-width:min(440px, calc(100vw - 32px));
  margin-inline:auto;
  padding:11px 16px;
  border:1px solid rgba(10,28,37,.16);
  border-radius:12px;
  background:#fffdf9;
  color:#0a1c25;
  box-shadow:var(--motion-shadow-2);
  font:700 15px/1.35 Assistant,Arial,sans-serif;
  text-align:start;
  animation:kalimera-motion-enter var(--motion-duration-surface) var(--motion-ease-enter) both;
  pointer-events:none;
}
.kalimera-global-action-status[data-tone="success"] { border-color:rgba(47,107,86,.35); }
.kalimera-global-action-status[data-tone="error"] { border-color:rgba(154,64,51,.4); }
.kalimera-global-action-status.is-leaving{opacity:0;transform:translate3d(0,-6px,0);transition:opacity var(--motion-duration-menu-close) var(--motion-ease-exit),transform var(--motion-duration-menu-close) var(--motion-ease-exit)}
[data-action-pending="true"] { cursor:progress; }

/* Responsive overlay anatomy. Keep the content contract identical while its
   presentation changes from a centered dialog to an app-like mobile sheet. */
.kalimera-responsive-overlay {
  position:fixed;
  inset:0;
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(var(--overlay-viewport-height) - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  overflow: visible;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-enter), 0) scale(.97);
  transition:
    opacity var(--motion-duration-surface) var(--motion-ease-standard),
    transform var(--motion-duration-surface) var(--motion-ease-enter);
}

.kalimera-responsive-overlay::backdrop {
  background: rgba(10, 28, 37, var(--motion-opacity-backdrop));
  backdrop-filter: blur(var(--motion-blur-overlay));
  opacity: 0;
  transition: opacity var(--motion-duration-surface) var(--motion-ease-standard);
}

.kalimera-responsive-overlay[data-overlay-state="open"],
.kalimera-responsive-overlay[data-overlay-state="submitting"],
.kalimera-responsive-overlay[data-overlay-state="success"],
.kalimera-responsive-overlay[data-overlay-state="error"] {
  opacity: 1;
  transform: translate3d(0, var(--overlay-drag-y, 0), 0) scale(1);
}

.kalimera-responsive-overlay[data-overlay-state="open"]::backdrop,
.kalimera-responsive-overlay[data-overlay-state="submitting"]::backdrop,
.kalimera-responsive-overlay[data-overlay-state="success"]::backdrop,
.kalimera-responsive-overlay[data-overlay-state="error"]::backdrop {
  opacity: 1;
}

.kalimera-overlay-surface {
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  max-height:inherit;
  border:1px solid rgba(10, 28, 37, .14);
  border-radius:inherit;
  background:#fffdf9;
  box-shadow:var(--motion-shadow-overlay);
  overflow:hidden;
}

.kalimera-overlay-surface::before {
  content:"";
  position:absolute;
  z-index:2;
  inset-block-start:0;
  inset-inline:0;
  height:4px;
  background:linear-gradient(90deg,#d97945 0 36%,#e9b964 36% 62%,#246b8a 62% 100%);
  pointer-events:none;
}

.kalimera-overlay-header,
.kalimera-overlay-footer {
  position:relative;
  z-index:1;
  padding:16px 20px;
  background:rgba(255, 253, 249, .96);
}

.kalimera-overlay-header { border-block-end:1px solid rgba(10, 28, 37, .1); }
.kalimera-overlay-footer { border-block-start:1px solid rgba(10, 28, 37, .1); }
.kalimera-overlay-body {
  min-height:0;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  overscroll-behavior-block:contain;
  scrollbar-gutter:stable;
  touch-action:pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
}
.kalimera-overlay-body input[type="range"] { touch-action:pan-y; }
.kalimera-overlay-body :is([data-profile-crop-stage],.profile-avatar-crop-stage,[data-crop-stage]) { touch-action:none; }
.kalimera-overlay-body :is(.profile-analytics-chart,[data-chart-interactive]) { touch-action:pan-y pinch-zoom; }
.kalimera-overlay-body :is([data-horizontal-scroll],.machine-picker,.taste-picker,.guide-level-picker,.qa-filters,.deals-filters) {
  touch-action:pan-x pan-y;
  overscroll-behavior-inline:contain;
}
#lightbox,
#mediaPreview {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}
.profile-avatar-dialog { overscroll-behavior:contain; }
.profile-avatar-dialog-card {
  overscroll-behavior-block:contain;
  touch-action:pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
}
.profile-avatar-dialog-card input[type="range"] { touch-action:pan-y; }
.profile-avatar-dialog-card :is([data-profile-crop-stage],.profile-avatar-crop-stage,[data-crop-stage]) { touch-action:none; }
.kalimera-overlay-handle { display:none; }

@media (max-width: 700px) {
  .kalimera-responsive-overlay {
    inset:auto 0 0;
    width:100%;
    max-height:min(92dvh,calc(var(--overlay-viewport-height) - 8px));
    margin:0;
    border-radius:26px 26px 0 0;
    transform:translate3d(0, calc(100% + env(safe-area-inset-bottom)), 0);
  }
  .kalimera-responsive-overlay .kalimera-overlay-surface {
    max-height:min(92dvh,calc(var(--overlay-viewport-height) - 8px));
    border-block-end:0;
    border-radius:26px 26px 0 0;
    padding-block-end:env(safe-area-inset-bottom);
  }
  .kalimera-overlay-header {
    padding-block-start:24px;
    touch-action:none;
  }
  .kalimera-overlay-footer { padding-block-end:max(16px, env(safe-area-inset-bottom)); }
  .kalimera-overlay-handle {
    position:absolute;
    inset-block-start:8px;
    inset-inline:0;
    display:block;
    width:42px;
    height:4px;
    border-radius:999px;
    background:rgba(10, 28, 37, .25);
    margin-inline:auto;
  }
  .kalimera-responsive-overlay.is-dragging { transition:none; }
}

.kalimera-sr-announcer {
  position:fixed;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.kalimera-overlay-header,
.kalimera-overlay-body,
.kalimera-overlay-footer { direction:inherit; text-align:start; }
.kalimera-overlay-body :is(input,textarea,select,output) { text-align:start; }
.kalimera-bidi-value { unicode-bidi:plaintext; text-align:start; }
.kalimera-directional-icon { transform:scaleX(1); }
:is([dir="rtl"],html[lang="he"] body,html[lang="ar"] body) .kalimera-directional-icon { transform:scaleX(-1); }
html[data-locale="en"] body .kalimera-directional-icon { transform:scaleX(1); }

@media (pointer:coarse) {
  [data-overlay-managed] :is(button,[role="button"],input,select,textarea) { min-block-size:44px; }
}

@media (prefers-contrast:more) {
  .kalimera-overlay-surface { border-color:#0a1c25; box-shadow:0 0 0 2px rgba(10,28,37,.35); }
  .motion-interactive:focus-visible,
  [data-overlay-managed] :focus-visible { outline:3px solid #0a1c25; outline-offset:3px; }
}

@media (forced-colors:active) {
  .kalimera-responsive-overlay::backdrop { background:Canvas; opacity:.75; backdrop-filter:none; }
  .kalimera-overlay-surface,
  .kalimera-overlay-header,
  .kalimera-overlay-body,
  .kalimera-overlay-footer { border:1px solid CanvasText; background:Canvas; color:CanvasText; box-shadow:none; }
  .kalimera-overlay-handle { background:CanvasText; }
  .motion-interactive:focus-visible,
  [data-overlay-managed] :focus-visible { outline:3px solid Highlight; outline-offset:3px; }
}

/* Reusable opt-in interaction primitives. `will-change` is applied only while
   an element is actively moving so idle pages do not retain extra GPU layers. */
.motion-interactive {
  transition:
    color var(--motion-duration-feedback) var(--motion-ease-standard),
    background-color var(--motion-duration-feedback) var(--motion-ease-standard),
    border-color var(--motion-duration-feedback) var(--motion-ease-standard),
    box-shadow var(--motion-duration-feedback) var(--motion-ease-standard),
    opacity var(--motion-duration-feedback) var(--motion-ease-standard),
    transform var(--motion-duration-feedback) var(--motion-ease-standard);
}

.motion-is-active {
  will-change: transform, opacity;
}

.motion-enter {
  animation: kalimera-motion-enter var(--motion-duration-surface) var(--motion-ease-enter) both;
}

.motion-fade {
  animation: kalimera-motion-fade var(--motion-duration-menu) var(--motion-ease-standard) both;
}

.motion-interactive:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(var(--motion-distance-press)) scale(.985);
}

.motion-interactive:disabled,
.motion-interactive[aria-disabled="true"]{opacity:var(--motion-opacity-disabled);transform:none!important;box-shadow:none;cursor:not-allowed}
.motion-interactive[aria-pressed="true"],
.motion-interactive[aria-selected="true"],
.motion-interactive.active{border-color:#2b6e8f}
.motion-interactive[data-state="success"],.motion-interactive.is-success{border-color:#2f6b56;color:#2f6b56}
.motion-interactive[data-state="error"],.motion-interactive.is-error{border-color:#9a4033;color:#9a4033}
.motion-interactive:focus-visible{outline:2px solid #2b6e8f;outline-offset:3px}
.motion-menu{transition-duration:var(--motion-duration-menu-close)!important;transition-timing-function:var(--motion-ease-exit)!important}
.motion-menu.is-open{transition-duration:var(--motion-duration-menu)!important;transition-timing-function:var(--motion-ease-enter)!important}
[data-motion-reveal-bound="true"]{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--motion-duration-surface) var(--motion-ease-standard),transform var(--motion-duration-surface) var(--motion-ease-enter)}
[data-motion-reveal-bound="true"].is-motion-revealed{opacity:1;transform:none}
.motion-card{transition:transform var(--motion-duration-feedback) var(--motion-ease-standard),box-shadow var(--motion-duration-feedback) var(--motion-ease-standard),border-color var(--motion-duration-feedback) var(--motion-ease-standard)}
.motion-gallery-image{transition:transform var(--motion-duration-surface) var(--motion-ease-standard)}

@media (hover:hover) and (pointer:fine){
  .motion-card:hover{transform:translateY(-4px)!important;box-shadow:var(--motion-shadow-2)}
  .motion-card:hover .motion-gallery-image{transform:scale(1.045)!important}
}

@media (hover:none),(pointer:coarse){
  .motion-card:hover{transform:none!important}
  .motion-gallery-image{transform:none!important}
}

@media (hover: hover) and (pointer: fine) {
  .motion-lift:hover:not(:disabled):not([aria-disabled="true"]),
  .motion-lift:focus-visible:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(calc(var(--motion-distance-hover) * -1));
    box-shadow: var(--motion-shadow-2);
  }
}

@keyframes kalimera-motion-enter {
  from { opacity: 0; transform: translate3d(0, var(--motion-distance-enter), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes kalimera-motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Capability modes are set by motion-system.js. They only tune shared tokens;
   components remain functional if JavaScript is unavailable. */
html[data-motion="reduced"],
html[data-performance="constrained"] {
  --motion-blur-control: 0px;
  --motion-blur-menu: 0px;
  --motion-blur-media: 0px;
  --motion-blur-overlay: 0px;
}

html[data-performance="constrained"] {
  --motion-duration-surface: 180ms;
  --motion-duration-sheet: 220ms;
  --motion-duration-slow: 260ms;
  --motion-distance-enter: 6px;
  --motion-distance-sheet: 18px;
}

/* Suspend decorative work completely while the page is in the background.
   Application state and controls remain live; only CSS animation clocks are
   paused until performance-guard.js reconciles the visible page again. */
html[data-page-visibility="hidden"] *,
html[data-page-visibility="hidden"] *::before,
html[data-page-visibility="hidden"] *::after { animation-play-state:paused!important; }

/* Data Saver and weak-hardware modes preserve content but avoid image-backed
   decorative layers, fixed painting and simultaneous surface animation. */
html[data-performance="constrained"] [data-parallax],
html[data-performance="constrained"] .morning-surface {
  background-attachment:scroll!important;
}
html[data-performance="constrained"] .morning-surface::before {
  background-image:none!important;
  transform:none!important;
  will-change:auto!important;
}

@media(max-width:700px){
  /* Consistent one-to-one close controls across every mobile overlay. */
  :is(dialog,[role="dialog"],.kalimera-responsive-overlay,.lightbox,.confirm,.profile-preset-delete-confirm) :is(button[class*="-close"],.profile-avatar-dialog-close,.lightbox-close,[class*="dialog-close"],[id$="Close"],.profile-preset-delete-close){
    display:grid!important;
    place-items:center!important;
    inline-size:40px!important;
    block-size:40px!important;
    min-inline-size:40px!important;
    min-block-size:40px!important;
    max-inline-size:40px!important;
    max-block-size:40px!important;
    aspect-ratio:1!important;
    padding:0!important;
    border-radius:50%!important;
    line-height:1!important;
  }
  .site-header .upload-link{
    opacity:1!important;
    background:rgba(43,110,143,.5)!important;
    border:1px solid rgba(255,255,255,.42)!important;
    box-shadow:0 7px 18px rgba(10,28,37,.2)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.15)!important;
    backdrop-filter:blur(12px) saturate(1.15)!important;
  }
  .site-header .upload-link:is(:hover,:focus-visible){
    opacity:1!important;
    background:rgba(36,95,123,.68)!important;
  }
}
html[data-performance="constrained"] .taste-section {
  background-image:linear-gradient(135deg,#163547,#0a1c25)!important;
}
html[data-performance="constrained"] :is(.motion-card,.motion-gallery-image,[data-motion-reveal-bound="true"]){
  transition-duration:180ms!important;
}

/* Bound layout and paint invalidation to the high-cardinality surfaces. */
:is(.gallery-item,.today-coffee,.deal-card,.deals-page-card,.bean-deal-card){contain:layout style}
:is(.gallery-media,.today-coffee-media,.deal-page-media,.profile-analytics-chart){contain:layout paint style}
:is(.profile-analytics-panel,.gallery-grid,.deals-page-grid){contain:layout style}
:is(.kalimera-overlay-surface,.kalimera-overlay-body,.lightbox-image-frame){contain:layout style}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --motion-opacity-backdrop: .72;
    --motion-blur-control: 0px;
    --motion-blur-menu: 0px;
    --motion-blur-media: 0px;
    --motion-blur-overlay: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-feedback: 0ms;
    --motion-duration-menu: 0ms;
    --motion-duration-menu-close: 0ms;
    --motion-duration-surface: 0ms;
    --motion-duration-sheet: 0ms;
    --motion-duration-slow: 0ms;
    --motion-distance-press: 0px;
    --motion-distance-hover: 0px;
    --motion-distance-enter: 0px;
    --motion-distance-sheet: 0px;
  }

  html { scroll-behavior: auto; }
  .motion-is-active { will-change: auto; }
  .motion-enter,
  .motion-fade { animation: none; }
  [data-motion-reveal-bound="true"]{opacity:1;transform:none;transition:none}
  .motion-card,.motion-gallery-image,.kalimera-global-action-status{transition:none!important;animation:none!important}
}

html[data-kalimera-feature-motion-effects="off"] {
  --motion-duration-fast:0ms;
  --motion-duration-feedback:0ms;
  --motion-duration-menu:0ms;
  --motion-duration-menu-close:0ms;
  --motion-duration-surface:0ms;
  --motion-duration-sheet:0ms;
  --motion-duration-slow:0ms;
  --motion-distance-press:0px;
  --motion-distance-hover:0px;
  --motion-distance-enter:0px;
  --motion-distance-sheet:0px;
  scroll-behavior:auto;
}
html[data-kalimera-feature-motion-effects="off"] :is(.motion-interactive,.motion-card,.motion-gallery-image,.motion-enter,.motion-fade,[data-motion-reveal-bound="true"]){animation:none!important;transition:none!important;transform:none!important}
html[data-kalimera-feature-motion-effects="off"] [data-motion-reveal-bound="true"]{opacity:1}