/* TeaPilot — teaser page.
   Self-hosted fonts (SIL OFL, see assets/fonts/OFL-*.txt): no third-party requests,
   no cookies, no scripts. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
}
/* Only for the macron in "Kakuzō". */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
}

:root {
  --night: #0b1310;
  --night-2: #101c17;
  --ink: #efe7d6;
  --ink-soft: #b9b2a2;
  --ink-faint: #7f7b70;
  --gold: #d6b36e;
  --gold-deep: #b38b4c;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Warm lamp-light over dark leaves, a vignette, and paper grain. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 50% 26%, rgba(214, 150, 74, .13), transparent 72%),
    radial-gradient(ellipse 80% 55% at 50% 105%, rgba(58, 112, 88, .2), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--night) 100%);
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Brand ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 6vh, 60px);
  color: var(--gold);
}
.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
}
.brand__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .48em;
  margin-right: -.48em; /* optically re-centre the tracked caps */
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.scene {
  width: min(80vw, 380px);
  margin: clamp(4px, 2.5vh, 28px) 0 0;
}
.scene svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(4px, 1.5vh, 14px) 0 0;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: clamp(24px, 6vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.eyebrow::after {
  background: linear-gradient(270deg, transparent, var(--gold-deep));
  margin-left: -.42em;
}

.title {
  margin: .32em 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.55rem, 7.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  background: linear-gradient(100deg, #ecd199 0%, #d6b36e 45%, #b8894a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 .08em .06em; /* keep italic overhang inside the clip box */
}

.lede {
  max-width: 34ch;
  margin: clamp(18px, 3vh, 26px) 0 0;
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ---------- Origins ribbon ---------- */

.origins {
  width: min(100%, 860px);
  margin-top: clamp(36px, 7vh, 64px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.origins__track {
  display: flex;
  width: max-content;
  animation: drift 70s linear infinite;
}
.origins__list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.origins__list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.12rem;
  color: var(--ink-faint);
}
.origins__list li::after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 22px;
  transform: rotate(45deg);
  background: var(--gold-deep);
  opacity: .7;
}

/* ---------- Quote ---------- */

.quote {
  max-width: 40ch;
  margin: clamp(44px, 8vh, 84px) 0 0;
  text-align: center;
}
.quote blockquote {
  margin: 0;
}
.quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
}
.quote figcaption {
  margin-top: 14px;
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.quote cite {
  font-style: normal;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: clamp(48px, 9vh, 88px) 0 max(28px, env(safe-area-inset-bottom));
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-footer__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* ---------- Motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 1.6s var(--ease-out) forwards;
}
.d1 { animation-delay: .1s; }
.d2 { animation-delay: 1.3s; }
.d3 { animation-delay: 1.55s; }
.d4 { animation-delay: 1.9s; }
.d5 { animation-delay: 2.3s; }
.d6 { animation-delay: 2.6s; }

@keyframes reveal {
  to { opacity: 1; transform: none; }
}

.enso path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.6s cubic-bezier(.55, .08, .25, 1) .25s forwards;
}
.enso .enso__dry { animation-duration: 2.2s; animation-delay: .6s; }
.enso .enso__edge { animation-duration: 1.4s; animation-delay: 1.1s; }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { opacity: .65; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.03); }
}

/* A single dash travels up each path: dash .46, gap 2 (> path length 1),
   so only one segment is ever visible. */
.wisp {
  stroke-dasharray: .46 2;
  stroke-dashoffset: .46;
  animation: rise 6.2s linear infinite;
}
.wisp--2 { animation-duration: 7.2s; animation-delay: -2.4s; }
.wisp--3 { animation-duration: 5.6s; animation-delay: -4.1s; }

@keyframes rise {
  from { stroke-dashoffset: .46; }
  to { stroke-dashoffset: -1; }
}

.steam {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: skewX(-4deg); }
  to { transform: skewX(4deg); }
}

.ripple {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ripple 8s var(--ease-out) 3s infinite;
}
.ripple--late { animation-delay: 4.1s; }

@keyframes ripple {
  0% { opacity: 0; transform: scale(.06); }
  6% { opacity: .75; }
  45% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes drift {
  to { transform: translateX(-50%); }
}

@media (max-width: 480px) {
  .brand { gap: 12px; }
  .brand__name { font-size: .74rem; letter-spacing: .42em; margin-right: -.42em; }
  .eyebrow { letter-spacing: .34em; gap: 14px; }
  .origins__list li { font-size: 1.02rem; }
  .origins__list li::after { margin: 0 16px; }
  .site-footer { letter-spacing: .16em; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .enso path { stroke-dashoffset: 0; }
  .wisp { stroke-dasharray: none; }
  .origins { -webkit-mask-image: none; mask-image: none; }
  .origins__track { width: 100%; }
  .origins__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .origins__list li:last-child::after,
  .origins__list[aria-hidden="true"] { display: none; }
}