/*
 * The home page (front-page.php, design B). Loaded only there, on top of main.css.
 * Same colours as A, used bolder: deep carbon-violet sections, huge type, pinned scroll scenes driven by --p (scrub.ts).
 * Without scrub (reduced motion, or before scripts run) every section is a normal, readable block.
 */

.b { overflow-x: clip; }

/* On B the header is always a solid tissue bar (over the photo it was hard to read), and it keeps one size,
   so the pinned scenes below can start exactly under it (--hdr, measured by scrub.ts). */
:root { --hdr: 64px; }
.b-page .top { padding-block: 10px; }
.b-page .top .logo__mark { width: 34px; height: 38px; }

/* ---------- Hero: full-screen photo that closes into a framed portrait as you scroll ---------- */
.b-hero { position: relative; }
.scrub .b-hero { height: 190vh; }
.b-hero__stage { position: relative; height: calc(100vh - var(--hdr)); min-height: 520px; overflow: hidden; }
.scrub .b-hero__stage { position: sticky; top: var(--hdr); }
.b-hero__photo { position: absolute; inset: 0; --q: var(--p, 0);
  clip-path: inset(calc(var(--q) * 11%) calc(var(--q) * 6%) calc(var(--q) * 11%) calc(var(--q) * 52%) round calc(var(--q) * 6px)); }
[dir="rtl"] .b-hero__photo { clip-path: inset(calc(var(--q) * 11%) calc(var(--q) * 52%) calc(var(--q) * 11%) calc(var(--q) * 6%) round calc(var(--q) * 6px)); }
.b-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%;
  transform: scale(calc(1.12 - var(--q, 0) * .12)); transform-origin: 75% 40%; }
/* Persian: the photo is mirrored so the woman stands opposite the right-aligned text. */
[dir="rtl"] .b-hero__photo img { transform-origin: 50% 40%; transform: scaleX(-1) scale(calc(1.12 - var(--q, 0) * .12)); }
.b-hero__text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: 4vh 7vh; }
.b-hero__kicker { font-size: 17px; color: var(--carbon); margin-bottom: 14px; opacity: calc(1 - var(--p, 0) * 3); }
.b-hero__title { font-size: clamp(48px, min(9.4vw, 14.5vh), 168px); line-height: .98; font-weight: 500; letter-spacing: -.025em; margin: 0 0 34px; max-width: 9ch; }
:lang(fa) .b-hero__title { letter-spacing: 0; line-height: 1.2; font-size: clamp(40px, min(7.6vw, 11.5vh), 132px); }
.b-line { display: block; overflow: hidden; padding-bottom: .06em; }
.b-line > span { display: block; animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
.b-line + .b-line > span { animation-delay: .12s; }
@keyframes rise { from { transform: translateY(105%); } }
.b-hero__go { display: flex; flex-wrap: wrap; gap: 12px; animation: fadein .8s ease .5s both; }
.b-hero__go .btn--ghost { background: rgba(255, 255, 255, .72); }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } }
.b-hero__slip { position: absolute; z-index: 3; inset-inline-end: 6vw; bottom: 9vh; inset-inline-start: auto;
  opacity: calc(1 - var(--p, 0) * 2.5); }
.b-hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 26px; margin: 0; font-size: 13px; color: var(--carbon);
  display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% 0; opacity: calc(1 - var(--p, 0) * 6); }
.b-hero__scroll span { width: 1.5px; height: 38px; background: linear-gradient(var(--violet) 50%, transparent 50%) 0 0 / 100% 200%;
  animation: drip 1.6s ease-in-out infinite; }
@keyframes drip { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* ---------- Statement: one sentence that lights up word by word ---------- */
.b-say { background: var(--carbon); color: var(--tissue); position: relative; z-index: 2; }
.scrub .b-say { height: 220vh; }
.b-say__stage { min-height: calc(100vh - var(--hdr)); display: flex; align-items: center; padding-block: 60px; }
.scrub .b-say__stage { position: sticky; top: var(--hdr); }
.b-say__text { font: 500 clamp(32px, 4.6vw, 72px)/1.18 var(--f-head); letter-spacing: -.01em; margin: 0; max-width: 22ch; }
:lang(fa) .b-say__text { letter-spacing: 0; line-height: 1.55; font-size: clamp(28px, 3.8vw, 58px); max-width: 26ch; }
/* Every word is fully lit by 85% of the scroll, whatever the sentence length (--w = number of words). */
.scrub .b-say__text span { opacity: clamp(.5, calc((var(--p, 0) * (var(--w, 24) + 2) / .85 - var(--i)) * .6 + .5), 1); transition: opacity .15s linear; }
.b-say__text span:nth-child(4), .b-say__text span:nth-child(5), .b-say__text span:nth-child(6), .b-say__text span:nth-child(7) { color: #C9B6F0; }

/* ---------- Booking: same as A, on the tissue page ---------- */
.b .book { padding-top: 110px; }

/* ---------- Work: the page scrolls down, the photos move sideways ---------- */
.b-work { background: var(--tissue); }
.scrub .b-work { height: 320vh; }
.b-work__stage { padding-block: 80px; overflow: hidden; }
.scrub .b-work__stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); display: flex; flex-direction: column; justify-content: center; padding-block: 3vh; }
.b-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; margin-bottom: 36px; flex-wrap: wrap; }
.b-work__head h2 { font-size: clamp(40px, min(7vw, 11vh), 120px); line-height: .95; margin: 0; letter-spacing: -.02em; }
:lang(fa) .b-work__head h2 { letter-spacing: 0; line-height: 1.2; }
.b-work__head p { max-width: 30em; color: var(--muted); margin: 0; }
.b-work__track { display: flex; gap: 28px; padding-inline: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); will-change: transform; }
.scrub .b-work__track { overflow: visible; }
.b-card { margin: 0; flex: none; width: clamp(240px, 26vw, 400px); }
.b-card img { width: 100%; aspect-ratio: 4 / 5; max-height: 54vh; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.b-card:hover img { transform: scale(1.03); }
.b-card--1 { margin-top: 40px; }
.b-card--2 { margin-top: -10px; }
.b-card figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 12px; font-size: 15px; color: var(--carbon); }
.b-card__n { font-size: 13px; color: var(--violet); font-variant-numeric: tabular-nums; }
html:not(.scrub) .b-work__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
html:not(.scrub) .b-card { scroll-snap-align: start; }

/* ---------- How it goes: one pinned screen, the four steps take turns ---------- */
.b-how { background: var(--carbon); color: var(--tissue); }
.scrub .b-how { height: calc(var(--n) * 90vh + 10vh); }
.b-how__stage { padding-block: 90px; }
.scrub .b-how__stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); display: flex; align-items: center; padding-block: 0; }
.b-how h2 { color: var(--tissue); font-size: clamp(34px, min(5vw, 8vh), 80px); margin-bottom: 14px; }
.b-how__bar { height: 1.5px; background: #3B2F4C; margin-bottom: 4vh; }
.b-how__bar span { display: block; height: 100%; background: #C9B6F0; transform-origin: left; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .b-how__bar span { transform-origin: right; }
.b-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.b-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.b-step__photo img { width: 100%; aspect-ratio: 4 / 3; max-height: 50vh; object-fit: cover; }
.b-step__n { display: block; font: 500 clamp(64px, min(11vw, 16vh), 170px)/.8 var(--f-head); color: transparent; -webkit-text-stroke: 1.5px #C9B6F0; margin-bottom: 20px; }
:lang(fa) .b-step__n { font-family: "Noto Sans Arabic", sans-serif; font-weight: 300; }
.b-step h3 { color: var(--tissue); font-size: clamp(28px, 3vw, 44px); }
.b-step p { color: #CFC6DC; font-size: 18px; max-width: 28em; }
.scrub .b-how__steps { display: grid; }
.scrub .b-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.scrub .b-step.is-on { opacity: 1; visibility: visible; }
.scrub .b-step .b-step__photo img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.scrub .b-step.is-on .b-step__photo img { transform: none; }
.scrub .b-step .b-step__text { transform: translateY(24px); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.scrub .b-step.is-on .b-step__text { transform: none; }
.b-how__more { margin: 4vh 0 0; }
.b-how .btn--ghost { color: var(--tissue); box-shadow: inset 0 0 0 1.5px var(--tissue); }
.b-how .btn--ghost:hover { background: var(--tissue); color: var(--carbon); }

/* ---------- Cursor over the gallery ---------- */
.b-cursor { position: fixed; z-index: 50; top: 0; left: 0; pointer-events: none; }
.b-cursor span { display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: var(--violet); color: #fff; font-weight: 600; font-size: 14px; transform: scale(0); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.b-cursor.is-on span { transform: scale(1); }
.scrub .b-card { cursor: none; }

/* The footer follows the dark How section without a gap. */
.b + .b-cursor + .foot, .b ~ .foot { border-top: 1px solid #3B2F4C; }

@media (max-width: 1000px) {
  .b-hero__title { max-width: 8ch; }
  .b-hero__photo { clip-path: inset(calc(var(--q) * 6%) calc(var(--q) * 5%) calc(var(--q) * 34%) calc(var(--q) * 5%) round calc(var(--q) * 6px)); }
  [dir="rtl"] .b-hero__photo { clip-path: inset(calc(var(--q) * 6%) calc(var(--q) * 5%) calc(var(--q) * 34%) calc(var(--q) * 5%) round calc(var(--q) * 6px)); }
  .b-hero__photo img { object-position: 74% 30%; }
  .b-hero__text { justify-content: flex-start; padding-top: 6vh; }
  .b-hero__slip { inset-inline-end: 16px; bottom: 22px; width: 240px; }
  .b-hero__scroll { display: none; }
  .b-step { grid-template-columns: 1fr; gap: 20px; }
  .b-step__n { font-size: 72px; margin-bottom: 8px; }
  .b-step p { font-size: 16px; }
  .scrub .b-how { height: calc(var(--n) * 100vh); }
  .b-card { width: 72vw; }
}
@media (max-width: 640px) {
  /* Phone: text on the tissue colour at the top, the photo fills the lower part and closes in as you scroll. */
  .b-hero__stage { background: var(--tissue); }
  .b-hero__photo { top: 57%; clip-path: inset(0 calc(var(--q) * 8%) calc(var(--q) * 10%) calc(var(--q) * 8%) round calc(var(--q) * 6px)) !important; }
  .b-hero__photo img { object-position: 74% 30%; }
  .b-hero__text { justify-content: flex-start; padding-top: 28px; padding-bottom: 0; }
  .b-hero__title { margin-bottom: 22px; font-size: 52px; max-width: none; }
  :lang(fa) .b-hero__title { font-size: 40px; }
  .b-hero__go .btn { padding-inline: 18px; }
  /* The slip sits on the side away from the woman (she is mirrored in Persian, so that is the start side in both). */
  .b-hero__slip { width: 210px; padding: 14px 16px 12px; bottom: 18px; inset-inline-end: auto; inset-inline-start: 16px; }
  .b-hero__slip .slip__when { font-size: 16px; }
  .b-hero__go .btn { min-height: 44px; }
  .b-step__photo img { aspect-ratio: 16 / 10; }
}