/* =========================================================
   MOTION + DEPTH LAYER
   Additive only — safe to unlink this file to revert to flat.
   All effects are disabled under prefers-reduced-motion.
   ========================================================= */

/* ---------------------------------------------------------
   1. SCROLL REVEAL
   Hidden state only applies when JS is running (html.js-motion),
   so a JS failure can never leave content invisible.
   --------------------------------------------------------- */
.js-motion [data-rv]{
  opacity:0;
  transform:translateY(22px);
  will-change:opacity,transform;
}
.js-motion [data-rv].rv-in{
  opacity:1;
  transform:none;
  transition:opacity .62s cubic-bezier(.22,.75,.3,1),
             transform .62s cubic-bezier(.22,.75,.3,1);
  transition-delay:var(--rv-d,0ms);
  will-change:auto;
}
/* sideways variants for two-column sections */
.js-motion [data-rv="left"] { transform:translateX(-30px) translateY(12px) }
.js-motion [data-rv="right"]{ transform:translateX(30px)  translateY(12px) }
.js-motion [data-rv="pop"]  { transform:scale(.9);opacity:0 }
.js-motion [data-rv].rv-in  { transform:none }

/* ---------------------------------------------------------
   2. HERO ENTRANCE
   --------------------------------------------------------- */
@keyframes cp-rise{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }

.js-motion .hero .eyebrow,
.js-motion .hero h1,
.js-motion .hero .since,
.js-motion .hero p,
.js-motion .hero .btn{
  animation:cp-rise .72s cubic-bezier(.22,.75,.3,1) both;
}
.js-motion .hero .eyebrow{ animation-delay:.05s }
.js-motion .hero h1     { animation-delay:.15s }
.js-motion .hero .since { animation-delay:.27s }
.js-motion .hero p      { animation-delay:.37s }
.js-motion .hero .btn   { animation-delay:.47s }

/* The hero photo stays put — copy animates in, the image does not. */

/* ---------------------------------------------------------
   3. ANIMATED CHECKER RAIL
   The checker tile repeats every 20px, so a 20px slide loops
   seamlessly. Reads as a diner-counter conveyor.
   --------------------------------------------------------- */
@keyframes cp-rail{ from{background-position:0 0} to{background-position:20px 0} }
.rail{ animation:cp-rail 1.6s linear infinite }
.rail-rev{ animation-direction:reverse }

/* ---------------------------------------------------------
   4. DEPTH — lift the flat colour fields
   --------------------------------------------------------- */
/* soft vignette + faint dot texture over the big green blocks */
.favorites,.findmap{ position:relative;isolation:isolate }
.favorites::before,.findmap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 0%,  rgba(255,255,255,.075), transparent 62%),
    radial-gradient(100% 62% at 50% 100%, rgba(0,0,0,.30),        transparent 68%),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.05) 0 1.3px, transparent 1.3px);
  background-size:auto,auto,22px 22px;
}
/* warm the paper sections the same way */
.tradition{ position:relative;isolation:isolate }
.tradition::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 80% at 78% 50%, rgba(255,255,255,.55), transparent 60%),
             radial-gradient(100% 60% at 50% 100%, rgba(11,56,38,.07), transparent 70%);
}
/* NOTE: no seam shadow here. .ribbon-wrap is exactly as tall as .ribbon-card,
   so anything pinned to its bottom paints a band ACROSS the card, not under it.
   The card's own box-shadow already carries the seam. */

/* header gains a shadow once you leave the top of the page */
header{ transition:box-shadow .28s ease, background-color .28s ease }
body.scrolled header{ box-shadow:0 10px 26px rgba(0,0,0,.38) }
.js-motion header .brand img{ transition:height .28s ease }

/* ---------------------------------------------------------
   5. HOVER — everything you can click should answer
   --------------------------------------------------------- */
.fav-card{ transition:transform .32s cubic-bezier(.22,.75,.3,1), box-shadow .32s ease }
.fav-card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px rgba(0,0,0,.42) }

.vp{ transition:background-color .25s ease }
.vp:hover{ background:rgba(11,56,38,.045) }
.vp .ic{ transition:transform .32s cubic-bezier(.34,1.4,.5,1), box-shadow .32s ease }
.vp:hover .ic{ transform:translateY(-3px) scale(1.07) rotate(-4deg); box-shadow:0 10px 20px rgba(0,0,0,.28) }

.trad-photo{ transition:transform .4s cubic-bezier(.22,.75,.3,1), box-shadow .4s ease }
.trad-photo:hover{ transform:translateY(-6px) rotate(.5deg); box-shadow:0 26px 48px rgba(0,0,0,.26) }

.loc-card{ transition:transform .32s cubic-bezier(.22,.75,.3,1), box-shadow .32s ease }
.loc-card:hover{ transform:translateY(-6px); box-shadow:0 20px 38px rgba(0,0,0,.30) }

.mcard{ transition:transform .32s cubic-bezier(.22,.75,.3,1), box-shadow .32s ease }
.mcard:hover{ transform:translateY(-4px); box-shadow:0 20px 38px rgba(0,0,0,.26) }
.mphoto{ transition:transform .35s cubic-bezier(.34,1.4,.5,1) }
.mcard:hover .mphoto{ transform:translateY(-3px) scale(1.05) }

.loc-chips a{ transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease }
.loc-chips a:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,.3) }

.socials a{ transition:transform .22s cubic-bezier(.34,1.4,.5,1), background-color .22s ease }
.socials a:hover{ transform:translateY(-3px) scale(1.08) }

/* buttons: lift + the chevron slides out */
.btn{ transition:background-color .18s ease, border-color .18s ease,
                 transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .18s ease }
.btn:hover{ box-shadow:0 8px 18px rgba(0,0,0,.26) }
.btn-gold:hover,.btn-red:hover,.btn-green:hover{ transform:translateY(-3px) }
.btn .ar{ transition:transform .2s ease }
.btn:hover .ar{ transform:translateX(4px) }

.primary-nav a{ transition:color .18s ease, border-color .18s ease }

/* ---------------------------------------------------------
   6. RESPECT THE USER'S SETTING
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-rv]{ opacity:1 !important; transform:none !important }
  .js-motion .hero .eyebrow,.js-motion .hero h1,.js-motion .hero .since,
  .js-motion .hero p,.js-motion .hero .btn,
  .rail{ animation:none !important }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}