/* "Despre SFP Project" — full-screen scroll film (home section #despre, markup in src/art-of-living.mjs).
   Default = static: the video (user-started) with every text laid out below it.
   html.aol-live = pinned canvas driven by aol.js, one caption panel at a time over the film. */
.aol { --aol-ivory: var(--ivory); --aol-stone: #e7e0d4; --aol-ink: #1f1c18; --aol-bronze: var(--bronze); --aol-champ: var(--champ); --aol-gold: #e2c897; --aol-serif: 'Cormorant Garamond', 'Times New Roman', serif; --nav: 64px; position: relative; background: var(--aol-ivory); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- type */
.aol-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font: 600 .74rem/1 var(--head); letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-text, #7a5c37); }
.aol-eyebrow::before { content: ''; width: 40px; height: 1px; background: currentColor; opacity: .7; }
.aol-h { margin: 0; font: 500 clamp(2.4rem, 4.4vw, 4.4rem)/1.02 var(--aol-serif); letter-spacing: -.008em; color: var(--aol-ink); }
.aol-h--result { text-transform: uppercase; letter-spacing: .01em; }
.aol-t { margin: 0 0 14px; font: 500 clamp(2.2rem, 3.6vw, 3.6rem)/1 var(--aol-serif); color: var(--aol-ink); }
.aol-lead { max-width: 46ch; margin: 22px 0 0; font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.7; color: #292621; }
.aol-p { max-width: 44ch; margin: 0; font-size: 1.04rem; line-height: 1.7; color: #4a453d; }
.aol-panel--result .aol-p { margin-top: 20px; max-width: 50ch; }
.aol-cta { margin-top: 28px; gap: 12px; }
.aol-cue { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; font: 600 .72rem/1 var(--head); letter-spacing: .22em; text-transform: uppercase; color: #6d665b; }
.aol-cue span { position: relative; width: 1px; height: 40px; background: currentColor; opacity: .35; overflow: hidden; }
.aol-cue span::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: aol-cue 2.2s var(--ease) infinite; }
@keyframes aol-cue { to { top: 100%; } }
.aol-steps { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- static (no JS / reduced motion / fallback) */
.aol-pin { max-width: 1320px; margin-inline: auto; padding: var(--sec) var(--gut); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.aol-stage { position: relative; order: 2; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--aol-stone); box-shadow: 0 40px 80px -50px rgba(31, 28, 24, .55); }
.aol-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--aol-stone); }
.aol-canvas, .aol-veil, .aol-loading, .aol-bar, .aol-rail, .aol-cue { display: none; }
.aol-note { position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0; padding: 4px 9px; border-radius: 3px; background: rgba(245, 241, 234, .82); font: 500 .75rem/1.2 var(--body); color: #5d574d; }
.aol-copy { display: contents; }
.aol-panel--intro { order: 1; max-width: 860px; }
.aol-steps { order: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.aol-steps .aol-panel { padding-top: 22px; border-top: 1px solid var(--line); }
.aol-steps .aol-eyebrow { display: none; }
.aol-steps .aol-t { font-size: 1.9rem; }
.aol-steps .aol-p { font-size: .98rem; }
.aol-panel--result { order: 4; }
.aol-panel--result .aol-h { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (max-width: 960px) { .aol-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aol-steps { grid-template-columns: 1fr; } .aol-cta .btn-dark { width: 100%; } }

/* ---------------------------------------------------------------- live, scroll-driven
   Desktop: the whole 16:9 film, as large as the screen allows, framed on the right; the text column
   on the left carries the active caption and, under it, the four working steps as a progress list.
   (Kept uncropped and below full-screen size until higher-resolution frames are supplied.) */
.aol-live .aol-pin {
  --tw: clamp(340px, 25vw, 460px);   /* text column */
  --gap: clamp(40px, 3.6vw, 64px);   /* between text and film */
  --sw: min(calc(100vw - 2 * var(--gut) - var(--gap) - var(--tw)), calc((100vh - var(--nav) - 48px) * 16 / 9));
  --sh: calc(var(--sw) * 9 / 16);
  --st: calc(var(--nav) + (100vh - var(--nav) - var(--sh)) / 2);
  --gx: calc((100vw - var(--tw) - var(--gap) - var(--sw)) / 2); /* text + film are centred as one group */
  position: relative; display: block; max-width: none; height: 100vh; height: 100svh; padding: 0; overflow: hidden; background: var(--aol-ivory);
}
.aol-live .aol-stage { position: absolute; left: calc(var(--gx) + var(--tw) + var(--gap)); top: var(--st); width: var(--sw); height: var(--sh); aspect-ratio: auto; overflow: visible; border-radius: 6px; background: var(--first) center / cover no-repeat, var(--aol-stone); box-shadow: 0 50px 90px -55px rgba(31, 28, 24, .6); }
.aol-live .aol-video { display: none; }
.aol-live .aol-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; opacity: 0; transition: opacity .6s var(--ease); }
.aol-live .aol-stage.is-ready .aol-canvas { opacity: 1; }
.aol-live .aol-note { left: auto; right: 12px; top: 12px; }

.aol-live .aol-loading { display: flex; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); align-items: center; gap: 12px; margin: 0; padding: 8px 14px; border-radius: 4px; background: rgba(245, 241, 234, .88); font: 600 .75rem/1 var(--head); letter-spacing: .22em; text-transform: uppercase; color: var(--aol-ink); transition: opacity .5s var(--ease); }
.aol-loading span { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--aol-bronze), transparent); background-size: 200% 100%; animation: aol-load 1.4s linear infinite; }
@keyframes aol-load { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.aol-live .aol-stage.is-ready .aol-loading { opacity: 0; }
.aol-live .aol-bar { display: block; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px; background: rgba(31, 28, 24, .1); }
.aol-bar i { display: block; height: 100%; background: var(--aol-bronze); transform: scaleX(0); transform-origin: 0 50%; }

/* the four steps, listed in the text column and aligned with the bottom of the film */
.aol-live .aol-rail { display: grid; position: absolute; right: calc(100% + var(--gap)); bottom: 0; width: var(--tw); gap: 0; border-top: 1px solid var(--line); }
.aol-rail button { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: 500 1.02rem/1 var(--body); color: rgba(31, 28, 24, .42); transition: color .4s var(--ease); }
.aol-rail button::before { content: ''; flex: none; width: 14px; height: 1px; background: currentColor; transition: width .5s var(--ease), background-color .4s; }
.aol-rail button:hover, .aol-rail button.is-past { color: rgba(31, 28, 24, .72); }
.aol-rail button.is-on { color: var(--aol-ink); }
.aol-rail button.is-on::before { width: 38px; background: var(--aol-bronze); }
.aol-rail button:focus-visible { outline: 2px solid var(--aol-bronze); outline-offset: 2px; }

.aol-live .aol-copy { display: block; position: absolute; left: var(--gx); top: var(--st); height: var(--sh); width: var(--tw); }
.aol-live .aol-steps { display: block; }
.aol-live .aol-panel { position: absolute; inset: 0 0 230px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0; border: 0; visibility: hidden; opacity: 0; }
.aol-live .aol-panel--result { inset: 0; }
.aol-live .aol-cue { display: flex; color: #6d665b; }
.aol-live .aol-cue span::after { background: var(--aol-bronze); }
.aol-live .aol-steps .aol-eyebrow { display: flex; }
.aol-live .aol-eyebrow { margin-bottom: 16px; }
.aol-live .aol-h { font-size: clamp(2.2rem, 2.7vw, 3.3rem); }
.aol-live .aol-lead { margin-top: 18px; font-size: 1.02rem; }
.aol-live .aol-steps .aol-t { font-size: clamp(2.8rem, 3.8vw, 4.4rem); }
.aol-live .aol-steps .aol-p { font-size: 1.06rem; }
.aol-live .aol-panel--result .aol-h { font-size: clamp(2.1rem, 2.6vw, 3.1rem); }
.aol-live .aol-panel--result .aol-p { margin-top: 16px; font-size: .98rem; }
.aol-live .aol-cta { margin-top: 24px; }
.aol-live .aol-cta .btn-dark { min-width: 0; }
.aol-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.aol-w > span { display: inline-block; will-change: transform; }

/* shorter laptop screens: tighten the column so the caption and the list both fit */
@media (max-height: 760px) and (min-width: 1181px) {
  .aol-live .aol-panel { inset: 0 0 200px; }
  .aol-rail button { min-height: 40px; font-size: .95rem; }
  .aol-live .aol-cue { display: none; }
  .aol-live .aol-panel--result .aol-p { display: none; }
}


/* phones and portrait tablets: the film fills the upper part (cropped around what each step shows),
   the captions sit on ivory below it */
@media (max-width: 1180px) {
  .aol-live .aol-pin { background: var(--aol-ivory); }
  .aol-live .aol-stage { left: 0; right: 0; top: var(--nav); width: auto; height: 50%; border-radius: 0; box-shadow: none; overflow: hidden; }
  .aol-live .aol-canvas { border-radius: 0; }
  .aol-live .aol-bar { bottom: 0; border-radius: 0; }
  .aol-live .aol-veil { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--aol-ivory) 0%, rgba(245, 241, 234, 0) 14%); }
  .aol-live .aol-note { right: 10px; top: auto; bottom: 16px; font-size: .75rem; }
  .aol-live .aol-loading { bottom: 40px; }
  .aol-live .aol-rail { display: none; }
  .aol-live .aol-copy { top: calc(var(--nav) + 50%); bottom: 0; height: auto; right: var(--gut); width: auto; }
  .aol-live .aol-panel, .aol-live .aol-panel--result { inset: 6px 0 auto; justify-content: flex-start; }
  .aol-live .aol-eyebrow { color: var(--bronze-text, #7a5c37); margin-bottom: 12px; }
  .aol-live .aol-h, .aol-live .aol-t { color: var(--aol-ink); text-shadow: none; }
  .aol-live .aol-h { font-size: clamp(1.9rem, 7.6vw, 2.6rem); }
  .aol-live .aol-steps .aol-t { font-size: clamp(2.2rem, 9vw, 3rem); margin-bottom: 10px; }
  .aol-live .aol-lead, .aol-live .aol-p { color: #4a453d; font-size: .98rem; }
  .aol-live .aol-lead { margin-top: 14px; }
  .aol-live .aol-cue { display: none; }
  .aol-live .aol-panel--result .aol-h { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .aol-live .aol-panel--result .aol-p { display: none; }
  .aol-live .aol-cta { margin-top: 18px; width: 100%; }
  .aol-live .aol-btn-light { background: #292621; color: #fbf8f3; }
  .aol-live .aol-btn-light:hover { background: #3a332b; color: #fff; }
}
@media (max-width: 860px) { .aol { --nav: 56px; } }
@media (max-width: 520px) { .aol-live .aol-cta .btn-dark { width: 100%; min-height: 46px; } }
@media (max-height: 640px) and (max-width: 1180px) { .aol-live .aol-stage { height: 42%; } .aol-live .aol-copy { top: calc(var(--nav) + 42%); } }
@media (prefers-reduced-motion: reduce) { .aol-cue span::after { animation: none; top: 30%; } }


/* titles: same gold → beige as the rest of the site. Live mode paints each masked word
   (the parent cannot clip text that sits in transformed children); static mode paints the heading itself. */
.aol-live .aol-w > span, html:not(.aol-live) .aol-h, html:not(.aol-live) .aol-t {
  color: #a07a38; padding-bottom: .14em;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}