@tailwind base;
@tailwind components;
@tailwind utilities;

/* Full-bleed bands (.landscape-full-bleed) are sized in vw, which counts the
   scrollbar gutter the content box does not have, so they overhang by the
   scrollbar width and let the page drag sideways. Clip that overhang here.
   `clip` rather than `hidden`: hidden makes this a scroll container and would
   break the sticky toolbar on /european. */
html,
body {
  overflow-x: clip;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* /european filters popover: anchored to the Filters button on desktop, bottom sheet on mobile */
.european-filters[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
}

.european-filters::backdrop {
  background: rgb(15 23 42 / 0.25);
}

@media (max-width: 767px) {
  .european-filters[popover] {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
  }

  .european-filters[popover] > div {
    border-radius: 1rem 1rem 0 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .european-filters[popover] {
    transition: opacity 180ms cubic-bezier(0.25, 1, 0.5, 1), transform 180ms cubic-bezier(0.25, 1, 0.5, 1), display 180ms allow-discrete, overlay 180ms allow-discrete;
    opacity: 0;
    transform: translateY(6px);
  }

  .european-filters:popover-open {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .european-filters:popover-open {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

/* The one authored moment on /european: a filter lands, the chip rises in and the count ticks */
@media (prefers-reduced-motion: no-preference) {
  .european-chip {
    transition: opacity 220ms cubic-bezier(0.25, 1, 0.5, 1), transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  @starting-style {
    .european-chip {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  @keyframes european-count-flash {
    0% { color: #1d4ed8; transform: translateY(-2px); }
    100% { color: inherit; transform: none; }
  }

  .european-count-flash {
    display: inline-block;
    animation: european-count-flash 360ms cubic-bezier(0.25, 1, 0.5, 1);
  }
}

/* The Reference blocks separate with a hairline each, but the first one sits
   directly under the section's own top rule, so it does not need a second. */
.european-reference > .european-ref-block:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.european-page ::selection {
  background: #dbeafe;
  color: #0f172a;
}

@keyframes want-to-try-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}

.want-to-try-pop {
  animation: want-to-try-pop 360ms cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .want-to-try-pop {
    animation: none;
  }
}
/*
 * 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.
 *


 */

.product-overview h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.product-overview h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Full-bleed out of a centered container.
   100vw counts the scrollbar gutter but the content box does not, so on a
   scrollable page the bleed lands ~15px wider than the viewport and drags the
   document sideways. dvw measures the same gutter, so it is not a fix. The
   overflow is clipped on the root instead (see html in application.tailwind),
   which keeps the edges exact at every width without a viewport-unit hack. */
.landscape-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* A full-bleed band that also sticks.
   The bleed above cannot be reused as-is: it sets position:relative (which
   beats Tailwind's `sticky` utility, equal specificity and this file loads
   last), and its `left:50%` is an inset that position:sticky resolves against
   the scrollport instead of letting the negative margin cancel it, which
   shunts the stuck bar sideways. Bleeding purely with symmetric negative
   margins avoids insets altogether and holds in both states. */
.landscape-full-bleed.european-toolbar {
  position: sticky;
  left: auto;
  right: auto;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.landscape-category {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landscape-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.landscape-product {
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.landscape-product:hover {
  transform: translateY(-1px);
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes landscape-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.landscape-category {
  animation: landscape-fade-up 0.4s ease-out both;
}
.landscape-category:nth-child(1) { animation-delay: 0.0s; }
.landscape-category:nth-child(2) { animation-delay: 0.05s; }
.landscape-category:nth-child(3) { animation-delay: 0.1s; }
.landscape-category:nth-child(4) { animation-delay: 0.15s; }
.landscape-category:nth-child(5) { animation-delay: 0.2s; }
.landscape-category:nth-child(6) { animation-delay: 0.25s; }
.landscape-category:nth-child(7) { animation-delay: 0.3s; }
.landscape-category:nth-child(8) { animation-delay: 0.35s; }

.landscape-filter-btn.active {
  background-color: rgb(15 23 42); /* slate-900 */
  border-color: rgb(15 23 42);
  color: white;
}

@media (prefers-reduced-motion: reduce) {
  .landscape-category {
    animation: none;
    transition: none;
  }
  .landscape-product {
    transition: none;
  }
}

/* Stack pages */
@keyframes stack-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stack-layer {
  animation: stack-fade-up 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.stack-layer:nth-child(1) { animation-delay: 0.0s; }
.stack-layer:nth-child(2) { animation-delay: 0.08s; }
.stack-layer:nth-child(3) { animation-delay: 0.16s; }
.stack-layer:nth-child(4) { animation-delay: 0.24s; }

.stack-product-card {
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}
.stack-product-card:hover {
  transform: translateY(-2px);
}

.stack-hero {
  animation: stack-fade-up 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.stack-nav {
  animation: stack-fade-up 0.3s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .stack-layer,
  .stack-hero,
  .stack-nav {
    animation: none;
  }
  .stack-product-card {
    transition: none;
  }
}

/* Featured badge */
@keyframes featured-glow {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes featured-enter {
  0% { opacity: 0; transform: translateY(-4px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes featured-star-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.featured-badge {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: white;
  text-shadow: 0 1px 2px rgba(120, 53, 15, 0.5);

  animation: featured-enter 0.4s ease-out, featured-glow 1.2s ease-in-out 0.3s 1;
}

.featured-badge svg {
  animation: featured-star-pulse 0.6s ease-in-out 0.5s 1;
  filter: drop-shadow(0 1px 1px rgba(120, 53, 15, 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .featured-badge,
  .featured-badge svg {
    animation: none;
  }
}

.blog-post a {
  text-decoration: underline;

}
.blog-post a:hover {
  text-decoration: none;
}