/* =========================================================
   Fonts + typography
========================================================= */
:root{
  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Prata", serif;

  --fs-chapter: 0.75rem;
  --fs-heading: 3.25rem;
  --fs-body: 1rem;

  --lh-mid: 1.2;
  --lh-body: 1.6;

  --ls-mid: 0.06em;
  --ls-zero: 0;

  --white: #ffffff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family: var(--font-body);
  background:#000;
  color: var(--white);
  overflow-x:hidden;
}

/* =========================================================
   Accessibility
========================================================= */
.skip{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  text-decoration:none;
  z-index:1000;
}
.skip:focus{
  left:12px;
  outline:2px solid rgba(255,255,255,.45);
  outline-offset:2px;
}

/* =========================================================
   Dots navigation
========================================================= */
.dots{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:60;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  cursor:pointer;
}
.dot.is-active{
  background: rgba(255,255,255,.9);
  transform: scale(1.05);
}

/* =========================================================
   Slides wrapper
========================================================= */
.slides{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   Slide base
========================================================= */
.slide{
  position:relative;
  min-height:100vh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;

  display:flex;
  align-items:flex-start;
  padding-top:18vh;

  background-image: var(--bg);
  background-size:cover;
  background-position:center;

  opacity:0.75;
  transition:opacity 1200ms ease-in-out;
}
.slide.is-active{
  opacity:1;
}

/* Overlay for image readability */
.overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 650px at 20% 25%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(900px 650px at 80% 30%, rgba(0,0,0,.22), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.22) 40%, rgba(0,0,0,.5));
  opacity:.92;
  transition:opacity 1200ms ease-in-out;
}
.slide.is-active .overlay{
  opacity:1;
}

/* =========================================================
   Content column
   - width adapts to widest text (usually the heading)
========================================================= */
.content{
  position: relative;
  z-index: 2;

  /* consistent, readable column */
  width: min(820px, calc(100% - 56px));
  margin: 0 auto;

  padding: 28px 32px;
  border-radius: 22px;

  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(2px);
}

/* =========================================================
   Typography
========================================================= */
.chapter{
  margin:0 0 10px;
  font-size:var(--fs-chapter);
  font-weight:600;
  line-height:var(--lh-mid);
  letter-spacing:var(--ls-mid);
  text-transform:uppercase;
}

h1, h2{
  margin:0 0 12px;
  font-family:var(--font-heading);
  font-weight:400;
  line-height:var(--lh-mid);
  font-size:clamp(2.1rem, 4.2vw, var(--fs-heading));

  max-width:none;          /* heading defines box width */
  text-wrap:balance;
}

.body{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  max-width:60ch;

  opacity:.95;

  /* no word division */
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}

/* =========================================================
   Animations
========================================================= */
.slide .chapter,
.slide h1,
.slide h2,
.slide .body{
  opacity:0;
}

.slide.is-active .chapter{
  animation:fadeDown 1s ease forwards;
}
.slide.is-active h1,
.slide.is-active h2{
  animation:fadeUp 1s ease forwards;
}
.slide.is-active .body{
  animation:fadeIn 1s ease forwards;
  animation-delay:.5s;
}

@keyframes fadeDown{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:.95; }
}

/* =========================================================
   Buttons & links
========================================================= */
.actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.2);
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{ transform:translateY(-1px); }

.links{
  margin-top:16px;
  display:grid;
  gap:10px;
  max-width:520px;
}
.link{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
}

/* Disabled links */
.link[aria-disabled="true"]{
  color: rgba(255,255,255,0.45);
  border-bottom-color: rgba(255,255,255,0.18);
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

.hint{
  margin-top:16px;
  font-size:13px;
  opacity:.75;
}
.fine{
  margin-top:18px;
  font-size:13px;
  opacity:.75;
}

/* =========================================================
   Responsive adjustments
========================================================= */
@media (max-width:900px){
  .content{
    max-width:calc(100% - 56px);
  }
}

@media (max-width:700px){
  .slide{
    padding-top:14vh;
  }
}

@media (max-width:600px){
  .content{
    display:block;
    width:calc(100% - 32px);
    max-width:none;
    padding:22px 20px;
    border-radius:18px;
  }

  .dots{
    right:50%;
    top:auto;
    bottom:14px;
    transform:translateX(50%);
    flex-direction:row;
    padding:8px 10px;
    border-radius:999px;
    background: rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
  }
}

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  .slide{ transition:none; opacity:1; padding-top:0; }
  .overlay{ transition:none; opacity:1; }

  .slide .chapter,
  .slide h1,
  .slide h2,
  .slide .body{
    opacity:1;
    animation:none!important;
  }

  .btn:hover{ transform:none; }
}