/* The front door's scenes (aromatenergy.com and /en/), on top of scroll.css: the wheat field that opens like a gate
   onto her two directions, the line about the space she makes, Тело · Психика · Энергия over the meadow, about her,
   and the journal. The brand name stays one word: it lifts away as the field opens. */

/* the film's stages are as tall as the whole screen, including the strip behind a phone browser's own toolbar, so the
   picture shows through that toolbar instead of a band; words stay placed against the visible screen (svh) */
:root{--sh:100vh}
@supports (height:100lvh){:root{--sh:100lvh}}

/* ============ 01 two directions: the field opens like a gate ============ */
.gate{--aw:min(25vw,38vh);--ah:min(calc(var(--aw) * 1.3),50vh);--gap:max(110px,12vw);--at:calc(var(--hdr) + 4vh);--hc:calc(var(--sh) - var(--at) - var(--ah) - 58px);background:var(--olive-d);color:var(--cream)}
.gate .stage{min-height:100svh;background:radial-gradient(ellipse 60% 55% at 50% 42%,#3a4a2c 0,var(--olive-d) 70%)}
.film{position:absolute;inset:0;z-index:2;pointer-events:none}
.leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--olive-d);pointer-events:auto}
.leaf img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.ll{left:0}.ll img{left:0}
.lr{right:0}.lr img{right:0}
.leaf::after{content:"";position:absolute;inset:0;background:#141a0e;opacity:0}
.ll::before{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;z-index:1;background:linear-gradient(180deg,rgba(190,163,105,0),rgba(190,163,105,.55) 30%,rgba(190,163,105,.55) 70%,rgba(190,163,105,0))}
.fv{position:absolute;inset:0}
.film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.film-v.on{opacity:1}
.gate .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,32,18,.5) 0,rgba(26,32,18,0) 26%,rgba(26,32,18,.05) 50%,rgba(26,32,18,.7) 100%)}
.gate .hero{position:absolute;left:0;right:0;top:0;height:100svh;z-index:3;pointer-events:none;--nf:clamp(44px,8.4vw,150px)}
.gate .name{position:absolute;left:0;right:0;top:27%;text-align:center;font:400 var(--nf)/.9 var(--display);letter-spacing:.015em;white-space:nowrap;text-shadow:0 2px 40px rgba(26,32,18,.4)}
.gate .tagline{position:absolute;left:0;right:0;top:calc(27% + var(--nf) * .9 + 18px);text-align:center;font:400 clamp(24px,2.5vw,40px)/1.2 var(--display);letter-spacing:.02em;color:var(--cream);text-shadow:0 1px 24px rgba(26,32,18,.6)}
.gate h1{position:absolute;left:max(var(--pad),env(safe-area-inset-left,0px));bottom:max(44px,7vh);max-width:31ch;font:300 clamp(19px,1.75vw,27px)/1.35 var(--text);letter-spacing:-.005em;text-wrap:balance;text-shadow:0 1px 20px rgba(26,32,18,.7)}
.gate .cue{position:absolute;right:max(var(--pad),env(safe-area-inset-right,0px));bottom:max(48px,7vh);opacity:.8;display:none}
.gate .cue span{display:block;width:1px;height:26px;background:currentColor;animation:cue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.arches{position:relative;z-index:1;height:calc(var(--at) + var(--ah) + 30px)}
.arch{position:absolute;top:var(--at);width:var(--aw);height:var(--ah);border-radius:999px 999px 16px 16px;overflow:hidden;outline:1px solid rgba(190,163,105,.75);outline-offset:9px;background:var(--olive)}
.al{left:calc(50% - var(--gap) / 2 - var(--aw))}
.ar{left:calc(50% + var(--gap) / 2)}
.arch img,.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arch video,.j-film video{opacity:0;transition:opacity 1.2s ease}
.arch video.on,.j-film video.on{opacity:1}
.seam{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(190,163,105,0),var(--gold) 20%,var(--gold) 80%,rgba(190,163,105,0));opacity:.7;display:none}
.mid-mark{position:absolute;left:50%;top:calc(var(--at) + var(--ah) / 2);width:46px;margin:-23px 0 0 -23px;color:var(--gold)}
.doors{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) var(--aw) var(--gap) var(--aw) minmax(0,1fr);padding:28px 0 clamp(70px,9vw,130px)}
.door{margin:0 -40px;font-size:16px;line-height:1.55;color:var(--sage)}
.dl{grid-column:2}.dr{grid-column:4}
.door .label{color:var(--cream);margin-bottom:12px}
.door h2{font:400 clamp(28px,2.5vw,40px)/1.05 var(--display);color:var(--cream);margin-bottom:12px}
.door-act{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:18px;color:var(--cream)}

/* no motion: a full opening picture, then the two doors side by side */
.no-js .gate .film,.static .gate .film{position:relative;height:var(--sh)}
.no-js .gate .stage,.static .gate .stage{display:flex;flex-direction:column}
.no-js .gate .arches,.static .gate .arches{order:2}

/* motion: the gate is pinned while the field opens; the pin ends exactly when the doors arrive under the arches, so
   arches and words then scroll away together and never overlap (down or up) */
.motion .gate .stage{position:sticky;top:0;height:var(--sh);z-index:1}
.motion .gate .arches{position:absolute;inset:0;height:auto}
.motion .gate .spacer{height:150vh}
.gate .pin{position:relative}
.motion .gate .doors{margin-top:calc(-1 * var(--hc));min-height:var(--hc);padding-top:0;padding-bottom:0}
.motion .door{opacity:var(--dc,0);transform:translate3d(0,calc((1 - var(--dc,0)) * 24px),0)}
.motion .ll{transform:translate3d(calc(var(--e,0) * -101%),0,0)}
.motion .lr{transform:translate3d(calc(var(--e,0) * 101%),0,0)}
.motion .leaf{will-change:transform}
.motion .leaf::after{opacity:calc(var(--e,0) * .55)}
.motion .fv{opacity:calc(1 - var(--vo,0))}
.motion .gate .veil{opacity:calc(1 - var(--e,0))}
.motion .gate .tagline,.motion .gate h1,.motion .gate .cue{opacity:calc(1 - var(--a,0))}
.motion .gate h1{transform:translate3d(0,calc(var(--a,0) * 30px),0)}
.motion .gate .cue{display:block}
.motion .gate .name{opacity:calc(1 - var(--n,0));transform:translate3d(0,calc(var(--n,0) * -44px),0) scale(calc(1 - var(--n,0) * .12))}
.motion .arch{transform:scale(calc(.86 + .14 * var(--e,0)))}
.motion .seam{display:block;transform:scaleY(calc(1 - var(--m,0) * .6))}
.motion .mid-mark{opacity:var(--m,0);transform:translate3d(0,calc((1 - var(--m,0)) * 14px),0)}

/* ============ 02 the space she makes ============ */
.space{background:var(--cream);padding:clamp(130px,15vw,240px) 0 clamp(120px,15vw,230px);overflow:hidden}
.space::before{content:"";position:absolute;left:0;right:0;top:-1px;height:9vw;background:radial-gradient(ellipse 70% 100% at 50% 100%,var(--cream) 99.4%,var(--olive-d) 100%)}
.space-in{position:relative;z-index:2;text-align:center}
.space .label{justify-content:center;color:var(--brown)}
.space h2{font:400 clamp(40px,5.4vw,92px)/1.02 var(--display);max-width:15ch;margin:0 auto 34px;text-wrap:balance}
.for{max-width:38ch;margin:0 auto;font-size:clamp(17px,1.4vw,21px);color:var(--brown)}
.float{position:absolute;z-index:1;aspect-ratio:2/3;border-radius:999px 999px 14px 14px;overflow:hidden}
.float img{width:100%;height:100%;object-fit:cover}
.f1{left:4vw;bottom:9vw;width:min(17vw,250px)}
.f2{right:4.5vw;top:12vw;width:min(18vw,270px)}
.motion .f1{transform:translate3d(0,calc((var(--v,.5) - .5) * -160px),0) rotate(-3deg)}
.motion .f2{transform:translate3d(0,calc((var(--v,.5) - .5) * 110px),0) rotate(2.5deg)}

/* ============ 03 Тело · Психика · Энергия over the meadow ============ */
.balance{background:var(--cream)}
.balance .stage{height:var(--sh);min-height:560px;background:var(--cream)}
.balance .photo{position:absolute;inset:0}
.balance .photo img{width:100%;height:100%;object-fit:cover}
.bwords{position:absolute;left:0;right:0;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 clamp(66px,13vw,210px)/.9 var(--display);letter-spacing:-.005em;text-align:center;pointer-events:none;z-index:2}
.bw{display:block}
/* the letters only ever hold the dark lower part of the photo (trees and grass), so they read on cream from the first frame */
.bwords.clip{display:none;color:transparent;-webkit-background-clip:text;background-clip:text;background-position:center;background-size:cover}
.bwords.solid{color:var(--cream);text-shadow:0 2px 40px rgba(20,26,14,.45)}
.dusk{position:absolute;inset:0;background:var(--olive);opacity:0;pointer-events:none;z-index:1}
.balance .photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(20,26,14,.42),rgba(20,26,14,.12) 70%,transparent);opacity:var(--o,0);pointer-events:none}
.motion .balance{height:260vh}
.motion .balance .stage{position:sticky;top:0}
.motion .balance .photo{clip-path:inset(calc((1 - var(--o,0)) * 100%) calc((1 - var(--o,0)) * 50%) 0 calc((1 - var(--o,0)) * 50%) round calc((1 - var(--o,0)) * 50vw) calc((1 - var(--o,0)) * 50vw) 0 0);will-change:clip-path}
/* no light dip in the handover: the solid letters arrive on top first, then the photo letters leave */
.motion .bwords.clip{display:flex;opacity:clamp(0,calc(2 - var(--t,0) * 2),1)}
.motion .balance.near .bwords.clip{background-image:url("img/band-ink-m.webp");background-image:image-set(url("img/band-ink-m.avif") type("image/avif"),url("img/band-ink-m.webp") type("image/webp"))}
@media (min-width:761px){.motion .balance.near .bwords.clip{background-image:url("img/band-ink-1600.webp");background-image:image-set(url("img/band-ink-1600.avif") type("image/avif"),url("img/band-ink-1600.webp") type("image/webp"))}}
.motion .bwords.solid{opacity:clamp(0,calc(var(--t,0) * 2),1);color:color-mix(in srgb,var(--cream) calc(var(--c,0) * 100%),var(--olive));text-shadow:0 2px 40px rgba(20,26,14,calc(var(--c,0) * .45))}
.motion .bwords{transform:scale(calc(1 + var(--o,0) * .06))}
.motion .dusk{opacity:var(--d,0)}

/* ============ 04 about her ============ */
.daria{background:var(--olive);color:var(--cream);padding:clamp(100px,12vw,180px) 0;overflow:hidden}
.daria-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,7vw,120px);align-items:center}
.portrait{border-radius:999px 999px 22px 22px;overflow:hidden;aspect-ratio:2/3;outline:1px solid rgba(190,163,105,.7);outline-offset:10px;max-width:500px}
.portrait img{width:100%;height:100%;object-fit:cover}
.motion .portrait img{transform:translate3d(0,calc(var(--v,.5) * -60px + 30px),0) scale(1.1)}
.daria .label{color:var(--sage)}
.daria h2{font:400 clamp(52px,7vw,124px)/.92 var(--display);margin-bottom:26px}
.daria .lead{font-size:clamp(20px,1.8vw,26px);line-height:1.4;margin-bottom:18px;max-width:32ch}
.daria-text>p:not(.label){max-width:46ch}
.daria-text>p:not(.lead):not(.label){color:var(--sage)}
.years{display:flex;align-items:flex-end;gap:18px;margin:40px 0 0;border-top:1px solid rgba(243,238,227,.2);padding-top:26px}
.yn{font:400 clamp(110px,13vw,210px)/.72 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.05em}
.yl{font:500 12.5px/1.5 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);padding-bottom:6px;max-width:24ch}
.facts{list-style:none;padding:0;margin:22px 0 34px;border-top:1px solid rgba(243,238,227,.2)}
.facts li{padding:16px 0;border-bottom:1px solid rgba(243,238,227,.2);font:400 22px/1.2 var(--display)}
.facts li small{display:block;font:300 15px/1.5 var(--text);color:var(--sage)}

/* ============ 05 the journal ============ */
.journal{background:var(--cream);padding:clamp(100px,12vw,180px) 0;overflow-x:clip} /* the posts slide in from the side */
.journal-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,120px);align-items:start}
.j-side{position:sticky;top:calc(var(--hdr) + 30px)}
.journal .label{color:var(--brown)}
.journal h2{font:400 clamp(44px,5vw,84px)/.95 var(--display);margin-bottom:20px}
.j-lead{font-size:19px;color:var(--brown);max-width:30ch;margin-bottom:30px}
.j-film{position:relative;width:min(240px,60%);aspect-ratio:3/4;border-radius:999px 999px 14px 14px;overflow:hidden;margin-bottom:32px;outline:1px solid var(--gold);outline-offset:7px}
.j-film img,.j-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.j-side .btn{color:var(--olive)}
.posts{list-style:none;padding:0;border-top:1px solid var(--beige)}
.post{padding:clamp(34px,4vw,56px) 0;border-bottom:1px solid var(--beige);display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:10px}
.post>*:not(.pno){grid-column:2}
.pno{grid-row:1/span 3;font:400 20px/1.6 var(--display);color:var(--brown)}
.post h3{font:400 clamp(32px,3.4vw,54px)/1.02 var(--display);margin-bottom:14px}
.post p{font-size:18px;max-width:42ch;margin-bottom:18px;color:#4a3420}
.post .pub-meta{font:500 12px var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--brown);margin-bottom:10px}
.post .textlink{justify-self:start}
.motion .post{transform:translate3d(0,calc((1 - var(--o,0)) * 48px),0)}
.motion .post h3{transform:translate3d(calc((1 - var(--o,0)) * 26px),0,0)}

/* the footer has three columns here (her tagline is the second scene, not repeated below) */
.fcols.three{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .daria-grid,.journal-grid{grid-template-columns:1fr}
  .portrait{max-width:340px;margin:0 auto 10px;width:82%}
  .j-side{position:relative;top:0}
  .fcols.three{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .gate{--aw:min(41vw,29vh);--ah:calc(var(--aw) * 1.42);--gap:5vw;--at:calc(var(--hdr) + 2.5vh);--hc:calc(var(--sh) - var(--at) - var(--ah) - 44px)}
  .gate .hero{--nf:min(10.6vw,52px)}
  .gate .name{top:30%}
  .gate .tagline{font-size:clamp(30px,9vw,44px);top:calc(30% + var(--nf) * .9 + 14px)}
  .gate h1{right:var(--pad);bottom:max(84px,11vh);font-size:18px;max-width:none}
  .gate .cue{left:var(--pad);right:auto;bottom:max(40px,5vh)}
  .doors{display:block;padding:24px var(--pad) 90px}
  .motion .gate .doors{background:var(--olive-d);box-shadow:0 -1px 0 var(--olive-d)}
  .motion .dr{opacity:1;transform:none}
  .door{margin:0 0 38px}
  .mid-mark{display:none}
  .space{padding:110px 0 60px}
  .space::before{height:14vw}
  .float{position:relative;display:inline-block;width:40vw;left:auto;right:auto;top:auto;bottom:auto;vertical-align:top;margin:50px 0 0}
  .f1{margin-left:max(var(--pad),env(safe-area-inset-left,0px))}
  .f2{margin-left:6vw;margin-top:90px}
  .bwords{font-size:clamp(56px,19vw,120px)}
  .post{grid-template-columns:44px minmax(0,1fr)}
  .post h3{font-size:34px}
  .post p{font-size:17px}
}
@media (max-width:600px){
  .fcols.three{grid-template-columns:1fr}  /* one column, so the email address isn't broken up */
}
@media (prefers-reduced-motion:reduce){.gate .cue span{animation:none}}