/* ============================================================
   SVOYA — motion layer
   Two systems, layered:
   1. JS class-triggered stagger animations (works everywhere)
   2. Native scroll-driven timelines for parallax/progress,
      behind @supports so unsupported browsers just get static art
   Everything collapses under prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:linear-gradient(90deg,var(--wine),var(--wine-bright),var(--gold));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .progress{animation:progressGrow linear both;animation-timeline:scroll(root block)}
}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- word / line stagger ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > i{
  display:inline-block;font-style:inherit;color:inherit;
  transform:translateY(110%) rotate(4deg);opacity:0;
}
.in .w > i,.w.in > i{
  animation:wordRise 1.05s var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes wordRise{
  from{transform:translateY(110%) rotate(4deg);opacity:0}
  to{transform:none;opacity:1}
}

/* char stagger, used on the city names */
.ch{display:inline-block;transform:translateY(80%) scale(.9);opacity:0}
.in .ch{animation:charRise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 42ms)}
@keyframes charRise{to{transform:none;opacity:1}}

/* ---------- generic staggered children ---------- */
.stag > *{opacity:0;transform:translateY(26px)}
.stag.in > *{animation:stagIn .9s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes stagIn{to{opacity:1;transform:none}}

/* ---------- image mask wipe ---------- */
.mask{clip-path:inset(0 0 100% 0)}
.mask.in{animation:maskUp 1.25s var(--ease) both}
@keyframes maskUp{to{clip-path:inset(0 0 0 0)}}

.mask-l{clip-path:inset(0 100% 0 0)}
.mask-l.in{animation:maskRight 1.3s var(--ease) both}
@keyframes maskRight{to{clip-path:inset(0 0 0 0)}}

/* ---------- rule draw ---------- */
.draw{transform:scaleX(0);transform-origin:0 50%}
.draw.in{animation:drawLine 1.1s var(--ease) both}
@keyframes drawLine{to{transform:scaleX(1)}}

/* ---------- number counters ---------- */
.num b{will-change:contents}
.num.in b{animation:numPop 1s var(--ease) both}
@keyframes numPop{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

/* ============================================================
   NATIVE SCROLL-DRIVEN PARALLAX
   ============================================================ */
@supports (animation-timeline:view()){

  /* hero: portrait drifts, copy lifts and fades as it leaves */
  .hero__portrait img{
    animation:heroPar linear both;
    animation-timeline:view(block);
    animation-range:entry 0% exit 100%;
  }
  @keyframes heroPar{
    from{transform:scale(1.16) translateY(-4%)}
    to{transform:scale(1.16) translateY(6%)}
  }
  .hero__grid > div:first-child{
    animation:heroLift linear both;
    animation-timeline:view(block);
    animation-range:exit 0% exit 100%;
  }
  @keyframes heroLift{
    from{transform:none;opacity:1}
    to{transform:translateY(-70px);opacity:.15}
  }

  /* section imagery */
  .city__media img,.band__media img,.founder__fig img{
    animation:mediaPar linear both;
    animation-timeline:view(block);
    animation-range:cover 0% cover 100%;
  }
  @keyframes mediaPar{
    from{transform:translateY(-7%) scale(1.14)}
    to{transform:translateY(7%) scale(1.14)}
  }

  /* the giant СВОЯ watermark drifts and rotates behind the manifesto */
  .mani::before{
    animation:maniDrift linear both;
    animation-timeline:view(block);
    animation-range:cover 0% cover 100%;
  }
  @keyframes maniDrift{
    from{transform:translate(-50%,-38%) rotate(-3deg) scale(.94)}
    to{transform:translate(-50%,-62%) rotate(3deg) scale(1.06)}
  }

  /* the dictionary word slides against the definitions */
  .def__word{
    animation:defDrift linear both;
    animation-timeline:view(block);
    animation-range:entry 0% exit 100%;
  }
  @keyframes defDrift{
    from{transform:translateY(38px)}
    to{transform:translateY(-38px)}
  }

  /* editorial band: two images at different depths */
  .band__fig--a img{animation-range:cover 0% cover 100%}
  .band__fig--b img{
    animation:mediaParSlow linear both;
    animation-timeline:view(block);
    animation-range:cover 0% cover 100%;
  }
  @keyframes mediaParSlow{
    from{transform:translateY(9%) scale(1.16)}
    to{transform:translateY(-9%) scale(1.16)}
  }

  /* pull quote tracks in as the band scrolls */
  .band__quote{
    animation:quoteIn linear both;
    animation-timeline:view(block);
    animation-range:entry 10% cover 45%;
  }
  @keyframes quoteIn{
    from{opacity:0;transform:translateY(60px);letter-spacing:.04em}
    to{opacity:1;transform:none;letter-spacing:-.02em}
  }

  /* ticker cells sweep their fill */
  .ticker__cell::before{
    animation:sweep linear both;
    animation-timeline:view(block);
    animation-range:entry 0% cover 40%;
  }
  @keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ticker fill element (static fallback: just doesn't show) */
.ticker__cell{position:relative;overflow:hidden}
.ticker__cell::before{
  content:'';position:absolute;inset:0;background:var(--wine-deep);
  transform:scaleX(0);transform-origin:0 50%;z-index:-1;
}
.ticker__cell > *{position:relative;z-index:1}

/* ============================================================
   EDITORIAL BAND (new section)
   ============================================================ */
.band{background:var(--ink);color:var(--paper);padding:clamp(80px,10vw,150px) 0;overflow:hidden}
.band__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.band__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.band__fig{position:relative;overflow:hidden;margin:0;background:var(--wine-deep)}
.band__fig--a{aspect-ratio:3/4.3}
.band__fig--b{aspect-ratio:3/4.3;margin-top:clamp(24px,4vw,64px)}
.band__fig img{width:100%;height:100%;object-fit:cover}
.band__fig--a img{object-position:34% 46%}
.band__fig--b img{object-position:58% 26%}
.band__quote{
  font-family:var(--display);font-size:clamp(26px,3.5vw,50px);
  line-height:1.14;letter-spacing:-.02em;margin:0;
}
.band__quote .it{font-style:italic;color:var(--accent)}
.band__attr{
  margin-top:clamp(20px,2.6vw,32px);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(247,243,239,.66);
}
@media(max-width:860px){
  .band__in{grid-template-columns:1fr}
  .band__media{order:2}
}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
/* buttons: burgundy fill wipes in from the pointer side */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--wine-bright);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.btn:hover::before{transform:scaleX(1)}
.btn--fill:hover{background:var(--wine)}
.btn__dot{transition:transform .5s var(--ease)}
.btn:hover .btn__dot{transform:scale(2.6)}

/* nav links lift */
.nav__links a{transition:opacity .3s,transform .4s var(--ease)}
.nav__links a:hover{transform:translateY(-2px)}

/* pillar rows: number counts forward on hover */
.pillar__n{transition:transform .6s var(--ease),opacity .5s}
.pillar:hover .pillar__n{transform:translateX(6px);opacity:1}
.pillar h3{transition:transform .6s var(--ease)}
.pillar:hover h3{transform:translateX(4px)}

/* program slots slide their time column */
.slot{transition:background .5s var(--ease)}
.slot:hover{background:rgba(107,18,32,.05)}
.slot time{transition:color .4s,transform .5s var(--ease)}
.slot:hover time{color:var(--wine);transform:translateX(3px)}

/* speaker cards tilt slightly */
.spk{transition:background .5s var(--ease),transform .6s var(--ease),border-color .5s}
.spk:hover{transform:translateY(-6px) rotate(-.5deg);border-color:rgba(220,190,134,.6)}

/* the single ticket lifts as one object */
.one{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.one:hover{transform:translateY(-4px);box-shadow:0 30px 70px -30px rgba(0,0,0,.75)}

/* FAQ rows */
.q__btn{transition:padding-left .5s var(--ease)}
.q:hover .q__btn{padding-left:10px}

/* form fields glow on focus */
.field input,.field select{transition:border-color .4s,background .4s}
.field input:focus,.field select:focus{background:rgba(247,243,239,.05)}

/* footer wordmark breathes */
.foot__mark{transition:letter-spacing .8s var(--ease)}
.foot:hover .foot__mark{letter-spacing:.01em}

/* ============================================================
   REDUCED MOTION — everything static, nothing hidden
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .w > i,.ch,.stag > *{opacity:1 !important;transform:none !important;animation:none !important}
  .mask,.mask-l{clip-path:none !important;animation:none !important}
  .draw{transform:none !important;animation:none !important}
  .num.in b{animation:none !important}
  .hero__portrait img,.city__media img,.band__media img,.founder__fig img,
  .mani::before,.def__word,.band__quote,.ticker__cell::before{animation:none !important}
  .band__quote{opacity:1;transform:none}
  .btn::before{transition:none}
  .spk:hover{transform:none}
}

/* ============================================================
   MOBILE — keep the reveals, soften the parallax
   Touch scrolling makes large parallax offsets feel like lag,
   and the effect reads as jitter on a small viewport.
   ============================================================ */
@media (max-width:760px){
  @supports (animation-timeline:view()){
    @keyframes mediaPar{
      from{transform:translateY(-2.5%) scale(1.06)}
      to{transform:translateY(2.5%) scale(1.06)}
    }
    @keyframes mediaParSlow{
      from{transform:translateY(3%) scale(1.07)}
      to{transform:translateY(-3%) scale(1.07)}
    }
    @keyframes heroPar{
      from{transform:scale(1.08) translateY(-1.5%)}
      to{transform:scale(1.08) translateY(2%)}
    }
    /* the hero copy shouldn't fade while it is still the whole screen */
    .hero__grid > div:first-child{animation:none}
    /* the watermark drift is expensive at this size for little payoff */
    .mani::before{animation:none;transform:translate(-50%,-50%)}
  }
  /* tighter stagger so a long list doesn't crawl in on a phone */
  .in .w > i{animation-delay:calc(var(--i,0) * 32ms)}
  .stag.in > *{animation-delay:calc(var(--i,0) * 55ms)}
  .band__fig--b{margin-top:20px}
}

/* Hover flourishes are meaningless on touch and can stick after a tap. */
@media (hover:none){
  .btn::before{display:none}
  .spk:hover,.one:hover{transform:none}
  .pillar:hover{padding-left:0}
}

/* ============================================================
   CITY CARDS — real place photography
   These two are bright and blue-dominant, the opposite of the
   burgundy palette, so they get a light warm grade rather than a
   heavy filter, and crops that favour the horizon over empty sky.
   ============================================================ */
.city--miami .city__media img{object-position:50% 76%}
.city--dubai .city__media img{object-position:50% 58%}

/* ============================================================
   SPEAKERS — noir backdrop
   ============================================================ */
.stage{position:relative;isolation:isolate}
.stage__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.stage__bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(.3) contrast(1.1)}
.stage__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--wine-deep) 0%,rgba(62,10,19,.72) 45%,var(--wine-deep) 100%);
}
@supports (animation-timeline:view()){
  .stage__bg img{
    animation:mediaPar linear both;
    animation-timeline:view(block);
    animation-range:cover 0% cover 100%;
  }
}

/* ============================================================
   STRIP — full-bleed parallax divider
   ============================================================ */
.strip{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(300px,46vh,460px);
  display:grid;place-items:center;
  background:var(--ink);color:var(--paper);
}
.strip__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.strip__media img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:saturate(.8) contrast(1.05)}
.strip__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,9,.88),rgba(62,10,19,.84)),
             radial-gradient(70% 60% at 50% 45%,rgba(12,10,9,.35),transparent 70%);
}
.strip__in{
  max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,90px) var(--gut);
  text-align:center;
}
.strip__line{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.4vw,62px);line-height:1.1;letter-spacing:-.025em;
  max-width:20ch;margin-inline:auto;
}
.strip__line .it{font-style:italic;color:var(--accent)}
@supports (animation-timeline:view()){
  .strip__media img{
    animation:stripPar linear both;
    animation-timeline:view(block);
    animation-range:cover 0% cover 100%;
  }
  @keyframes stripPar{
    from{transform:translateY(-9%) scale(1.2)}
    to{transform:translateY(9%) scale(1.2)}
  }
}
@media (max-width:760px){
  @supports (animation-timeline:view()){
    @keyframes stripPar{
      from{transform:translateY(-3%) scale(1.08)}
      to{transform:translateY(3%) scale(1.08)}
    }
  }
}
@media (prefers-reduced-motion:reduce){
  .strip__media img,.stage__bg img{animation:none !important;transform:none !important}
}

/* ============================================================
   SVOYA — repositioning layer (curated global business room)
   ============================================================ */
.outc,.circ{--accent:var(--gold)}
@media(max-width:1180px){.nav__links{display:none}}

/* hero: tagline is longer than the old line, so size down a touch */
.hero h1{font-size:clamp(46px,9vw,146px)}
html[lang=uk] .hero h1{font-size:clamp(38px,7.2vw,118px)}
.hero__dates{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(18px,2.4vw,28px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero__dates span{border-left:1px solid var(--wine-bright);padding-left:12px}

/* statement strip used as the editorial line under the hero */
.strip__line--big{font-size:clamp(40px,7vw,104px);line-height:1;max-width:none}
.strip__sub{margin:18px auto 0;max-width:46ch;color:rgba(247,243,239,.84);font-size:clamp(15px,1.2vw,18px)}

/* the room: lede under heading */
.room__lede{margin:0 0 clamp(26px,3.4vw,44px);max-width:60ch}
.room__note{margin:clamp(22px,3vw,34px) 0 0;color:var(--grey);font-size:14px;max-width:70ch}

/* SVOYA Connections */
.conn{background:var(--paper);padding:clamp(80px,10vw,150px) 0}
.conn__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.conn__card{background:var(--wine-deep);color:var(--paper);padding:clamp(28px,3.6vw,52px);position:sticky;top:90px}
.conn__flag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.conn__big{font-family:var(--display);font-size:clamp(64px,8vw,120px);line-height:.9;letter-spacing:-.03em}
.conn__card p{margin:16px 0 0;color:rgba(247,243,239,.9);max-width:34ch}
.chips{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;border:1px solid rgba(220,190,134,.45);color:var(--gold);border-radius:100px;padding:5px 12px}
@media(max-width:860px){.conn__in{grid-template-columns:1fr}.conn__card{position:static}}

/* business outcomes */
.outc{background:var(--ink);color:var(--paper);padding:clamp(80px,10vw,150px) 0}
.outc .spk p{color:rgba(247,243,239,.8)}

/* cities: one platform path */
.path{margin:clamp(34px,4.4vw,56px) 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;font-family:var(--display);font-size:clamp(20px,2.6vw,34px);text-align:center}
.path i{font-style:normal;color:var(--gold);font-family:var(--body);font-size:.7em}
.path__cap{margin:12px auto 0;text-align:center;color:rgba(247,243,239,.72);font-size:14px;max-width:56ch}

/* SVOYA Circle */
.circ{background:var(--wine-deep);color:var(--paper);padding:clamp(80px,10vw,150px) 0}
.circ__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(247,243,239,.18)}
.circ__item{padding:clamp(22px,2.6vw,34px) clamp(14px,2vw,28px) 0 0}
.circ__item+.circ__item{padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(247,243,239,.14)}
.circ__item b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,27px);line-height:1.1;margin-bottom:10px}
.circ__item span{color:rgba(247,243,239,.84);font-size:14px}
@media(max-width:860px){.circ__grid{grid-template-columns:1fr 1fr}.circ__item:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:520px){.circ__grid{grid-template-columns:1fr}.circ__item+.circ__item{padding-left:0;border-left:0;border-top:1px solid rgba(247,243,239,.14);margin-top:22px}}

/* invitation process */
.steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(247,243,239,.18);font-size:15px}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-style:italic;color:var(--gold);font-size:14px;min-width:22px}
.steps li:last-child{border-bottom:1px solid rgba(247,243,239,.18)}


/* upcoming chapters */
.ticker__in{grid-template-columns:repeat(4,1fr)}
.ticker__cell--soon .ticker__city{opacity:.62}
@media(max-width:1100px){.ticker__in{grid-template-columns:repeat(2,1fr)}.ticker__cell:nth-child(3){border-left:0}.ticker__cell:nth-child(n+3){border-top:1px solid rgba(247,243,239,.16)}}
@media(max-width:700px){.ticker__in{grid-template-columns:1fr}}
.hero__dates .soon{color:rgba(247,243,239,.62);border-left-color:rgba(247,243,239,.3)}
.prog__note{margin:0 0 clamp(24px,3vw,40px);font-size:13px;letter-spacing:.04em;color:var(--gold-deep);border-left:2px solid var(--wine);padding-left:12px}
.stage__lede{margin:0 0 clamp(28px,3.6vw,48px)}
.circ .lede{color:var(--paper)}
.next{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(18px,2.4vw,32px)}
.next__c{border:1px dashed rgba(247,243,239,.28);padding:clamp(22px,2.6vw,34px);display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.next__c h3{font-family:var(--display);font-size:clamp(32px,4.2vw,58px);line-height:.95;letter-spacing:-.03em}
.next__c span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(220,190,134,.4);border-radius:100px;padding:6px 12px}
.next__c p{flex-basis:100%;margin:0;color:rgba(247,243,239,.72);font-size:14px}
@media(max-width:820px){.next{grid-template-columns:1fr}}