/* ═══ The Abbey — vibe layer ═══ */

/* Selection + smooth scroll */
::selection{background:#B87333;color:#F4EFE6}
html{scroll-behavior:smooth}

/* ── Grain overlay ── */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Scroll progress bar ── */
#vibe-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:10000;
  background:linear-gradient(90deg,#B87333,#c47a3d);
  transition:width .1s linear;
}

/* ── Scroll reveals ── */
@media (prefers-reduced-motion: no-preference){
  .v-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
  .v-reveal.v-in{opacity:1;transform:none}
  .v-reveal:nth-child(2){transition-delay:.08s}
  .v-reveal:nth-child(3){transition-delay:.16s}
  .v-reveal:nth-child(4){transition-delay:.24s}
  .v-reveal:nth-child(5){transition-delay:.32s}

  /* Hero entrance */
  .hero > div > *{opacity:0;transform:translateY(18px);animation:vUp .9s cubic-bezier(.22,.61,.36,1) forwards}
  .hero > div > *:nth-child(1){animation-delay:.05s}
  .hero > div > *:nth-child(2){animation-delay:.18s}
  .hero > div > *:nth-child(3){animation-delay:.3s}
  .hero > div > *:nth-child(4){animation-delay:.42s}
  .hero-aside{opacity:0;animation:vUp 1s .5s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes vUp{to{opacity:1;transform:none}}
}

/* ── Nav link underline sweep ── */
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:#B87333;transition:width .28s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after{width:100%}

/* ── Eyebrow accent tick ── */
.eyebrow{position:relative;padding-left:22px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:#B87333}

/* ── Cards & rooms: lift + copper edge ── */
.card,.room,.stat,.monk-card,.pane{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s;
  border-top:2px solid transparent;
}
.card:hover,.room:hover,.monk-card:hover{
  transform:translateY(-5px);
  border-top-color:#B87333;
  box-shadow:0 18px 40px -18px rgba(28,25,23,.35);
}
.stat{border-left:2px solid transparent;border-top:none}
.stat:hover{border-left-color:#B87333;transform:translateX(4px)}

/* ── Buttons: copper sweep ── */
.btn{position:relative;overflow:hidden;transition:color .3s .05s,border-color .3s;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#B87333;transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:#F4EFE6!important;border-color:#B87333!important}

/* ── Section-head: sliding copper rule ── */
.section-head{position:relative}
.section-head::after{
  content:"";display:block;width:0;height:2px;background:#B87333;margin-top:14px;
  transition:width 1s cubic-bezier(.22,.61,.36,1) .2s;
}
.section-head.v-in::after{width:64px}

/* ── Big ambient watermark letters on dark panes ── */
.pane{position:relative;overflow:hidden}

/* ── Footer link hover ── */
.foot a{transition:color .25s}
.foot a:hover{color:#B87333!important}

/* ── Image tone: subtle lift on hover in galleries ── */
img{transition:filter .4s}