/* The home page of eruditapp.com: the story of Érudit (index.html), in the
   app's colours — the deep green of the app, its gold, and the cream of the
   creator's mockups for the story itself. The shared-link pages keep
   share.css. */
:root {
  --green: #020a04;
  --green-2: #0e2417;
  --gold: #e8c988;
  --gold-soft: rgba(232, 201, 136, 0.78);
  --cream: #fbf1d8;
  --cream-2: #fde8b9;
  --ink: #263e0f;
  --ink-soft: #3d4a2c;
  --serif: 'Playfair Display', Georgia, serif;
  --text: 'Cormorant Garamond', Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
  /* How much of the story's cream page shows at the foot of the opening. */
  --peek: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--green); scroll-behavior: smooth; }
body { background: var(--green); color: var(--gold-soft); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
bdi { unicode-bidi: isolate; }

/* One language at a time: what is not the page's language is not shown.
   Without the script, French. */
html[lang='fr'] [data-l]:not([data-l~='fr']),
html[lang='en'] [data-l]:not([data-l~='en']),
html[lang='ar'] [data-l]:not([data-l~='ar']) { display: none !important; }

/* Arabic: its own typefaces, a little larger. */
html[lang='ar'] { --serif: 'Amiri', serif; --text: 'Amiri', serif; --sans: 'Amiri', serif; }
html[lang='ar'] body { font-size: 18px; }

/* --- The bar ----------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: 60px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(2, 10, 4, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 201, 136, 0.12);
}
.bar-mark svg { width: 92px; height: 35px; }
.langs { display: flex; gap: 4px; }
.langs button {
  font: 600 13px/1 var(--sans); letter-spacing: 0.08em; color: var(--gold-soft);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.langs button[lang='ar'] { font-family: 'Amiri', serif; font-size: 15px; letter-spacing: 0; }
.langs button[aria-pressed='true'] { color: var(--gold); border-color: rgba(232, 201, 136, 0.45); }

/* --- 1. The opening ------------------------------------------------------------- */
.hero {
  min-height: 100svh; padding: 110px 24px calc(64px + var(--peek));
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(14, 36, 23, 0.95), rgba(2, 10, 4, 0) 75%), var(--green);
}
/* The opening stays in place while the story's cream page rises over it
   (histoire.js sets --rise, 0 to 1, as the page covers it): it darkens and
   its words drift up a little. */
.hero { position: sticky; top: 0; z-index: 0; overflow: hidden; }
.hero > :not(.pages) { position: relative; z-index: 1; transform: translateY(calc(var(--rise, 0) * -60px)); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--green); opacity: calc(var(--rise, 0) * 0.7); }
/* A halo of the green around the words, so they stay legible when a page
   falls behind them. */
.hero-tag, .hero-sub, .launch, .down { text-shadow: 0 0 14px rgba(2, 10, 4, 0.95), 0 0 4px rgba(2, 10, 4, 0.9); }
.hero-mark { width: min(560px, 82vw); aspect-ratio: 686.7 / 257.7; height: auto; filter: drop-shadow(0 6px 24px rgba(2, 10, 4, 0.9)); }

/* The falling pages (as the app's FlyingPagesBackground, from
   assets/feuilles-qui-tombent_1.html): each page falls with a drift
   (« chute ») while tumbling in 3D (« culbute »). */
.pages { position: absolute; inset: 0; z-index: 0; perspective: 1700px; perspective-origin: 50% 36%; pointer-events: none; }
.hero.paused .feuille, .hero.paused .page { animation-play-state: paused; }
.feuille { position: absolute; top: -30vh; transform-style: preserve-3d; will-change: transform; animation: chute linear infinite; }
.page { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: culbute linear infinite; }
.papier {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 9% 10% 8% 11%; direction: ltr;
  font-family: 'Cormorant Garamond', Georgia, serif;
  background:
    radial-gradient(60% 45% at 25% 20%, rgba(255, 246, 214, 0.5), transparent 60%),
    radial-gradient(55% 50% at 78% 68%, rgba(150, 110, 60, 0.28), transparent 62%),
    radial-gradient(70% 60% at 60% 30%, rgba(210, 178, 120, 0.32), transparent 65%),
    radial-gradient(125% 120% at 42% 40%, #f0e2ba 0%, #e6d3a4 40%, #d3b97e 68%, #b8955a 86%, #8f6c3c 100%);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.46), inset 0 0 30px rgba(90, 60, 25, 0.3);
}
.papier::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(115% 115% at 50% 48%, transparent 55%, rgba(90, 58, 20, 0.18) 78%, rgba(60, 36, 12, 0.42) 100%); }
.papier::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(102deg, rgba(70, 45, 15, 0.22) 0%, rgba(255, 248, 224, 0.12) 24%, rgba(255, 255, 255, 0) 50%, rgba(110, 78, 38, 0.14) 76%, rgba(60, 38, 14, 0.28) 100%); }
.papier.dos { transform: rotateY(180deg); }
.texte { position: relative; z-index: 1; height: 100%; color: #4a3117; line-height: 1.42; }
.chap { text-align: center; font-variant: small-caps; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.7em; color: #3a2410; }
.texte p { text-align: justify; text-indent: 1.1em; margin: 0 0 0.12em; hyphens: auto; -webkit-hyphens: auto; }
.dropcap::first-letter { float: left; font-size: 3.1em; line-height: 0.72; padding: 0.02em 0.08em 0 0; font-weight: 700; color: #5a2f14; }
.folio { position: absolute; bottom: 2.5%; font-size: 0.9em; opacity: 0.6; }
.folio.left { left: 11%; }
.folio.right { right: 10%; }
.fox { position: absolute; border-radius: 50%; z-index: 2; background: radial-gradient(circle, rgba(120, 72, 30, 0.5), rgba(120, 72, 30, 0) 70%); }
@keyframes chute { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(var(--derive, 4vw), 136vh, 0); } }
@keyframes culbute {
  0% { transform: rotateX(0) rotateY(0) rotateZ(var(--tilt, 0deg)); }
  100% { transform: rotateX(var(--rx, 720deg)) rotateY(var(--ry, 360deg)) rotateZ(calc(var(--tilt, 0deg) + 22deg)); }
}
.hero-tag { font: italic 400 clamp(22px, 3.2vw, 32px)/1.35 var(--serif); color: var(--gold); max-width: 640px; text-wrap: balance; }
html[lang='ar'] .hero-tag { font-style: normal; }
.hero-sub, .soon { font: 600 12px/1.6 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-soft); }
html[lang='ar'] .hero-sub, html[lang='ar'] .soon { font: 400 19px/1.6 var(--sans); letter-spacing: 0; text-transform: none; }
.launch { font: italic 400 17px/1 var(--serif); color: var(--gold-soft); margin-top: -6px; }
html[lang='ar'] .launch { font-style: normal; }

/* The download button: « coming soon » (not a link) until the App Store
   address is given to the site (histoire.js). */
.store {
  margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 260px;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  font: 600 12px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase;
  background: var(--gold); color: var(--green); border: 1px solid var(--gold);
  transition: background 0.3s ease, color 0.3s ease;
}
.store:not(.soon):hover { background: transparent; color: var(--gold); }
.store.soon { background: rgba(2, 10, 4, 0.72); color: var(--gold-soft); border-color: rgba(232, 201, 136, 0.4); cursor: default; }
.store.soon .store-ready, .store:not(.soon) .store-soon { display: none; }
html[lang='ar'] .store { font: 700 17px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.down { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none;
  font: italic 400 20px/1 var(--serif); color: var(--gold); }
html[lang='ar'] .down { font-style: normal; }
.down i { width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); animation: fall 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes fall { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* --- 2. The story ----------------------------------------------------------------- */
.story {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color: var(--ink-soft); padding: 110px 24px 120px;
  /* A page laid over the opening, its top already showing on the first
     screen, with a small tab to say it can be pulled up. */
  position: relative; z-index: 1; margin-top: calc(-1 * var(--peek));
  border-radius: 30px 30px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
}
.story::before { content: ''; position: absolute; top: 20px; left: 50%; width: 46px; height: 4px; margin-left: -23px; border-radius: 2px; background: rgba(38, 62, 15, 0.22); }
.story-title { text-align: center; font: 400 clamp(36px, 5.4vw, 60px)/1.1 var(--serif); color: var(--ink); margin-bottom: 90px; }
.chapter {
  max-width: 1080px; margin: 0 auto 110px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 72px; align-items: center;
}
.chapter:last-child { margin-bottom: 0; }
.chapter:nth-of-type(even) { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); }
.chapter:nth-of-type(even) .chapter-text { order: 2; }
.chapter-text { max-width: 560px; }
.chapter .numeral { font: italic 400 20px/1 var(--serif); color: #8a6a2f; letter-spacing: 0.2em; margin-bottom: 14px; }
.chapter h2 { font: 400 clamp(30px, 3.6vw, 42px)/1.15 var(--serif); color: var(--ink); margin-bottom: 26px; }
.chapter p { font: 400 21px/1.62 var(--text); margin-bottom: 18px; color: var(--ink-soft); text-wrap: pretty; }
html[lang='ar'] .chapter p { font-size: 21px; line-height: 1.9; }
.chapter .lead { font: italic 500 26px/1.4 var(--text); color: var(--ink); }
html[lang='ar'] .chapter .lead { font-style: normal; font-weight: 700; font-size: 24px; }
.chapter .closing { font-style: italic; color: var(--ink); margin-top: 30px; }
html[lang='ar'] .chapter .closing { font-style: normal; }
.chapter .signature { font: 400 60px/1 'Pinyon Script', cursive; color: var(--ink); margin-top: 22px; text-align: end; }
html[lang='ar'] .chapter .signature { text-align: start; }

.phone img { width: 100%; height: auto; filter: drop-shadow(0 34px 38px rgba(70, 48, 10, 0.28)); }

/* --- 3. Inside the app: each phone rises with its line as the reader
   scrolls, on alternate sides ------------------------------------------------------ */
.inside { position: relative; z-index: 1; padding: 40px 24px 140px; text-align: center; background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%); color: var(--ink-soft); }
.inside-title { font: 400 clamp(34px, 4.6vw, 54px)/1.1 var(--serif); color: var(--ink); }
.inside-sub { font: italic 400 23px/1.5 var(--text); margin: 16px auto 100px; max-width: 560px; }
html[lang='ar'] .inside-sub { font-style: normal; }
.features { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 130px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.feature.flip .cut { order: 2; }
.cut img { width: min(100%, 330px); height: auto; margin: 0 auto; filter: drop-shadow(0 36px 40px rgba(70, 48, 10, 0.3)); }
.feature-text { text-align: start; }
.feature-text h3 { font: 400 clamp(28px, 3.3vw, 40px)/1.22 var(--serif); color: var(--ink); text-wrap: balance; }
html[lang='ar'] .feature-text h3 { line-height: 1.6; }
.feature-text h3::before { content: ''; display: block; width: 56px; height: 1px; background: #b98f4a; margin-bottom: 26px; }

.feature.reveal { opacity: 1; transform: none; }
.feature .cut { opacity: 0; transform: translateY(90px) scale(0.96); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.feature .feature-text { opacity: 0; transform: translateY(26px); transition: opacity 1s ease 0.25s, transform 1.1s ease 0.25s; }
.feature.seen .cut, .feature.seen .feature-text { opacity: 1; transform: none; }

/* --- The end ---------------------------------------------------------------------- */
.end { padding: 90px 24px 70px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  border-top: 1px solid rgba(232, 201, 136, 0.12); background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(14, 36, 23, 0.8), rgba(2, 10, 4, 0) 80%), var(--green); }
.end-mark { width: 200px; aspect-ratio: 686.7 / 257.7; height: auto; margin-bottom: 12px; }
.end .date { font: 400 40px/1.1 var(--serif); letter-spacing: 0.08em; color: var(--gold); }
.contact { margin-top: 26px; font-size: 15px; }
.contact a { color: var(--gold); text-decoration: none; margin-inline-start: 6px; }
.legal { font-size: 13px; display: flex; gap: 10px; opacity: 0.8; }
.legal a { text-decoration: none; }
.legal a:hover, .contact a:hover { text-decoration: underline; }

/* Appearing as the reader gets there. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pages { display: none; }
  .hero > :not(.pages) { transform: none; }
  .reveal, .feature .cut, .feature .feature-text { opacity: 1; transform: none; transition: none; }
  .down i { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- Smaller screens ----------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --peek: 48px; }
  .story { border-radius: 24px 24px 0 0; }
  .chapter, .chapter:nth-of-type(even) { grid-template-columns: 1fr; gap: 44px; margin-bottom: 90px; }
  .chapter:nth-of-type(even) .chapter-text { order: 0; }
  .chapter-text { max-width: none; }
  .phone { width: min(320px, 78vw); margin: 0 auto; }
  .features { gap: 96px; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 34px; }
  .feature.flip .cut { order: 0; }
  .cut img { width: min(270px, 66vw); }
  .feature-text { text-align: center; }
  .feature-text h3::before { margin: 0 auto 22px; }
  .inside-sub { margin-bottom: 70px; }
  .story { padding: 90px 22px 100px; }
  .story-title { margin-bottom: 64px; }
}
/* Short screens: the opening tighter, so the story's page still shows below. */
@media (max-height: 720px) {
  .hero { padding-top: 84px; gap: 16px; }
  .down { margin-top: 20px; }
}
@media (max-width: 520px) {
  .bar { padding: 0 14px; }
  .bar-mark svg { width: 76px; height: 29px; }
  .langs button { padding: 7px 9px; }
  .chapter p { font-size: 19px; }
}