.progress {
  animation: progress 1s infinite linear;
}

.left-right {
    transform-origin: 0% 50%;
}
    @keyframes progress {
    0% {
        transform:  translateX(0) scaleX(0);
    }
    40% {
        transform:  translateX(0) scaleX(0.4);
    }
    100% {
        transform:  translateX(100%) scaleX(0.5);
    }
}
/*
 * PWA Visibility System
 *
 * This CSS file handles PWA-specific styling that activates when
 * the app is running in standalone mode (installed as PWA).
 *
 * Loaded separately from Tailwind to ensure proper cascade behavior.
 */

/* Default state: PWA elements hidden in browser mode */
.pwa-show {
    display: none !important;
}

.pwa-hide {
    display: block;
}

.pwa-header {
    padding-top: 0;
}

.pwa-bottom-nav {
    padding-bottom: 0;
}

.pwa-main-content {
    padding-bottom: 0;
}

/* PWA standalone mode - activated when app is installed */
@media all and (display-mode: standalone) {
    /* Show PWA-specific elements */
    .pwa-show {
        display: flex !important;
    }

    /* PWA page header needs display block not flex */
    .pwa-page-header.pwa-show {
        display: block !important;
    }

    /* Hide browser-specific elements */
    .pwa-hide {
        display: none !important;
    }

    /* PWA header extends under status bar */
    .pwa-header {
        padding-top: env(safe-area-inset-top);
    }

    /* PWA bottom nav respects home indicator */
    .pwa-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Main content - reset negative margin, add bottom padding for nav */
    .pwa-main-content {
        margin-top: 0 !important;
        padding-top: 0;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    /* Hide footer in PWA mode */
    footer {
        display: none !important;
    }

    /* Adjust breadcrumbs for PWA - hide them as we have bottom nav */
    nav[aria-label="Breadcrumb"] {
        display: none !important;
    }

    /* Remove the drop-shadow container in PWA mode */
    .pwa-content-card {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin: 0 !important;
    }
}

/* PWA View Transitions - simple cross-fade */
@media all and (display-mode: standalone) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 200ms;
        animation-timing-function: ease-out;
    }
}

/* Safe area utilities for PWA */
.pt-safe {
    padding-top: env(safe-area-inset-top);
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

.pl-safe {
    padding-left: env(safe-area-inset-left);
}

.pr-safe {
    padding-right: env(safe-area-inset-right);
}
swiper-slide a img {
  top:-100%; left:0; right: 0; bottom:-100%;
}

swiper-slide a {
  display: block;
  overflow: hidden;
}
/* Tasting Notes Mockup Styles */

.tasting-sidebar-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .tasting-sidebar-container {
    flex-direction: row;
  }

  .tasting-sidebar {
    display: block !important;
    width: 288px;
    flex-shrink: 0;
  }

  .tasting-main-content {
    flex: 1;
    padding-right: 1rem;
  }
}

@media (max-width: 1023px) {
  .tasting-main-content {
    flex: 1;
  }
}
.playfair-display-600 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 600
  font-style: normal;
}

.fraunces-400i {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 [x-cloak] { display: none !important; }