/* Original visual utilities and grain are in assets/source.css.
   These rules supply behavior/accessibility, narrow-screen containment and the
   motion system (transitions, scroll reveal, blur-up images, menu animation). */
:root {
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 220ms;
  --dur-base: 320ms;
  --dur-reveal: 720ms;
}
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
::selection { background: #A67C6D; color: #F8F5F2; }
:focus-visible { outline: 2px solid #A67C6D; outline-offset: 5px; }
section:focus, #main-content:focus { outline: none; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px; color: #2D2926; background: #F8F5F2;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
#cover .grid p.font-heading { font-variant-numeric: tabular-nums; }

/* One motion system: every hover/focus transition shares duration and easing. */
#site-header nav a,
#site-header > div > a,
.link-line,
.card-lift,
.reel-card {
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
}
#site-header > div > a { transition-property: opacity; }
#site-header > div > a:hover { opacity: .8; }
/* Nav: keep opacity behavior, add a 1px currentColor underline growing from the left. */
#site-header nav a {
  transition-property: opacity, background-size;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% + 6px);
  padding-bottom: 6px;
  margin-bottom: -6px;
}
#site-header nav a:hover,
#site-header nav a[aria-current] { background-size: 100% 1px; }
/* Text links outside the nav: color to terracotta plus a 1px underline growing from the left. */
.link-line {
  transition-property: color, background-size;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
}
.link-line:hover, .link-line:focus-visible { color: #A67C6D; background-size: 100% 1px; }
/* Cards (#reviews, #rates): lift 2px and take the larger paper shadow. */
.card-lift { transition-property: transform, box-shadow, opacity; }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 2px 4px #2d29260d, 0 20px 50px #2d29261f; }
/* Reel cards: lift 4px, border opacity 20% -> 40%. */
.reel-card { transition-property: transform, border-color; }
.reel-card:hover { transform: translateY(-4px); border-color: rgb(248 245 242 / .4); }

/* Handwritten annotations that overlap an image corner: a soft paper halo keeps them legible
   over any photo, and a little more offset keeps most of the word on the paper. */
.hand-note {
  text-shadow: 0 0 1px #F8F5F2, 0 0 6px #F8F5F2, 0 0 14px #F8F5F2, 0 0 28px #F8F5F2;
  white-space: nowrap;
}

/* "Why UGC?" sits on a bright part of its photo: shade the top-left corner behind the words. */
.why-shade { background-image: radial-gradient(ellipse 70% 55% at 0% 0%, rgb(45 41 38 / .55), transparent 70%); }

/* Scroll reveal. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* Cards keep their hover transition after the reveal has finished. */
.card-lift.is-visible { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card-lift.is-visible:hover { transform: translateY(-2px); }
@media print {
  .reveal, .img-main { opacity: 1 !important; transform: none !important; transition: none !important; }
  #site-header, #mobile-menu, .skip-link { display: none !important; }
}

/* Blur-up image loading: 20px placeholder behind the real image, real image fades in. */
.img-blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(12px); transform: scale(1.08);
}
.img-main { opacity: 0; transition: opacity 600ms var(--ease-out); }
.img-main.is-loaded { opacity: 1; }
.no-js .img-main { opacity: 1; }

/* Mobile menu: class-driven so it can animate; `hidden` only remains for the no-JS case. */
#mobile-menu {
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
#mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}
#mobile-menu a {
  transform: translateY(8px);
  transition: transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}
#mobile-menu.is-open a { transform: none; }

/* Reel strip. */
#reel-strip { overscroll-behavior-x: contain; scrollbar-width: none; }
#reel-strip::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  #reel-strip { scroll-snap-type: x proximity; scroll-padding-inline: 1.5rem; }
  #reel-strip > div { scroll-snap-align: start; }
}
/* On intermediate widths the source's centered reel would clip its first
   cards beyond the scroll origin. Keep the first reel reachable when overflowing. */
@media (min-width: 768px) and (max-width: 1255px) {
  #reel-strip { justify-content: flex-start; }
  #site-header nav { gap: clamp(8px, 1.5vw, 28px); }
  #site-header nav a { letter-spacing: .18em; }
}
@media (max-height: 740px) and (max-width: 767px) {
  #mobile-menu { justify-content: flex-start; padding-top: 100px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}