/* Horizon Navy — /script-of-results (Our model): the scroll story.
   White page with the Work page's sky as the accent. The stage fills the screen and holds the page
   while the story plays beat by beat; assets/js/model.js sets each beat's --bo (opacity) and --by (offset). */

@property --gx{syntax:"<percentage>";inherits:true;initial-value:70%}
@property --gy{syntax:"<percentage>";inherits:true;initial-value:30%}

.page-model{
  --ink-soft:#41557C;
  --ink-mute:#7185A8;
  --grad-text:linear-gradient(110deg,#3FA7D0 0%,#5B88BE 26%,#6479A9 48%,#716F9A 72%,#2E3866 100%);
}

/* ---------- Stage ---------- */
.m-story{position:relative;height:100vh;height:100svh}
.m-stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;isolation:isolate;
  background:#FFFFFF;
}
/* A soft piece of the sky, drifting toward the pointer (as on /work). */
.m-aura{
  position:absolute;z-index:-1;
  left:49.5%;top:-28%;
  translate:var(--ax,0px) 0;
  width:min(78vw,1080px);aspect-ratio:1.7;border-radius:50%;
  background:
    radial-gradient(closest-side at 30% 55%,rgba(63,167,208,.26),transparent),
    radial-gradient(closest-side at 62% 45%,rgba(113,111,154,.22),transparent),
    radial-gradient(closest-side at 82% 30%,rgba(222,214,238,.5),transparent);
  filter:blur(44px);
  transition:translate 1.6s var(--ease);
  will-change:transform;
  animation:m-aura 16s ease-in-out infinite alternate;
  pointer-events:none;
}
.m-aura::after{
  content:"";position:absolute;left:-40%;top:120%;
  width:70%;aspect-ratio:1.4;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,167,208,.12),transparent);
}
@keyframes m-aura{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,7%,0) scale(1.12)}}
.m-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%}

/* ---------- Beats ---------- */
.m-beat{
  position:absolute;z-index:1;
  left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));
  top:50%;
  width:min(40%,500px);
  color:var(--hn-navy);
  opacity:var(--bo,0);
  transform:translate3d(0,calc(-50% + var(--by,0px)),0);
  will-change:opacity,transform;
}
.m-beat[data-hidden]{visibility:hidden}
.m-beat--intro,.m-beat--outro{left:var(--gutter);right:var(--gutter);width:auto;text-align:center}
.m-beat--outro{top:40%}
.m-beat--outro .m-head{max-width:20ch;margin-inline:auto}
.m-beat--outro .m-text{margin-inline:auto}

.m-title{
  margin:0 auto;
  width:fit-content;
  padding:0 .04em .08em;
  font-weight:200;
  font-size:clamp(72px,13vw,200px);
  line-height:.9;letter-spacing:-.055em;
  background:
    radial-gradient(42% 70% at var(--gx) var(--gy),rgba(63,167,208,.95),transparent 70%),
    linear-gradient(110deg,#5B88BE 0%,#6479A9 34%,#716F9A 62%,#2E3866 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:--gx 1.2s var(--ease),--gy 1.2s var(--ease);
}
.m-intro{
  margin:clamp(20px,3vh,32px) auto 0;
  font-weight:300;
  font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink-soft);
}
/* "forward": the word glides in from the left, then a light keeps sweeping through it, left to right.
   The full stop drops in as the word lands, and catches the light each time it passes.
   Both wait for .is-live, so they play when the page is seen, not while it is prepared in the background. */
.m-end{white-space:nowrap}
.m-forward,.m-dot{display:inline-block}
.m-forward{
  background:linear-gradient(90deg,#5B88BE 0%,#716F9A 30%,#3FA7D0 45%,#9FC4DF 50%,#3FA7D0 55%,#716F9A 70%,#2E3866 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.m-dot{transform-origin:50% 85%}
.js .m-story:not(.is-live) .m-forward,.js .m-story:not(.is-live) .m-dot{opacity:0}
.is-live .m-forward{animation:m-step 1.1s var(--ease) .35s both,m-sweep 3.6s var(--ease) 1.4s infinite}
.is-live .m-dot{animation:m-drop .75s linear 1.05s both,m-glint 3.6s var(--ease) 1.4s infinite}
@keyframes m-step{from{opacity:0;transform:translateX(-.8em);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes m-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes m-drop{
  0%{opacity:0;transform:translateY(-.9em) scale(.5);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  45%{opacity:1;transform:translateY(0) scale(1.25,.7);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  70%{transform:translateY(-.14em) scale(.92,1.1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  85%{transform:translateY(0) scale(1.06,.94);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  100%{opacity:1;transform:none}
}
@keyframes m-glint{0%,24%{color:var(--ink-soft)}34%{color:#3FA7D0}52%,100%{color:var(--ink-soft)}}

.m-label{
  display:block;margin:0 0 clamp(16px,2.4vh,26px);
  font-weight:600;font-size:clamp(11px,.9vw,12px);line-height:1.4;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-mute);
}
.m-label--fix{color:#2F8DB3}

/* The problem, said the way clients say it. */
.m-quote{margin:0;position:relative}
.m-quote p{
  margin:0;
  font-weight:200;
  font-size:clamp(36px,4.4vw,66px);
  line-height:1.06;letter-spacing:-.035em;
  color:var(--hn-navy);
}
.m-quote::before{
  content:"\201C";
  display:block;height:.42em;margin:0 0 .12em -.04em;
  font-weight:200;font-size:clamp(84px,9vw,140px);line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.m-head{
  margin:0;
  font-weight:200;
  font-size:clamp(32px,3.7vw,54px);
  line-height:1.08;letter-spacing:-.03em;
  color:var(--hn-navy);
}
.m-head em{
  font-style:normal;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.m-text{
  max-width:34ch;margin:clamp(16px,2.4vh,24px) 0 0;
  font-size:clamp(16px,1.2vw,18px);line-height:1.6;
  color:var(--ink-soft);
}

/* ---------- Scroll cue: also a button to the next beat ---------- */
.m-cue{
  position:absolute;z-index:2;left:50%;bottom:clamp(14px,4vh,38px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:0;padding:10px 16px;border:0;border-radius:14px;
  background:none;font:inherit;
  transform:translateX(-50%);
  color:var(--ink-mute);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.m-cue:hover{color:var(--hn-navy)}
.m-cue:active{transform:translateX(-50%) translateY(2px)}
.m-cue:focus-visible{outline:2px solid var(--hn-blue);outline-offset:2px}
.m-cue__mouse{position:relative;width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px}
.m-cue__wheel{
  position:absolute;left:50%;top:7px;
  width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:#3FA7D0;
  animation:m-wheel 1.8s var(--ease) infinite;
}
/* A small nudge as each move lands. */
.m-cue.is-landed .m-cue__mouse{animation:m-land .5s var(--ease)}
@keyframes m-land{0%{transform:none}30%{transform:translateY(3px) scale(1.08)}100%{transform:none}}
@keyframes m-wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}80%{opacity:0;transform:translateY(9px)}100%{opacity:0}}
.m-cue__text{font-weight:600;font-size:10px;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
@media (hover:none){.m-cue__mouse{width:20px;height:20px;border:0}.m-cue__mouse::before{content:"";position:absolute;inset:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) scale(.6);animation:m-chev 1.8s var(--ease) infinite}.m-cue__wheel{display:none}}
@keyframes m-chev{0%,100%{transform:translateY(-3px) rotate(45deg) scale(.6)}50%{transform:translateY(3px) rotate(45deg) scale(.6)}}

/* ---------- Phones and narrow screens: words on top, picture below ---------- */
@media (max-width:899px){
  .m-beat{
    top:calc(var(--header-h) + clamp(28px,9vh,96px));
    width:auto;right:var(--gutter);
    transform:translate3d(0,var(--by,0px),0);
  }
  .m-beat--intro{top:50%;transform:translate3d(0,calc(-50% + var(--by,0px)),0)}
  .m-beat--outro{top:calc(var(--header-h) + 6vh)}
  .m-quote p{font-size:clamp(30px,8.4vw,44px)}
  .m-quote::before{font-size:72px}
  .m-head{font-size:clamp(28px,7.6vw,40px)}
  .m-text{font-size:16px;margin-top:12px}
  .m-label{margin-bottom:12px}
}
@media (max-width:899px) and (max-height:700px){
  .m-quote::before{display:none}
  .m-text{display:none}
  .m-beat--outro .m-text{display:block}
}

/* ---------- Closing line: a rounded navy card on white (same shape as the Horizon Alumni card) ---------- */
.m-close{padding:clamp(24px,4vw,48px) 0 clamp(56px,7vw,96px);background:#FFFFFF}
.m-close__card{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;
  padding:clamp(28px,4vw,52px);
  border:1px solid rgba(221,227,234,.14);border-radius:18px;
  background:linear-gradient(180deg,#172B52 0%,#101D3A 60%);
}
.m-close__card .h2{margin:0;max-width:none;color:var(--hn-ivory)}
.m-close__card .btn{flex:none}
.m-close__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}

/* ---------- Without JavaScript: the words, in order ---------- */
html:not(.js) .m-story{height:auto}
html:not(.js) .m-stage{position:relative;height:auto;padding:calc(var(--header-h) + 48px) 0 64px}
html:not(.js) .m-canvas,html:not(.js) .m-cue{display:none}
html:not(.js) .m-beat{position:relative;top:auto;left:auto;width:auto;max-width:640px;margin:0 auto 72px;padding:0 var(--gutter);opacity:1;transform:none}