:root{
  /* timing + strengths you can tweak */
  --img-in:900ms;
  --img-out:520ms;
  --img-ease:cubic-bezier(.22,.61,.36,1);
  --txt-dur:360ms;
  --txt-ease:cubic-bezier(.2,.7,.2,1);

  --gaussX-enter:18px;
  --gaussX-leave:20px;
  --motionX-strength:26;
  --ring-size:68px;

  /* reserve footer rail space so desc length never pushes it */
  --rail-h: 84px;        /* adjust if you change chip size/spacing */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#0e0b09;
  color:#e9e3d6;
  font-family:Inter, system-ui, Arial, sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
}
a{text-decoration:none;color:inherit}

.slider{
  position:relative;
  min-height:100svh;
  width:100%;
  isolation:isolate;
  cursor:none;
}

/* === backgrounds === */
.slide-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  filter:blur(var(--gaussX-enter)) brightness(.9);
  will-change:opacity,filter,transform;
  transition:
    opacity var(--img-in) var(--img-ease),
    filter var(--img-in) var(--img-ease),
    transform var(--img-in) var(--img-ease);
}
.slide-bg.active{opacity:1; transform:scale(1); filter:blur(0) brightness(1)}
.slide-bg.enter{opacity:1; transform:scale(1.08); filter:blur(var(--gaussX-enter)) brightness(.95)}
.slide-bg.leave{
  opacity:0; transform:scale(1.02);
  filter:url(#motionBlurX) brightness(.75);
  transition-duration:var(--img-out);
}

/* vignette + film grain */
.slider::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 20%, rgba(0,0,0,.14) 0%, rgba(0,0,0,.52) 65%, rgba(0,0,0,.85) 100%),
              linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.6));
}
.slider::after{
  content:""; position:absolute; inset:-40px; z-index:3; pointer-events:none;
  background-image:url("https://images.unsplash.com/photo-1520975922323-8c2a9760a8b0?auto=format&fit=crop&w=1200&q=60");
  mix-blend-mode:overlay; opacity:.22; filter:contrast(1.4) grayscale(.6);
}

.years-rail:hover ~ .cursor { opacity:0 !important; }

.brand{
  letter-spacing:.34em; color:#b6ad9a; text-transform:uppercase; font-size:.9rem;
  display:flex; flex-direction:column; gap:.35rem; align-items:center; user-select:none
}
.brand svg{opacity:.75}
.pagination{letter-spacing:.2em;color:#b6ad9a}

/* ===== content layout (center text) ===== */
.content{
  position:relative; z-index:4;
  min-height:100svh;                   /* full panel */
  padding:min(6vw,72px);
  padding-bottom:var(--rail-h);        /* reserve space for fixed footer rail */
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}

.textwrap{text-align:center; max-width:600px; margin:0 auto;}
.textwrap.anim{
  will-change:opacity,filter,transform;
  transition:
    opacity var(--txt-dur) var(--txt-ease),
    filter var(--txt-dur) var(--txt-ease),
    transform var(--txt-dur) var(--txt-ease);
}
.textwrap.hide{opacity:0; filter:blur(8px); transform:translateY(8px)}
.textwrap.show{opacity:1; filter:blur(0); transform:translateY(0)}

.subtitle{ text-transform:uppercase; letter-spacing:.35em; color:#c9ab7a; font-size:.9rem; margin-bottom:1rem; opacity:.9 }
.year{
  font-family:"Playfair Display",serif; font-weight:900;
  font-size:clamp(3.8rem,11vw,8.8rem); line-height:1;
  margin:.2rem 0 1.2rem; text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.desc{
  max-width:700px; margin:0 auto; color:#ddd2c1; opacity:.95;
  line-height:1.7; font-size:clamp(1rem,1.8vw,1.1rem);
}
.cta{
  display:inline-block; margin-top:1.5rem; padding:.9rem 1.35rem; border-radius:999px;
  text-transform:uppercase; letter-spacing:.15em;
  border:1px solid rgba(255,255,255,.18); background:#2a241e; color:#e9e3d6
}
.cta:hover{ background:#3a332b; border-color:rgba(255,255,255,.25) }

/* side year hints (optional) */
.side-year{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:"Playfair Display",serif;
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  color:#cec6b6; opacity:.75; user-select:none; pointer-events:none
}
.left{left:2vw} .right{right:2vw}

/* invisible nav click zones (for keyboard) */
.nav{position:absolute; inset:0; z-index:6; pointer-events:none; display:flex; justify-content:space-between; align-items:center}
.nav button{pointer-events:auto; appearance:none; background:transparent; border:none; padding:clamp(8px,2vw,18px); margin:0 2vw; border-radius:999px; cursor:none}

/* custom cursor (ring + thin arrow) */
.cursor{
  position:fixed; left:0; top:0; width:var(--ring-size); height:var(--ring-size);
  margin-left:calc(var(--ring-size)/-2); margin-top:calc(var(--ring-size)/-2);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; pointer-events:none; z-index:10;
  transition:opacity .18s ease, transform .18s ease, background .2s ease, border-color .2s ease;
  transform:translate3d(-100px,-100px,0) scale(.95);
  backdrop-filter: blur(2px) saturate(120%);
}
.cursor.show{opacity:1}
.cursor.pressed{transform:translate3d(var(--x),var(--y),0) scale(.86); background:rgba(255,255,255,.10)}
.cursor svg{width:28px; height:28px; fill:none; stroke:#efe7d6; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease}
.cursor.right svg{transform:rotate(0deg)}
.cursor.left  svg{transform:rotate(180deg)}
.cursor.drag  svg{transform:rotate(var(--deg,0deg))}

/* ===== fixed footer years rail ===== */
/* ===== fixed, single-line footer years rail ===== */
.years-rail{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex;
  flex-wrap:nowrap;          /* 👈 force one line */
  white-space:nowrap;        /* 👈 keep inline content on one line */
  gap:1.6rem;                /* tweak spacing as needed */
  justify-content:center;
  z-index:6;
  cursor:pointer;
}

/* hide overflow on desktop; allow scroll on small screens below */
.years-rail{ overflow:visible; }

.year-chip{
  font-family:"Playfair Display",serif;
  font-size:1.35rem;
  padding:.4rem 1rem;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.35);
  cursor:pointer;
  transition:color .25s ease, transform .2s ease;
  display:inline-block;      /* plays nice with white-space:nowrap */
}
.year-chip:hover{ color:rgba(255,255,255,.65); transform:translateY(-2px); }
.year-chip.active{ color:#ffe1b2; font-weight:700; }

/* Responsive: if the row gets wider than the viewport, let it scroll horizontally */
@media (max-width:900px){
  .years-rail{
    left:0; right:0; transform:none; margin:0 auto; padding:0 16px;
    justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:1.25rem;
  }
  /* optional: hide scrollbar */
  .years-rail::-webkit-scrollbar{ display:none; }
  .years-rail{ scrollbar-width:none; }
  .year{ font-size:clamp(3rem,10vw,7rem); } /* minor headline shrink to keep balance */
}

@media (max-width:720px){
  .textwrap{margin-inline:auto; text-align:center}
  .desc{margin:0 auto}
  .side-year{display:none}
  .cursor{display:none}
  .slider{cursor:auto}
}