/* Hatice Tekin · motion layer (GSAP + Lenis). Everything here is progressive:
   without JavaScript the pages render normally. */

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis-stopped { overflow: hidden; }

/* While the intro or a page transition is being prepared, hide the page for a beat.
   The animation fallback guarantees the page always appears, even if a script fails. */
html.ht-loading body { opacity: 0; animation: ht-show 0s linear 2.5s forwards; }
@keyframes ht-show { to { opacity: 1; } }

/* 2 · Intro */
.ht-pre {
  position: fixed; inset: 0; z-index: 10000;
  background: #f5f2ec;
  display: flex; align-items: center; justify-content: center;
}
.ht-pre img { height: min(26vh, 220px); width: auto; display: block; }

/* 3 · Page transition veil */
.ht-veil {
  position: fixed; inset: 0; z-index: 9999;
  background: #42191f;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%);
  pointer-events: none;
}
.ht-veil img { height: min(16vh, 140px); width: auto; opacity: 0.9; }

/* 4 · Split headings */
.ht-split-line { padding-bottom: 0.04em; }

/* 6 · Cursor */
@media (pointer: fine) {
  html.ht-has-cursor, html.ht-has-cursor * { cursor: none !important; }
  html.ht-has-cursor input, html.ht-has-cursor textarea { cursor: text !important; }
}
.ht-cursor {
  position: fixed; left: 0; top: 0; z-index: 10001;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #42191f;
  border: 1px solid transparent;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: width .4s cubic-bezier(.2,.7,.2,1), height .4s cubic-bezier(.2,.7,.2,1), margin .4s cubic-bezier(.2,.7,.2,1), background-color .3s ease, border-color .3s ease;
}
.ht-cursor span {
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; line-height: 1;
  color: #f5f2ec; opacity: 0; transition: opacity .25s ease;
}
.ht-cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: transparent; border-color: #42191f; }
.ht-cursor.is-call { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.ht-cursor.is-call span { opacity: 1; }
.ht-cursor.is-media { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: rgba(245,242,236,0.12); border-color: #f5f2ec; backdrop-filter: blur(2px); }
.ht-cursor.on-dark { background: #f5f2ec; }
.ht-cursor.on-dark.is-link { background: transparent; border-color: #f5f2ec; }
.ht-cursor.on-dark span { color: #42191f; }
.ht-cursor.is-hidden { opacity: 0; }

/* 10 · Counters keep their width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* 13 · From / To strike */
.ht-strike-text {
  background-image: linear-gradient(#42191f, #42191f);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 14 · Months, while pinned */
[data-months].is-pinned > div > p:nth-child(2) { font-size: clamp(110px, 12vw, 200px) !important; line-height: 0.9 !important; }
[data-months].is-pinned > div > p:nth-child(3) { max-width: 440px !important; font-size: 17px !important; }

/* 15 · Review deck controls */
.ht-deck-next {
  display: block; margin: 40px auto 0; padding: 12px 4px;
  background: none; border: none; border-bottom: 1px solid #42191f;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: #42191f;
}

/* Mobile menu panel */
.ht-mobile-wrap[hidden] { display: none !important; }

/* Keep the header call link on one line */
header .ht-call { white-space: nowrap; }