/* ============================================================
   Community Moments - 3D coverflow.
   Every dimension below is taken from the 1672x941 comp and
   expressed in --s units, so at a 1672px viewport one unit is
   exactly one comp pixel. --s stops shrinking at .8 so the deck
   never collapses; the side cards are designed to bleed off.
   ============================================================ */
@font-face{font-family:"Castile Mastah";src:url("/rvr-assets/fonts/castile-mastah-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.cm{
  --s:clamp(.8px,calc(100vw / 1672),1px);
  --cm-ink:#18362c;
  --cm-body:#514a42;
  --cm-quiet:#7d6a5c;
  --cm-eyebrow:#8a7d71;
  --cm-rule:#b99a6e;
  --cm-ochre:#c08344;
  --cm-label:#41544c;
  --cm-script:#a4aaa1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:50px;
  padding:calc(34*var(--s)) 0 calc(57*var(--s) + 50px);
  background:#f7f7f2;
  font-family:var(--body);
}
/* both edges dissolve into the page colour (#f1f1eb) so the band has no
   seam against the sections above and below. smootherstep ramp, 9 stops. */
.cm::before,
.cm::after{content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none}
.cm::before{
  top:0;
  height:170px;
  background:linear-gradient(180deg,
    rgb(241,241,235) 0%,
    rgba(241,241,235,.989) 12.5%,
    rgba(241,241,235,.896) 25%,
    rgba(241,241,235,.725) 37.5%,
    rgba(241,241,235,.5) 50%,
    rgba(241,241,235,.275) 62.5%,
    rgba(241,241,235,.104) 75%,
    rgba(241,241,235,.011) 87.5%,
    rgba(241,241,235,0) 100%);
}
.cm::after{
  bottom:0;
  height:150px;
  background:linear-gradient(0deg,
    rgb(241,241,235) 0%,
    rgba(241,241,235,.989) 12.5%,
    rgba(241,241,235,.896) 25%,
    rgba(241,241,235,.725) 37.5%,
    rgba(241,241,235,.5) 50%,
    rgba(241,241,235,.275) 62.5%,
    rgba(241,241,235,.104) 75%,
    rgba(241,241,235,.011) 87.5%,
    rgba(241,241,235,0) 100%);
}
.cm__inner{
  position:relative;
  z-index:2;
  width:min(100%,calc(1672*var(--s)));
  margin-inline:auto;
}

/* ---------- background art (extracted from the comp, alpha-cut) ---------- */
.cm__forest,
.cm__bough{
  position:absolute;
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.cm__forest{top:0;width:calc(455*var(--s));height:auto}
.cm__forest--l{left:0}
.cm__forest--r{right:0;width:calc(452*var(--s))}
.cm__bough{
  right:0;
  top:calc(668*var(--s));
  width:calc(192*var(--s));
  height:auto;
}

/* ---------- header ---------- */
.cm__head{text-align:center}
.cm p{max-width:none}
.cm__eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(22*var(--s));
  margin:0;
  color:var(--cm-eyebrow);
  font-size:calc(13*var(--s));
  line-height:1;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.cm__eyebrow i{
  width:calc(66*var(--s));
  height:1px;
  background:var(--cm-rule);
}
.cm__title{
  margin:calc(20*var(--s)) 0 0;
  color:var(--pd2-ink);
  font-family:var(--display);
  font-size:4rem;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
}
.cm__sub{
  margin:calc(14*var(--s)) 0 0;
  color:var(--pd2-soft);
  font-family:var(--body);
  font-size:calc(14*var(--s));
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.cm__lead{
  max-width:calc(766*var(--s));
  margin:calc(19*var(--s)) auto 0;
  color:var(--pd2-soft);
  font-family:var(--body);
  font-size:clamp(1.08rem,1.28vw,1.22rem);
  line-height:1.62;
}

.cm__br{display:inline}
/* ---------- coverflow deck ---------- */
.cm__stage{
  position:relative;
  height:calc(400*var(--s));
  margin-top:calc(27*var(--s));
}
.cm__deck{
  position:absolute;
  inset:0;
  perspective:calc(2400*var(--s));
  transform-style:preserve-3d;
}
.cm__card{
  position:absolute;
  left:50%;
  top:0;
  width:calc(845*var(--s));
  height:calc(397*var(--s));
  margin:0;
  border-radius:calc(18*var(--s));
  border:calc(4*var(--s)) solid rgba(255,253,248,.94);
  background:#2a1a12;
  overflow:hidden;
  backface-visibility:hidden;
  transform-origin:50% 50%;
  box-shadow:0 calc(26*var(--s)) calc(54*var(--s)) calc(-18*var(--s)) rgba(26,38,31,.46);
  /* motion lives here; the reduced-motion block below re-asserts it */
  transition:transform .72s cubic-bezier(.22,.61,.36,1),
             opacity .46s linear,
             box-shadow .72s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.cm__card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cm__card[data-cm-key="birthday"] img{object-position:center 51.5%}
.cm__card[data-cm-key="brunch"] img{object-position:center 58%;transform:translateX(16%) scale(1.33)}
.cm__card[data-cm-key="dinner"] img{object-position:center 56%;transform:translateX(-9%) scale(1.34)}
.cm__card[data-cm-key="movie"] img{object-position:center 42%}
/* bottom scrim for the caption + a dimming veil on the flanking cards */
.cm__card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(24,14,8,0) 42%,rgba(24,14,8,.42) 70%,rgba(24,14,8,.9) 100%);
  transition:background .6s linear;
}
.cm__card[data-state="prev"]::after,
.cm__card[data-state="next"]::after,
.cm__card[data-state="far"]::after{
  background:linear-gradient(180deg,rgba(22,16,11,.09) 0%,rgba(22,16,11,.12) 42%,rgba(24,14,8,.46) 70%,rgba(24,14,8,.88) 100%);
}
.cm__cap{
  position:absolute;
  z-index:1;
  left:calc(39*var(--s));
  right:calc(39*var(--s));
  bottom:calc(14*var(--s));
  color:var(--white);
  text-align:left;
}
.cm__cap h3{
  margin:0;
  color:var(--white);
  font-family:var(--display);
  font-size:calc(43.6*var(--s));
  font-weight:400;
  line-height:1.02;
}
.cm__cap p{
  margin:calc(11*var(--s)) 0 0;
  color:rgba(255,253,248,.92);
  font-size:calc(14.8*var(--s));
  line-height:1;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* deck states - translate first so the offset happens in deck space */
.cm__card[data-state="active"]{transform:translateX(-50%) rotateY(0deg) scale(1);z-index:3;opacity:1}
.cm__card[data-state="prev"]{transform:translateX(-149.5%) rotateY(-19.5deg) scale(.918);z-index:2;opacity:1}
.cm__card[data-state="next"]{transform:translateX(49.5%) rotateY(19.5deg) scale(.918);z-index:2;opacity:1}
.cm__card[data-state="far"]{transform:translateX(-50%) rotateY(0deg) scale(.8);z-index:1;opacity:0;pointer-events:none}
.cm__card[data-state="far"][data-side="l"]{transform:translateX(-215%) rotateY(-24deg) scale(.86)}
.cm__card[data-state="far"][data-side="r"]{transform:translateX(115%) rotateY(24deg) scale(.86)}
.cm__card[data-state="prev"],
.cm__card[data-state="next"]{cursor:pointer}

/* ---------- arrows ---------- */
.cm__nav{
  position:absolute;
  z-index:4;
  top:calc(192*var(--s));
  width:calc(48*var(--s));
  height:calc(48*var(--s));
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:#4a5a51;
  background:#fbfaf6;
  box-shadow:0 calc(6*var(--s)) calc(16*var(--s)) rgba(30,42,35,.22);
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.cm__nav svg{
  width:calc(19*var(--s));
  height:calc(19*var(--s));
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cm__nav--prev{left:calc(50% - 432.5*var(--s));transform:translateX(-50%)}
.cm__nav--next{left:calc(50% + 432.5*var(--s));transform:translateX(-50%)}
.cm__nav:hover{background:var(--white);color:var(--cm-ink)}

/* ---------- dots ---------- */
.cm__dots{
  display:flex;
  justify-content:center;
  gap:calc(16*var(--s));
  margin-top:calc(22*var(--s));
}
.cm__dot{position:relative}
/* comp dots are 13px; grow the hit area without touching the look */
.cm__dot::after{content:"";position:absolute;inset:calc(-16*var(--s))}
.cm__dot{
  width:calc(13*var(--s));
  height:calc(13*var(--s));
  padding:0;
  border-radius:50%;
  background:#cdcbc3;
  cursor:pointer;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.cm__dot[aria-selected="true"]{background:#1f3d33;transform:scale(1.04)}

/* ---------- thumbnails ---------- */
.cm__thumbs{
  display:flex;
  justify-content:center;
  gap:calc(28*var(--s));
  margin-top:calc(32*var(--s));
}
.cm__thumb{
  width:calc(161*var(--s));
  padding:0;
  background:none;
  cursor:pointer;
  text-align:center;
}
.cm__thumb-frame{
  display:block;
  overflow:hidden;
  padding:calc(2*var(--s));
  border:calc(2*var(--s)) solid transparent;
  border-radius:calc(12*var(--s));
  background:transparent;
  transition:border-color .4s var(--ease),background-color .4s var(--ease);
}
.cm__thumb img{
  display:block;
  width:100%;
  height:calc(98*var(--s));
  object-fit:cover;
  border-radius:calc(8*var(--s));
  transition:filter .4s var(--ease),opacity .4s var(--ease);
}
.cm__thumb:nth-child(1) img{object-position:center 51.5%}
.cm__thumb:nth-child(2) img{object-position:center 58%;transform:translateX(16%) scale(1.33)}
.cm__thumb:nth-child(3) img{object-position:center 56%;transform:translateX(-9%) scale(1.34)}
.cm__thumb:nth-child(4) img{object-position:center 42%}
.cm__thumb[aria-selected="true"] .cm__thumb-frame{border-color:var(--cm-ochre);background:#f7f7f2}
.cm__thumb:not([aria-selected="true"]) img{filter:saturate(.92);opacity:.94}
.cm__thumb:hover img{opacity:1;filter:none}
.cm__thumb-label{
  display:block;
  margin-top:calc(8*var(--s));
  color:var(--cm-label);
  font-size:calc(12.6*var(--s));
  line-height:1.5;
  letter-spacing:.205em;
  text-transform:uppercase;
}

/* ---------- signature + rooted mark ---------- */
.cm__script{
  position:absolute;
  left:calc(114*var(--s));
  top:calc(728*var(--s));
  width:auto;
  margin:0;
  color:var(--cm-script);
  font-family:"Castile Mastah",cursive;
  font-size:calc(28.2*var(--s));
  line-height:1.5;
  text-indent:0;
  transform:rotate(-4deg);
  transform-origin:left center;
  pointer-events:none;
}
.cm__script span{display:block;white-space:nowrap}
.cm__script span+span{margin-left:.95em}
.cm__rooted{
  position:absolute;
  left:calc(1419*var(--s));
  top:calc(750*var(--s));
  width:calc(240*var(--s));
  margin-left:calc(-120*var(--s));
  text-align:center;
  pointer-events:none;
}
.cm__mark{
  width:calc(80*var(--s));
  height:calc(34*var(--s));
  margin:0 auto;
  display:block;
  fill:none;
  stroke:var(--cm-rule);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cm__rooted p{
  margin:calc(17*var(--s)) 0 0;
  color:var(--cm-label);
  font-size:calc(12.7*var(--s));
  line-height:1.68;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ============================================================
   Reduced motion.
   interior.css kills every animation and transition globally with
   `*,*::before,*::after{transition-duration:.01ms!important}`.
   The client's own machine runs OS reduce-motion, so without this
   the deck would jump instead of turning. Class specificity beats
   the universal selector, so the deck keeps a real - slightly
   calmer - transition while everything else stays still.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cm .cm__card{
    transition-duration:.52s!important;
    transition-property:transform,opacity,box-shadow!important;
    transition-timing-function:cubic-bezier(.22,.61,.36,1)!important;
  }
  .cm .cm__card::after{transition-duration:.45s!important}
  .cm .cm__dot,
  .cm .cm__thumb-frame,
  .cm .cm__thumb img,
  .cm .cm__nav{transition-duration:.3s!important}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cm__br{display:none}
  .cm{--s:clamp(.62px,calc(100vw / 1180),1px)}
  .cm__lead{max-width:calc(760*var(--s))}
  .cm__script{left:calc(40*var(--s));top:calc(742*var(--s))}
  .cm__rooted{left:auto;right:calc(28*var(--s));margin-left:0;top:calc(770*var(--s))}
}
@media (max-width:860px){
  .cm{--s:.72px;padding-bottom:calc(40*var(--s))}
  .cm__lead{font-size:calc(20*var(--s))}
  .cm__script,
  .cm__rooted{position:static;margin:calc(34*var(--s)) auto 0;transform:none;text-align:center;width:auto}
  .cm__script{text-indent:0;font-size:calc(54*var(--s))}
  .cm__bough{width:calc(150*var(--s));top:auto;bottom:calc(-20*var(--s))}
}
@media (max-width:620px){
  /* the comp card is 845 wide - far past a phone - so below 620 the deck is
     sized from the viewport instead of --s, and the flanking cards just peek */
  .cm{--s:.62px;padding-top:calc(26*var(--s))}
  .cm__title{font-size:clamp(2.55rem,11.2vw,3.6rem)}
  .cm__sub{font-size:calc(18*var(--s));letter-spacing:.18em}
  .cm__eyebrow{font-size:calc(17*var(--s));gap:calc(16*var(--s))}
  .cm__eyebrow i{width:calc(40*var(--s))}
  .cm__lead{font-size:calc(25*var(--s));line-height:1.55}
  .cm__stage{height:calc(88vw / 1.5);margin-top:calc(40*var(--s))}
  .cm__card{width:88vw;height:calc(88vw / 1.5);border-width:3px;border-radius:14px}
  .cm__card[data-state="prev"]{transform:translateX(-145%) rotateY(-16deg) scale(.9)}
  .cm__card[data-state="next"]{transform:translateX(45%) rotateY(16deg) scale(.9)}
  .cm__card[data-state="far"][data-side="l"]{transform:translateX(-200%) rotateY(-20deg) scale(.86)}
  .cm__card[data-state="far"][data-side="r"]{transform:translateX(100%) rotateY(20deg) scale(.86)}
  .cm__cap{left:18px;right:18px;bottom:14px}
  .cm__cap h3{font-size:calc(58*var(--s))}
  .cm__cap p{font-size:calc(19*var(--s));letter-spacing:.16em}
  .cm__nav{top:calc(88vw / 3 - 17px);width:34px;height:34px}
  .cm__nav svg{width:15px;height:15px}
  .cm__nav--prev{left:6px;transform:none}
  .cm__nav--next{left:auto;right:6px;transform:none}
  .cm__dots{gap:10px;margin-top:18px}
  .cm__dot{width:9px;height:9px}
  .cm__thumbs{flex-wrap:wrap;gap:calc(20*var(--s));margin-top:22px}
  .cm__thumb{width:calc(46% - 10*var(--s))}
  .cm__thumb img{height:calc(30vw / 1.64)}
  .cm__thumb-label{font-size:calc(15*var(--s));letter-spacing:.16em}
  .cm__forest,.cm__forest--r{width:calc(300*var(--s))}
  .cm__script{font-size:calc(46*var(--s))}
}