/* Landscape flow — the page rolls down through the hills from dusk into night.
   Every section meets the next at a drifting hill ridge; all ridges and colour orbs share one rhythm.
   Performance: ridges drift with transform (GPU-composited, painted once) instead of animating
   mask-position, which forced a full repaint of every ridge layer on every frame. */
:root{
  --bg-about:#f1e8f8; --bg-interview:#f8f4fb; --bg-reviews:#e9eff9; --bg-feedback:#dfeee7; --night-top:#2e1245; --night-bottom:#1d3c6b;
  --letters-top:#fbf9fd; --letters-bottom:#fbf9fd;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,8 450,8 600,50 C750,92 1050,92 1200,50 L1200,100 L0,100Z'/%3E%3C/svg%3E");
  --wave2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C120,20 300,10 520,46 C700,76 820,96 1000,70 C1100,56 1150,52 1200,60 L1200,100 L0,100Z'/%3E%3C/svg%3E");
}
body:has(.qhht-letters[data-design=doors]){--letters-top:#fff;--letters-bottom:#fff}
body:has(.qhht-letters[data-design=hills]){--letters-top:var(--paper);--letters-bottom:#eef4f1}
body:has(.qhht-letters[data-design=sky]){--letters-top:var(--night-top);--letters-bottom:var(--night-bottom)}

/* ── Section colours ── */
.about{background:var(--bg-about);border-block:0}
.qhht-letters[data-design=classic],.qhht-letters[data-design=doors]{background:var(--letters-top);border-top:0}
.qhht-letters[data-design=sky]{background:radial-gradient(70% 60% at 30% 35%,rgba(122,60,176,.45),transparent 70%),linear-gradient(180deg,var(--night-top),var(--night-bottom))}
.interview{background:var(--bg-interview)}
.belief{background:linear-gradient(180deg,var(--night-top) 0%,#28194f 55%,var(--night-bottom) 100%)}
.reviews{background:var(--bg-reviews)}
.feedback{background:var(--bg-feedback)}
.foot{background:var(--amethyst-deep)}
.foot-inner{padding-top:8px}

/* ── Drifting hill ridges between sections ── */
:root{--rh:clamp(64px,8vw,112px)}
.ridge{position:relative;z-index:2;height:var(--rh);overflow:hidden;margin:calc(-1 * var(--rh)) 0 -1px;pointer-events:none}
.about,.qhht-letters,.interview,.belief,.reviews,.feedback{padding-bottom:calc(clamp(56px,7vw,96px) + var(--rh))}
.foot{display:flow-root}
/* Each layer is one wave tile (--t) wider than the ridge and slides by exactly one tile, so the loop is seamless.
   --dir: -1 drifts left, 1 drifts right (rightward layers start one tile to the left). */
.ridge i{position:absolute;bottom:-1px;left:calc(-1 * max(var(--dir),0) * var(--t));width:calc(100% + var(--t));background:var(--c);
  -webkit-mask-image:var(--wave);mask-image:var(--wave);-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:var(--t) 100%;mask-size:var(--t) 100%;-webkit-mask-position:0 100%;mask-position:0 100%;
  will-change:transform;backface-visibility:hidden;animation:ridge-drift var(--d) linear infinite}
.ridge i:nth-child(1){top:0;--t:1600px;--dir:-1;--d:80s}
.ridge i:nth-child(2){top:28%;-webkit-mask-image:var(--wave2);mask-image:var(--wave2);--t:1150px;--dir:1;--d:60s}
.ridge i:nth-child(3){top:52%;--t:1350px;--dir:-1;--d:100s}
.ridge i.f{top:70%;-webkit-mask-image:var(--wave2);mask-image:var(--wave2);--t:1900px;--dir:1;--d:130s}
@keyframes ridge-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--dir) * var(--t)),0,0)}}

/* Hero ridge sits over the photo */
.hero .ridge{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,15vw,210px);z-index:1;margin:0}
.foot>.ridge{margin-bottom:0}
.hero-copy{z-index:2}

/* ── Colour orbs inside sections, one shared rhythm ── */
.about,.qhht-letters,.interview,.belief,.reviews,.feedback{position:relative;isolation:isolate;overflow:clip}
.about>.wrap,.qhht-letters>.wrap,.interview>.wrap,.belief>.wrap,.reviews>.wrap,.feedback>.wrap{position:relative;z-index:1}
.about::before,.qhht-letters[data-design=classic]::before,.qhht-letters[data-design=doors]::before,.interview::before,.belief::before,.reviews::before,.feedback::before{
  content:"";position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(32% 45% at 18% 35%,var(--o1),transparent 70%),radial-gradient(30% 42% at 82% 65%,var(--o2),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 30%);mask-image:linear-gradient(180deg,transparent 14%,#000 30%);
  will-change:transform;backface-visibility:hidden;
  animation:orbs 34s ease-in-out infinite alternate}
.about{--o1:rgba(150,90,210,.42);--o2:rgba(60,120,210,.30)}
.qhht-letters{--o1:rgba(30,140,105,.24);--o2:rgba(150,90,210,.26)}
.interview{--o1:rgba(60,120,210,.26);--o2:rgba(150,90,210,.30)}
.belief{--o1:rgba(40,170,130,.38);--o2:rgba(170,120,240,.40)}
.belief::before{mix-blend-mode:screen}
.reviews{--o1:rgba(60,120,210,.34);--o2:rgba(150,90,210,.30)}
.feedback{--o1:rgba(30,140,105,.34);--o2:rgba(60,120,210,.26)}
@keyframes orbs{
  0%{transform:translate3d(-6%,0,0) scale(1)}
  50%{transform:translate3d(5%,-4%,0) scale(1.12)}
  100%{transform:translate3d(9%,3%,0) scale(.96)}
}

@media (max-width:600px){
  .ridge i:nth-child(1){--t:900px}
  .ridge i:nth-child(2){--t:700px}
  .ridge i:nth-child(3){--t:800px}
  .ridge i.f{--t:1100px}
}
@media (prefers-reduced-motion:reduce){
  .ridge i,.about::before,.qhht-letters::before,.interview::before,.belief::before,.reviews::before,.feedback::before{animation:none}
}