/* =====================================================================
   Blue Maya — editorial "midnight satin" page.
   Fonts are self-hosted subsets (CSP stays 'self'-only).
   ===================================================================== */
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 700; font-display: swap; src: url(fonts/frank-ruhl-libre-sub.woff2) format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 400 700; font-display: swap; src: url(fonts/heebo-sub.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url(fonts/inter-sub.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-sub.woff2) format("woff2"); }

:root {
  --bg: #030820;
  --ink: #eef3ff;          /* main text */
  --soft: #b9c8ec;         /* secondary text (>=4.5:1 on the dark satin) */
  --blue: #4d8dff;
  --blue-deep: #1b3fc9;
  --panel-ink: #0b1640;    /* text inside the white a11y menu */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: hidden; }
@media (min-width: 1800px) and (min-height: 1000px) { html { font-size: 20px; } }
@media (min-width: 2400px) and (min-height: 1300px) { html { font-size: 24px; } }
body {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------------- background ---------------- */
.bg-blur {
  position: fixed; inset: -40px; z-index: -6;
  background: url("background-blur.webp") center / cover no-repeat; filter: blur(22px);
}
.bg-satin {
  position: fixed; inset: -3%; z-index: -5;
  background: url("background.webp") center / cover no-repeat;
  translate: var(--bgx, 0) var(--bgy, 0);
  transition: translate 1.2s cubic-bezier(.22,1,.36,1);
  animation: satin 40s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 3/4) { .bg-satin { background-image: url("background-portrait.webp"); } }
@keyframes satin { from { transform: scale(1.02); } to { transform: scale(1.1) rotate(.6deg); } }
/* darken behind the text column (right side in RTL) */
.bg-satin::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgb(2 5 22 / .62), rgb(2 5 22 / .15) 55%, rgb(2 5 22 / .3)),
    linear-gradient(to top, rgb(2 5 22 / .7), transparent 30%);
}
/* a slow band of light travelling across the satin */
.bg-sheen {
  position: fixed; inset: 0; z-index: -4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgb(120 170 255 / .10) 47%, rgb(225 236 255 / .16) 50%, rgb(120 170 255 / .10) 53%, transparent 62%);
  background-size: 260% 100%;
  animation: sheen 11s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
/* soft light following the cursor (desktop only, enabled by app.js) */
.bg-spot {
  position: fixed; inset: 0; z-index: -3; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgb(70 130 255 / .22), transparent 62%);
  transition: opacity .8s ease;
}
html.has-pointer .bg-spot { opacity: 1; }
.bg-grain {
  position: fixed; inset: -50%; z-index: -2; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: url("grain.webp") repeat;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------------- layout ---------------- */
.stage {
  flex: 1 0 auto; display: grid; align-items: center; justify-content: center;
  grid-template-columns: minmax(0, 31rem) auto;
  grid-template-areas: "copy visual";            /* RTL: text on the right, photo on the left */
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: 4.5rem clamp(1.5rem, 5vw, 4rem) 3rem;
}
.copy { grid-area: copy; text-align: right; }
.visual { grid-area: visual; }

/* ---------------- photo ---------------- */
.visual {
  position: relative; margin: 0;
  width: min(25rem, calc((100dvh - 13rem) * 508 / 903));
  aspect-ratio: 508 / 903;
}
.frame {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: .5rem;
  background: #0a1650;
  box-shadow: 0 50px 90px -35px rgb(0 0 0 / .9), 0 0 0 1px rgb(220 232 255 / .28), 0 0 80px -10px rgb(60 120 255 / .35);
  transform: perspective(1400px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
/* thin offset outline behind the photo — magazine detail */
.hairline {
  position: absolute; top: 1rem; right: 1rem; bottom: -1rem; left: -1rem; z-index: -1;
  border: 1px solid rgb(205 222 255 / .35); border-radius: .5rem; pointer-events: none;
}
.caption {
  position: absolute; left: -1rem; right: 1rem; bottom: -2.6rem;
  display: flex; justify-content: space-between;
  font: 500 .68rem/1 Inter, system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--soft);
}
.photo { position: absolute; inset: 0; }
.photo .slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  opacity: 0; transition: opacity 1.3s ease;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.photo .slide.is-active { opacity: 1; }
.photo .slide.focus-top { object-position: center 12%; }
.photo .slide.focus-bottom { object-position: center 75%; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1.5%); } }
/* blue grade + bottom fade so the photo melts into the page */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(3 8 32 / .55), transparent 35%), linear-gradient(200deg, rgb(90 140 255 / .18), transparent 50%);
}
.glare {
  position: absolute; inset: -30%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / .16) 50%, transparent 58%);
  transform: translateX(-100%); animation: glare 8s ease-in-out 2.5s infinite;
}
@keyframes glare { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }

/* story-style progress bars (2+ photos) */
.bars { position: absolute; top: .6rem; left: .8rem; right: .8rem; z-index: 3; display: flex; gap: 4px; }
.bars[hidden] { display: none; }
.bar { flex: 1; height: 24px; padding: 11px 0; border: 0; background: none; cursor: pointer; }  /* 24px tap target */
.bar i { display: block; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .32); overflow: hidden; }
.bar i::after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: right; }
.bar.done i::after, .bar.hold i::after { transform: scaleX(1); }
.bar.run i::after { animation: fillbar var(--dur, 5.5s) linear forwards; }
@keyframes fillbar { to { transform: scaleX(1); } }
.bar:focus-visible { outline-offset: 0; }

/* ---------------- text ---------------- */
.eyebrow {
  margin: 0; text-align: right;
  font: 600 .7rem/1 Inter, system-ui, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: var(--soft);
}
.eyebrow i { font-style: normal; font-size: .5rem; color: var(--blue); margin: 0 .9em; vertical-align: .15em; }
.title { margin: 0; font-weight: 400; }
.title-en {
  display: block; text-align: right;
  font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400;
  font-size: clamp(3.6rem, 7.6vw, 6.8rem); line-height: .95; letter-spacing: -.012em; color: #f4f7ff;
  text-shadow: 0 10px 40px rgb(0 0 0 / .45);
}
.title-en em {
  font-style: italic; padding-right: .08em;
  background: linear-gradient(100deg, #7fa9ff, #3f78ff 30%, #eef4ff 50%, #3f78ff 70%, #7fa9ff);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }
.title-he {
  display: block; margin-top: .55rem;
  font: 700 clamp(1.35rem, 2.3vw, 1.9rem)/1.2 "Frank Ruhl Libre", "David", serif; letter-spacing: .04em; color: #cfdcff;
}
.rule { display: flex; align-items: center; gap: .8rem; width: min(15rem, 70%); margin: 1.5rem 0 1.3rem auto; }
.rule span { flex: 1; height: 1px; background: linear-gradient(to left, rgb(210 225 255 / .7), rgb(210 225 255 / .05)); }
.rule span:last-child { background: linear-gradient(to right, rgb(210 225 255 / .7), rgb(210 225 255 / .05)); }
.rule b { font-weight: 400; font-size: .8rem; color: #9cc0ff; }
.bio { margin: 0 0 0 auto; max-width: 27rem; font-size: 1.12rem; line-height: 1.75; color: #dce5fb; }
.bio span:first-child { color: #fff; font-weight: 500; }
.bio span { display: block; text-wrap: balance; }
.tagline {
  margin: 1.4rem 0 0 auto; padding-right: 1rem; border-right: 2px solid rgb(120 170 255 / .55); max-width: 27rem;
  font: 700 1.32rem/1.55 "Frank Ruhl Libre", "David", serif; letter-spacing: .01em;
  color: #bcd3ff; text-shadow: 0 0 18px rgb(80 140 255 / .55);
}
.tagline span { display: block; }
html.a11y-contrast .tagline { color: #fff; text-shadow: none; }

/* ---------------- pay ---------------- */
.pay { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.btn-pay {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1.1rem;
  height: 4rem; padding-inline: 2.2rem .55rem; border-radius: 999px;
  color: #fff; text-decoration: none; font: 600 1.14rem/1 Heebo, system-ui, sans-serif; letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 55%),
    linear-gradient(120deg, #4a86ff, #1f47d6 55%, #10279a);
  border: 1px solid rgb(220 232 255 / .6);
  box-shadow: 0 22px 50px -18px rgb(40 100 255 / .95), inset 0 -10px 24px rgb(5 15 80 / .45);
  translate: var(--btx, 0) var(--bty, 0);
  transition: translate .35s cubic-bezier(.22,1,.36,1), filter .2s ease;
}
.btn-pay::before {   /* shimmer */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .38) 50%, transparent 70%);
  transform: translateX(130%); animation: btnsweep 4.5s ease-in-out 2.4s infinite;
}
@keyframes btnsweep { 0% { transform: translateX(130%); } 40%, 100% { transform: translateX(-130%); } }
.btn-pay:hover { filter: brightness(1.1); }
.btn-arrow {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--blue-deep); box-shadow: 0 4px 14px rgb(0 10 60 / .35);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.btn-arrow svg { width: 1.25rem; height: 1.25rem; }
.btn-pay:hover .btn-arrow { transform: translateX(-5px); }
body.play .btn-pay { animation: glow 3.2s ease-in-out 2.4s infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 22px 50px -18px rgb(40 100 255 / .95), inset 0 -10px 24px rgb(5 15 80 / .45), 0 0 0 0 rgb(120 170 255 / 0); }
  50%      { box-shadow: 0 22px 60px -14px rgb(70 130 255 / 1), inset 0 -10px 24px rgb(5 15 80 / .45), 0 0 0 7px rgb(120 170 255 / .12); }
}
.note { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--soft); }
.note svg { width: .95em; height: .95em; flex: none; color: #9cc0ff; }

/* ---------------- ticker + footer ---------------- */
.ticker {
  flex: none; overflow: hidden; padding: .6rem 0;
  border-block: 1px solid rgb(200 220 255 / .13);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee 48s linear infinite; }
.ticker span { font: italic 400 1.05rem/1 "Instrument Serif", serif; letter-spacing: .08em; color: rgb(220 232 255 / .72); }
.ticker i { font-style: normal; font-size: .6rem; color: var(--blue); margin: 0 1.8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
footer {
  flex: none; padding: .6rem 1.25rem max(.8rem, env(safe-area-inset-bottom)); text-align: center;
  font-size: .72rem; color: var(--soft);
}
footer .legal { display: inline; }
footer .legal::before { content: " · "; }
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; padding-block: .2rem; }

/* ---------------- entrance ---------------- */
.rv { opacity: 0; }
body.play .rv { animation: reveal 1.2s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
@keyframes reveal { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
body.play .visual .frame { animation: unveil 1.6s cubic-bezier(.7,0,.2,1) .1s both; }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round .5rem); } to { clip-path: inset(0 0 0 0 round .5rem); } }
body.play .hairline { animation: lineIn 1.4s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes lineIn { from { opacity: 0; transform: translate(-12px, 12px); } to { opacity: 1; transform: none; } }
@keyframes unveilM { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.r1 { --d: .25s; } .r2 { --d: .4s; } .r3 { --d: .55s; } .r4 { --d: .7s; } .r5 { --d: .85s; } .r6 { --d: 1s; }

/* ---------------- phones (portrait): magazine cover ---------------- */
@media (max-width: 820px) and (orientation: portrait), (max-width: 620px) {
  .stage {
    grid-template-columns: 1fr; grid-template-areas: "visual" "copy";
    gap: 0; padding: 0 0 1.2rem; align-content: start;
  }
  .visual { width: 100%; aspect-ratio: auto; height: 48dvh; }
  /* the photo dissolves into the satin instead of ending on a hard edge */
  .frame {
    border-radius: 0; box-shadow: none; transform: none; background: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgb(0 0 0 / .6) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, rgb(0 0 0 / .6) 75%, transparent 100%);
  }
  .photo::after { background: linear-gradient(200deg, rgb(90 140 255 / .18), transparent 50%); }
  .photo .slide { object-position: center 22%; }
  .hairline, .caption { display: none; }
  body.play .visual .frame { animation-name: unveilM; }
  .copy { position: relative; z-index: 1; margin-top: -3.4rem; padding: 0 1.25rem; text-align: center; }
  .eyebrow, .title-en { text-align: center; }
  .eyebrow { font-size: .62rem; }
  .title { margin-top: .7rem; }
  .title-en { font-size: clamp(3rem, 15vw, 4.2rem); }
  .title-he { font-size: 1.3rem; margin-top: .35rem; }
  .rule { margin: 1rem auto .9rem; }
  .bio { margin-inline: auto; font-size: 1.02rem; line-height: 1.65; }
  .tagline { margin: 1rem auto 0; padding: 0; border: 0; font-size: 1.15rem; }
  .pay { margin-top: 1.3rem; align-items: center; }
  .btn-pay { height: 3.7rem; }
  .bg-satin::after { background: linear-gradient(to top, rgb(2 5 22 / .7), rgb(2 5 22 / .35)); }
}
/* short phones (iPhone SE): smaller cover, no ticker */
@media (orientation: portrait) and (max-height: 700px) {
  .visual { height: 40dvh; }
  .copy { margin-top: -2.6rem; }
  .title-en { font-size: 2.8rem; }
  .title-he { font-size: 1.15rem; }
  .rule { margin: .7rem auto .6rem; }
  .bio { font-size: .9rem; line-height: 1.55; }
  .tagline { font-size: 1rem; margin-top: .55rem; }
  .pay { margin-top: .9rem; gap: .5rem; }
  .btn-pay { height: 3.4rem; }
  .ticker { display: none; }
}
/* phones held sideways: photo beside text */
@media (orientation: landscape) and (max-height: 520px) {
  .stage { padding: .6rem 1.5rem .4rem; gap: 2rem; }
  footer { padding-block: .3rem max(.5rem, env(safe-area-inset-bottom)); }
  .visual { width: calc(84dvh * 508 / 903); }
  .hairline, .caption { display: none; }
  .title-en { font-size: 3rem; }
  .title-he { font-size: 1.2rem; }
  .rule { margin: .7rem 0 .6rem auto; }
  .bio { font-size: .92rem; line-height: 1.55; }
  .tagline { font-size: 1rem; margin-top: .5rem; }
  .pay { margin-top: .8rem; }
  .btn-pay { height: 3.3rem; }
  .ticker { display: none; }
}

/* ---------------- accessibility menu ---------------- */
.a11y { position: fixed; z-index: 20; top: max(.75rem, env(safe-area-inset-top)); left: .75rem; direction: rtl; }
.a11y-toggle {
  width: 44px; height: 44px; padding: 0; border: 1px solid rgb(220 232 255 / .7); border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgb(15 35 130 / .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -6px rgb(0 10 60 / .7);
}
.a11y-toggle svg { width: 24px; height: 24px; }
.a11y-panel {
  position: absolute; top: calc(100% + .5rem); left: 0; width: max-content; min-width: 12rem;
  padding: .6rem; border-radius: 1rem; background: #fff; color: var(--panel-ink);
  box-shadow: 0 18px 40px -12px rgb(0 5 40 / .6); display: grid; gap: .3rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel :focus-visible { outline-color: var(--panel-ink); outline-offset: 2px; }
.a11y-title { margin: 0 .4rem .2rem; font-weight: 700; font-size: 1rem; }
.a11y-opt, .a11y-link {
  display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .8rem;
  border: 1px solid #cfd9ef; border-radius: .7rem; background: #fff; color: var(--panel-ink);
  font: 500 1rem/1.2 Heebo, system-ui, sans-serif; text-align: start; cursor: pointer;
}
.a11y-opt::before {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: .3rem; border: 2px solid var(--panel-ink);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; line-height: 1; color: #fff;
}
.a11y-opt[aria-pressed="true"] { background: #e3ecff; border-color: var(--blue-deep); }
.a11y-opt[aria-pressed="true"]::before { content: "✓"; background: var(--blue-deep); border-color: var(--blue-deep); }
.a11y-link { text-decoration: underline; border-style: dashed; }

/* ---------------- reduced motion / a11y choices ---------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-grain, .bg-sheen, .glare { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; }
}
html.a11y-still .bg-grain, html.a11y-still .bg-sheen, html.a11y-still .glare, html.a11y-still .bg-spot { display: none; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-still .rv { opacity: 1; }
html.a11y-still .bg-satin, html.a11y-still .btn-pay { translate: none; }
html.a11y-still .frame { transform: none; }

html.a11y-big { font-size: 125%; }
@media (min-width: 1800px) and (min-height: 1000px) { html.a11y-big { font-size: 25px; } }
@media (min-width: 2400px) and (min-height: 1300px) { html.a11y-big { font-size: 30px; } }

html.a11y-contrast .bg-satin::after { background: rgb(2 5 22 / .9); }
html.a11y-contrast .bg-sheen, html.a11y-contrast .bg-spot, html.a11y-contrast .bg-grain { display: none; }
html.a11y-contrast .copy *, html.a11y-contrast .note, html.a11y-contrast footer, html.a11y-contrast .caption { color: #fff; text-shadow: none; }
html.a11y-contrast .title-en em { background: none; color: #bcd3ff; -webkit-text-fill-color: #bcd3ff; }
html.a11y-contrast .btn-pay { background: #0b2a8f; border: 2px solid #fff; }
html.a11y-contrast .btn-pay::before { display: none; }
html.a11y-contrast .btn-arrow { color: #0b2a8f; }