/* Intercessors Awake page: cinematic scroll design (loads after style.css) */
html{scroll-snap-type:none}
/* ---- 1. hero: giant word that zooms as you scroll ---- */
.cine{height:230vh;position:relative;--p:0}
.cine-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;align-content:center;text-align:center;background:var(--ink)}
.cine-bg{position:absolute;inset:-6%;background:linear-gradient(rgba(18,8,12,.5),rgba(18,8,12,.85)),url(images/event-2.jpg) 62% 20%/cover;transform:scale(calc(1.05 + var(--p)*.2))}
.cine-stick>*{position:relative}
.cine-top{font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-lt);font-size:clamp(.8rem,2vw,1.2rem);opacity:calc(1 - var(--p)*3);margin-bottom:1rem}
.mega{position:relative;font:400 clamp(5.5rem,27vw,27rem)/.8 var(--serif);text-transform:uppercase;letter-spacing:-.02em;color:var(--cream);transform:scale(calc(1 + var(--p)*6));opacity:calc(1.2 - var(--p)*1.6);will-change:transform;margin:0}
.mega::after{content:attr(data-t);position:absolute;inset:0;color:var(--gold-lt);clip-path:inset(44% 0 44% 0)}
.cine-sub{font:italic 400 clamp(1.5rem,3.6vw,2.8rem)/1.2 var(--serif);color:var(--gold-lt);margin-top:1.6rem;opacity:calc(1 - var(--p)*3)}
.cine-sub small{display:block;font:700 .85rem var(--body);font-style:normal;letter-spacing:.14em;color:var(--gold);margin-top:.4rem;text-transform:uppercase}
.cine-cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;opacity:calc(1 - var(--p)*3)}
.cine-scroll{position:absolute!important;bottom:1.4rem;left:50%;translate:-50% 0;font-size:.8rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);opacity:calc(1 - var(--p)*6)}
.cine-scroll::after{content:"";display:block;width:2px;height:38px;margin:.5rem auto 0;background:linear-gradient(var(--gold),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---- 2. words light up as you read ---- */
.wd{opacity:.2;transition:opacity .35s}.wd.on{opacity:1}
/* ---- 3. beliefs: pinned, one belief per scroll step ---- */
.pin{height:420vh;position:relative;background:var(--ink);--p:0}
.pin-in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:6rem max(1.2rem,calc((100% - var(--w))/2)) 3rem;overflow:hidden}
.pin-bg{position:absolute;inset:-4%;background:linear-gradient(rgba(18,8,12,.84),rgba(18,8,12,.93)),url(images/event-1.jpg) center/cover;transform:scale(calc(1 + var(--p)*.12))}
.pin-in>*{position:relative}
.pin-stage{display:grid;margin-top:2.2rem;max-width:20ch}
.pin-stage p{grid-area:1/1;font:700 clamp(2.1rem,6vw,5.6rem)/1.02 var(--head);letter-spacing:-.035em;color:var(--cream);opacity:0;transform:translateY(60px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.pin-stage p.on{opacity:1;transform:none}.pin-stage p.past{opacity:0;transform:translateY(-60px)}
.pin-hint{position:absolute!important;bottom:1.6rem;left:50%;translate:-50% 0;color:var(--gold-lt);font-weight:700;letter-spacing:.2em;font-size:.8rem;text-transform:uppercase}
/* ---- 4. floating photo collage behind the vision ---- */
.collage{position:absolute;inset:0;pointer-events:none;z-index:0}
.collage img{position:absolute;width:clamp(150px,17vw,280px);height:auto;border-radius:14px;border:2px solid rgba(185,154,93,.6);box-shadow:0 30px 60px rgba(0,0,0,.6);opacity:.55;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
.collage img:first-child{left:2%;bottom:5%}.collage img:last-child{right:3%;top:6%}
@media(max-width:1000px){.collage{display:none}}

/* ---- SORATM: no photo, so the hero and pinned section use light and colour ---- */
.mega.sm{font-size:clamp(4rem,19vw,19rem)}
.cine-bg.plain{background:radial-gradient(60% 50% at 70% 40%,rgba(107,18,38,.75),transparent 70%),radial-gradient(40% 40% at 20% 80%,rgba(107,18,38,.4),transparent 70%),var(--ink);transform:none;overflow:hidden}
.cine-bg.plain::after{content:"";position:absolute;inset:-35%;background:conic-gradient(from 195deg at 80% 48%,transparent 0 38deg,rgba(233,214,160,.15) 52deg,transparent 68deg,rgba(233,214,160,.1) 92deg,transparent 108deg);animation:sweep 12s ease-in-out infinite alternate}
.pin-bg.plain{background:radial-gradient(70% 60% at 25% 30%,rgba(107,18,38,.6),transparent 70%),radial-gradient(40% 40% at 85% 85%,rgba(107,18,38,.35),transparent 70%),var(--ink);transform:none}
.pin .intro{margin-top:1.2rem}

/* ===== SORATM desktop layouts: use the whole width ===== */
.cine-stick>.cine-bg,.pin-in>.pin-bg{position:absolute}
.pin-r{display:none}
@media(min-width:1000px){
  /* pinned beliefs */
  .pin-in{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;column-gap:4rem}
  .pin-r{display:block;text-align:center}
  .pin-r img{width:min(100%,460px);height:auto;margin:0 auto 2rem;opacity:.16}
  .pin-list{list-style:none;text-align:left;max-width:420px;margin:0 auto}
  .pin-list li{font:700 clamp(1.5rem,2.6vw,2.4rem)/1.2 var(--head);letter-spacing:-.02em;color:rgba(246,239,228,.22);padding:.7rem 0;border-bottom:1px solid rgba(185,154,93,.25);transition:color .5s,padding .5s}
  .pin-list li.on{color:var(--gold-lt);padding-left:1rem}
  /* continuation of beliefs */
  #believe .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;align-items:center}
  #believe .quote{margin:0}
  /* commitment: three cards in a row */
  .commit{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
  .commit li{display:flex;flex-direction:column;gap:.6rem;padding:2rem;border:1px solid rgba(185,154,93,.4);border-radius:var(--r);background:rgba(255,255,255,.04);transition:transform .35s,border-color .35s}
  .commit li:last-child{border-bottom:1px solid rgba(185,154,93,.4)}
  .commit li::before{font-size:4.4rem}
  .commit li:hover{transform:translateY(-8px);border-color:var(--gold)}
  /* mandate: title and verse on the left, the five points on the right */
  #carry .wrap{display:grid;grid-template-columns:1fr 1.25fr;column-gap:5rem;align-items:center}
  #carry .wrap>h2,#carry .wrap>.intro,#carry .wrap>.quote{grid-column:1}
  #carry .wrap>.rows{grid-column:2;grid-row:1/4;margin:0}
  #carry .rows li{font-size:clamp(1.25rem,1.9vw,1.7rem);padding:1.2rem 0}
  #carry .quote{margin-top:2rem}
  /* expressions: text on the left, the Intercessors Awake card on the right */
  #expressions .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:4rem;row-gap:.6rem;align-items:center}
  #expressions .wrap>:nth-child(-n+3){grid-column:1}
  #expressions .feature{grid-column:2;grid-row:1/4;margin:0;grid-template-columns:1fr;text-align:left}
  #expressions .feature img{height:110px}
  #expressions .wrap>:nth-child(5),#expressions .wrap>:nth-child(6){grid-column:1/-1}
  #expressions .wrap>:nth-child(5){margin-top:2.4rem}
}

.cine-bg.plain::after{display:none}

/* ---- second scene: after the word zooms past, the mandate appears (no empty screen) ---- */
.cine-stick>.cine-end{position:absolute;left:50%;top:50%;width:min(92%,1000px);translate:-50% -50%;text-align:center;font:italic 400 clamp(2rem,5.6vw,4.8rem)/1.1 var(--serif);color:var(--gold-lt);opacity:calc((var(--p) - .5)*4);transform:translateY(calc((1 - var(--p))*40px))}
.cine-end small{display:block;font:700 .85rem var(--body);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}

/* ---- beliefs: progress ring with the scepter emblem, list sized to fit the screen ---- */
.pin-r{display:none}
@media(min-width:1000px){
  .pin-r{display:flex;flex-direction:column;align-items:center}
  .pin h2{font-size:clamp(2.2rem,min(5vw,9vh),4.4rem)}
  .pin-stage p{font-size:clamp(2rem,min(5.4vw,10.5vh),5rem)}
  .ring{position:relative;width:clamp(150px,30vh,230px);aspect-ratio:1;margin:0 auto 1.4rem}
  .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
  .ring circle{fill:none;stroke-width:3;stroke-linecap:round}
  .ring .r0{stroke:rgba(185,154,93,.28)}
  .ring .r1{stroke:var(--gold);stroke-dasharray:553;stroke-dashoffset:calc(553 - 553*var(--p))}
  .ring img{position:absolute;inset:0;margin:auto;width:54%;height:auto;opacity:1}
  .pin-list li{font-size:clamp(1.2rem,4.2vh,2.2rem);padding:.5rem 0}
}
/* ---- visit pop-up ---- */
#goto p{font-size:1.15rem;margin-bottom:.4rem}
#goto h3 i{font:italic 400 1.08em/1 var(--serif);color:var(--gold-lt)}