/* Reusable components. Each block matches a module in js/components/. */

/* ---------- 0. Wordmark and monogram ---------- */
.wordmark {
  position: relative; display: inline-block;
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  color: var(--cream); letter-spacing: 0.14em; line-height: 1;
  font-size: var(--wm-size, 2.25rem); white-space: nowrap;
}
.wordmark__script {
  position: absolute; font-family: var(--script); text-transform: none;
  letter-spacing: 0; color: var(--brass); font-size: 1.05em; line-height: 1;
  pointer-events: none;
}
/* Option A: "incolor" under the space, tucked into the baseline */
.wordmark--a .wordmark__script { left: 50%; top: 62%; transform: translateX(-42%) rotate(-6deg); }
/* Option B: "world" across the end of LEITE */
.wordmark--b .wordmark__script { right: -0.6em; top: 30%; transform: rotate(-8deg); }
/* Option C: "the how" sweeping over the start */
.wordmark--c .wordmark__script { left: -0.35em; top: -38%; transform: rotate(-10deg); font-size: 0.9em; }

.monogram {
  position: relative; display: inline-block; width: var(--mono-size, 44px); height: var(--mono-size, 44px);
  color: var(--cream); text-decoration: none;
}
.monogram__serif {
  position: absolute; left: 18%; top: 4%;
  font-family: var(--serif); font-weight: 300; font-size: calc(var(--mono-size, 44px) * 0.92); line-height: 1;
}
.monogram__script {
  position: absolute; left: 34%; top: 14%;
  font-family: var(--script); color: var(--brass); font-size: calc(var(--mono-size, 44px) * 0.82); line-height: 1;
}
.monogram--ring { border: 1px solid var(--brass); border-radius: 50%; }
.monogram--ring .monogram__serif { left: 22%; top: 8%; font-size: calc(var(--mono-size, 44px) * 0.74); }
.monogram--ring .monogram__script { left: 38%; top: 18%; font-size: calc(var(--mono-size, 44px) * 0.62); }
.monogram--stack .monogram__serif { left: 30%; top: 2%; }
.monogram--stack .monogram__script { left: 10%; top: 26%; transform: rotate(-12deg); }

/* ---------- 3. Line reveals ---------- */
.rule-grow { display: block; height: 1px; background: var(--brass); opacity: 0.6; transform: scaleX(0); transform-origin: center; transition: transform 1.4s var(--ease); }
.rule-grow--left { transform-origin: left; }
.is-in .rule-grow, .rule-grow.is-in { transform: scaleX(1); }

.divider { display: block; width: min(420px, 80%); height: 14px; margin: 0 auto; color: var(--brass); overflow: visible; }
.divider .divider__line { stroke: currentColor; stroke-width: 0.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) 0.3s; }
.divider .divider__diamond { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0; transition: opacity 0.8s var(--ease); }
.divider .divider__dot { fill: currentColor; opacity: 0; transition: opacity 0.8s var(--ease) 1.5s; }
.divider.is-in .divider__line { stroke-dashoffset: 0; }
.divider.is-in .divider__diamond, .divider.is-in .divider__dot { opacity: 1; }

.mask-lines .line { display: block; clip-path: inset(-0.6em -2em -0.08em -2em); }
.js .mask-lines .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s); }
.js .mask-lines.is-in .line > span { transform: none; }

.js .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .fade-up.is-in, .js .is-in > .fade-up { opacity: 1; transform: none; }

/* ---------- 4. Script word writing itself in ---------- */
.script-headline { position: relative; display: inline-block; }
.script-headline__script {
  position: absolute; display: block; overflow: visible; pointer-events: none;
  width: var(--sw, 3.4em); height: 1.2em; left: var(--sx, 30%); top: var(--sy, 38%);
  transform: rotate(-6deg);
}
.script-headline__script text {
  font-family: var(--script); text-transform: none; fill: var(--cream); fill-opacity: 0;
  stroke: var(--cream); stroke-width: 0.6px; stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
.script-headline.is-in .script-headline__script text {
  transition: stroke-dashoffset 1.6s var(--ease) 0.5s, fill-opacity 0.8s var(--ease) 1.8s;
  stroke-dashoffset: 0; fill-opacity: 1;
}
/* clip-path wipe, used for HTML script words and as fallback */
.js .script-wipe { display: inline-block; clip-path: inset(-20% 100% -40% -10%); transition: clip-path 1.6s var(--ease) var(--d, 0.6s); }
.js .is-in .script-wipe, .js .script-wipe.is-in { clip-path: inset(-20% -10% -40% -10%); }

/* ---------- 5. Giant numbers ---------- */
.giant-num {
  position: relative; display: inline-block;
  font-family: var(--serif); font-weight: 300; line-height: 0.8; letter-spacing: -0.02em;
  font-size: clamp(6rem, 18vw, 16rem); color: transparent; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  -webkit-text-stroke: 1px var(--brass);
  will-change: transform;
}
.giant-num::after {
  content: attr(data-n); position: absolute; inset: 0;
  color: var(--brass); -webkit-text-stroke: 0; opacity: 0.22;
  clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease);
}
.is-in .giant-num::after, .giant-num.is-in::after { clip-path: inset(0 0 0 0); }

/* ---------- 6. Cursor glow ---------- */
.cursor-glow { display: none; }
@media (pointer: fine) {
  .cursor-glow {
    display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
    width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(176, 138, 79, 1) 0%, rgba(176, 138, 79, 0) 65%);
    opacity: 0.1; mix-blend-mode: soft-light; will-change: transform;
    transition: opacity 0.8s var(--ease);
  }
  .cursor-glow.is-hidden { opacity: 0; }
}

/* ---------- 7. Grain shimmer ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 95; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(9) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 11% { transform: translate(-5%, -8%); } 22% { transform: translate(-12%, 4%); }
  33% { transform: translate(7%, -15%); } 44% { transform: translate(-4%, 18%); } 55% { transform: translate(-14%, 7%); }
  66% { transform: translate(12%, 0); } 77% { transform: translate(3%, 12%); } 88% { transform: translate(-8%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 1. Rising steam ---------- */
.steam { position: absolute; left: var(--steam-x, 50%); top: var(--steam-y, 0); width: var(--steam-w, 120px); height: calc(var(--steam-w, 120px) * 1.6); transform: translate(-50%, -100%); pointer-events: none; }
.steam svg { width: 100%; height: 100%; overflow: visible; }
.steam path { fill: none; stroke: var(--cream); stroke-width: 5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: steam-rise 5s var(--ease) infinite; }
.steam path:nth-child(2) { animation-delay: 1.3s; animation-duration: 5.6s; }
.steam path:nth-child(3) { animation-delay: 2.6s; animation-duration: 4.6s; }
.steam path:nth-child(4) { animation-delay: 3.6s; animation-duration: 6s; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(20%) scaleX(0.7); }
  25% { opacity: 0.28; }
  70% { opacity: 0.14; }
  100% { opacity: 0; transform: translateY(-30%) scaleX(1.5); }
}

/* ---------- 2. Brass orbit rings ---------- */
.orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit__spin { transform-origin: 50% 50%; transform-box: view-box; }
.orbit.is-drawn .orbit__spin { animation: orbit-turn 120s linear infinite; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.orbit circle.ring { fill: none; stroke: var(--brass); stroke-width: 0.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(var(--i) * 0.3s); }
.orbit circle.dot { fill: var(--brass); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i) * 0.3s + 1.4s); }
.orbit.is-in circle.ring { stroke-dashoffset: 0; }
.orbit.is-in circle.dot { opacity: 1; transform: scale(1); }
.orbit__label { position: absolute; opacity: 0; transition: opacity 1s var(--ease); transition-delay: calc(var(--i) * 0.3s + 1.8s); max-width: 13em; }
.orbit.is-in .orbit__label { opacity: 1; }
.orbit__label b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--cream); line-height: 1.1; }
.orbit__label span { font-size: 0.8125rem; color: var(--taupe); }

/* ---------- 8. Signature objects ---------- */
.key-float { animation: key-float 7s ease-in-out infinite; }
@keyframes key-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }

.seal { position: relative; display: inline-block; }
.js .seal img { position: relative; transform: scale(1.15); opacity: 0; transition: transform 1s var(--ease), opacity 0.6s var(--ease); }
.seal::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 18%; border-radius: 50%;
  background: rgba(10, 6, 4, 0.7); filter: blur(22px); transform: scale(1.35); opacity: 0.2;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.js .seal.is-in img { transform: scale(1); opacity: 1; }
.seal.is-in::before { transform: scale(1); opacity: 0.85; }

.phone { position: relative; display: block; width: min(560px, 100%); margin: 0 auto; text-decoration: none; }
.phone img { width: 100%; }
/* dial: centre at 59.3% x 49.4% of the image, inner disc ~15% wide */
.phone__dial {
  position: absolute; left: 59.3%; top: 49.4%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%;
  pointer-events: none; transition: transform 1.2s var(--ease);
}
.phone__dial span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg);
  font-family: var(--serif); font-weight: 500; font-style: italic; color: var(--espresso-deep);
  font-size: clamp(0.8rem, 3.3vw, 1.45rem); letter-spacing: 0.02em; white-space: nowrap;
}
.phone:hover .phone__dial, .phone:focus-visible .phone__dial { transform: rotate(30deg); transition-duration: 0.8s; }

/* Typewriter: the video has a checkerboard baked in, so the frame crops to paper + centre */
.typewriter {
  position: relative; width: 100%; aspect-ratio: 608 / 640; overflow: hidden; container-type: inline-size;
  background: var(--espresso-deep);
}
.typewriter video, .typewriter > img {
  position: absolute; top: 0; width: 210.5%; max-width: none; height: auto; left: -53.7%;
}
.typewriter__paper {
  position: absolute; left: 5%; top: 5%; width: 90%; height: 24%;
  font-family: var(--type); color: #2a221c; font-size: 4.1cqw; line-height: 1.45; letter-spacing: 0.01em;
}
.typewriter__paper .ch { display: inline; }
.typewriter__caret { display: inline-block; width: 0.55em; height: 0.08em; background: currentColor; vertical-align: baseline; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Vinyl: record + tonearm */
.vinyl { position: relative; width: 100%; aspect-ratio: 1; }
.vinyl__record { position: absolute; left: 0; top: 9%; width: 82%; aspect-ratio: 1600 / 1591; will-change: transform; }
.vinyl__record img { width: 100%; }
.vinyl__label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -132%);
  font-family: var(--serif); font-size: clamp(0.7rem, 2.4cqw, 1.1rem); color: var(--oxblood); line-height: 1;
}
.vinyl__label .monogram { --mono-size: 1.6em; color: var(--oxblood); }
.vinyl__label .monogram__script { color: var(--oxblood); }
.vinyl__arm {
  position: absolute; left: 46%; top: -2%; width: 55%; aspect-ratio: 800 / 914;
  transform-origin: 89% 10%; transform: rotate(-48deg); transition: transform 1.4s var(--ease);
  pointer-events: none;
}
.vinyl__arm img { width: 100%; transform: scaleX(-1); }
.vinyl.is-playing .vinyl__arm { transform: rotate(-21deg); }

/* ---------- 9. Flowers ---------- */
.flower { position: absolute; z-index: 0; pointer-events: none; width: var(--fw, 34vw); max-width: var(--fmax, 460px); }
.flower img { width: 100%; animation: drift 14s ease-in-out infinite alternate; }
.flower--flip img { scale: -1 1; }
@keyframes drift { from { transform: translate(0, 0) rotate(var(--fr, 0deg)); } to { transform: translate(6px, -8px) rotate(calc(var(--fr, 0deg) + 1.5deg)); } }
@media (max-width: 767px) { .flower { width: calc(var(--fw, 34vw) * 1.25); opacity: 0.75; } }

.bean { position: absolute; width: var(--bw, 44px); pointer-events: none; z-index: 0; }
.bean img { width: 100%; transform: rotate(var(--br, 0deg)); }

/* ---------- Reduced motion: final state, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .grain { display: none; }
  .steam path { opacity: 0.2; }
  .js .fade-up, .js .mask-lines .line > span, .js .seal img, .typewriter__paper .ch { opacity: 1; transform: none; }
  .js .script-wipe { clip-path: none; }
  .rule-grow { transform: scaleX(1); }
}