/* VERSION 26 — THE CALLING. Homepage-only prologue. */
.opening {
  display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;
  background:#100d0f;color:#f4eee5;font-family:var(--sans,'DM Sans',sans-serif);
  -webkit-font-smoothing:antialiased;
}
html.opening-active{overflow:hidden;scroll-behavior:auto}
html.opening-active .opening{display:block}
.opening::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0005,transparent 20%,transparent 80%,#0007)}
.opening-grid{position:absolute;inset:0;z-index:1;opacity:.32;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 6px,#fae4c805 7px);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
.opening-crimson{position:absolute;inset:-30%;z-index:-1;background:radial-gradient(ellipse at 74% 55%,#a3163645 0%,#75132d2c 19%,transparent 48%),radial-gradient(ellipse at 15% 85%,#b7213824,transparent 45%);animation:callingLight 11.8s ease-in-out both;pointer-events:none}
.opening-aperture{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#e5495614 49%,#ff9a8c0a 50%,transparent 61%);mix-blend-mode:screen;animation:callingSweep 11.8s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
.opening-top,.opening-bottom{position:absolute;z-index:5;left:clamp(25px,4.8vw,88px);right:clamp(25px,4.8vw,88px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.opening-top{top:clamp(24px,4.2vw,54px)}
.opening-bottom{bottom:clamp(25px,5vh,65px)}
.opening-brand{display:inline-flex;align-items:center;gap:14px;font:500 9px/1.45 var(--mono,'DM Mono',monospace);letter-spacing:.12em;color:#f1e9e1}
.opening-brand-symbol{color:#d4787d;flex:none}
.opening-top-caption,.opening-skip,.opening-bottom-copy,.opening-enter,.opening-eyebrow{font-family:var(--mono,'DM Mono',monospace);font-weight:400;letter-spacing:.14em}
.opening-top-caption{font-size:9px;color:#c2a8a3}
.opening-top-caption span,.opening-slash{color:#ba6168;padding:0 9px}
.opening-skip{color:#f4eee5;padding:12px 0 12px 12px;font-size:10px;border:0;border-bottom:1px solid #f4eee566;background:none;white-space:nowrap;transition:color .25s,border-color .25s}
.opening-skip span{margin-left:16px;color:#e39498;font-size:17px;vertical-align:-2px}
.opening-skip:hover,.opening-skip:focus-visible{color:#e4978b;border-color:#e4978b}
.opening-narrative{position:absolute;z-index:2;inset:15% 7% 17%;display:flex;justify-content:flex-start;align-items:center;text-align:left}
.opening-scene{position:absolute;width:100%;max-width:1500px;opacity:0;visibility:hidden;pointer-events:none;filter:blur(9px);transform:translateY(20px);transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .8s ease,visibility 0s .7s}
.opening[data-scene="1"] .opening-scene-one,.opening[data-scene="2"] .opening-scene-two,.opening[data-scene="3"] .opening-scene-three{opacity:1;visibility:visible;filter:blur(0);transform:none;transition-delay:0s}
.opening-eyebrow{display:block;font-size:clamp(9px,.85vw,11px);color:#dca6a6;letter-spacing:.24em;margin-bottom:clamp(23px,3.8vh,42px)}
.opening-headline{margin:0;color:#f9f1e5;font:500 clamp(54px,7.2vw,118px)/1.02 var(--sans,'DM Sans',sans-serif);letter-spacing:-.065em;overflow:visible}
.opening-headline em{font:italic 1.14em/.96 var(--serif,'Instrument Serif',Georgia,serif);letter-spacing:-.044em;color:#e8abaa;white-space:nowrap}
.opening-affirmation{font:400 clamp(20px,2.1vw,31px)/1.4 var(--sans,'DM Sans',sans-serif);letter-spacing:-.025em;color:#d4c6c1;margin:clamp(25px,4vh,42px) 0 0;max-width:700px}
.opening-affirmation em{font:italic 1.18em var(--serif,'Instrument Serif',Georgia,serif);color:#eee0d7}
.opening-scene-two .opening-headline{font-size:clamp(52px,6.8vw,116px);line-height:1.08}
.opening-thought{display:block}
.opening-thought + .opening-thought{margin-top:.28em}
.opening-scene-one .opening-headline,.opening-affirmation,.opening-scene-two .opening-headline,.opening-scene-three .opening-name{animation:openingInk .9s cubic-bezier(.22,1,.36,1) both;animation-play-state:paused}
.opening[data-scene="1"] .opening-scene-one .opening-headline,.opening[data-scene="1"] .opening-affirmation,.opening[data-scene="2"] .opening-scene-two .opening-headline,.opening[data-scene="3"] .opening-name{animation-play-state:running}
.opening-scene-one .opening-headline{animation-delay:.18s}
.opening-affirmation{animation-delay:.5s}
.opening-scene-two .opening-headline,.opening-scene-three .opening-name{animation-delay:.15s}
.opening-scene-three{height:100%;display:flex;flex-direction:column;justify-content:center}
.opening-scene-three .opening-eyebrow,.opening-prelude,.opening-name{position:relative;z-index:2}
.opening-prelude{font:400 clamp(29px,3.5vw,58px)/1.12 var(--serif,'Instrument Serif',Georgia,serif);color:#d5c5c2;letter-spacing:-.025em;margin:0 0 18px}
.opening-name{font-size:clamp(65px,12vw,220px);line-height:.88;white-space:nowrap;letter-spacing:-.08em}
.opening-name-period{color:#cf626e}
.opening-portrait{position:absolute;right:-2%;top:0;width:43%;height:100%;z-index:0;opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s cubic-bezier(.16,1,.3,1),opacity 1.2s;overflow:hidden;pointer-events:none;box-shadow:0 0 100px #8c19381f}
.opening-portrait img{width:100%;height:100%;object-fit:cover;object-position:53% 40%;filter:saturate(.65) contrast(1.04) brightness(.82);transform:scale(1.1);transition:transform 3.4s cubic-bezier(.16,1,.3,1)}
.opening-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#100d0fe8,transparent 55%),linear-gradient(0deg,#100d0f8c,transparent 40%),linear-gradient(130deg,#941a3b20,transparent 70%)}
.opening[data-scene="3"] .opening-portrait{clip-path:inset(0);opacity:1}
.opening[data-scene="3"] .opening-portrait img{transform:scale(1)}
.opening-chapters{display:flex;width:112px;gap:6px;align-items:center}
.opening-chapter{display:block;flex:1;height:2px;background:#f5e9dc2e;overflow:hidden}
.opening-chapter::after{content:"";display:block;width:100%;height:100%;background:#d67881;transform:scaleX(0);transform-origin:left;transition:transform 5.2s linear}
.opening-chapter-two::after{transition-duration:3.2s}
.opening-chapter-three::after{transition-duration:3.4s}
.opening[data-scene="1"] .opening-chapter-one::after,.opening[data-scene="2"] .opening-chapter-one::after,.opening[data-scene="2"] .opening-chapter-two::after,.opening[data-scene="3"] .opening-chapter::after{transform:scaleX(1)}
.opening[data-scene="2"] .opening-chapter-one::after,.opening[data-scene="3"] .opening-chapter-one::after,.opening[data-scene="3"] .opening-chapter-two::after{transition-duration:0s}
.opening-bottom-copy{font-size:9px;color:#baa19e}
.opening-enter{border:1px solid #a9797d;background:#21141899;color:#f7eee5;border-radius:100px;font-size:10px;padding:17px 22px;white-space:nowrap;transition:background .35s,border-color .35s,transform .35s}
.opening-enter span{font-size:19px;color:#e39498;vertical-align:-2px;margin-left:25px}
.opening-enter:hover,.opening-enter:focus-visible{background:#f4eee5;color:#221718;border-color:#f4eee5;transform:translateY(-3px)}
.opening :focus-visible{outline:2px solid #e49b8f;outline-offset:7px}
.opening.is-leaving{opacity:0;transform:translateY(-2vh);transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1);pointer-events:none}
.opening.is-resetting *{animation:none!important;transition:none!important}
html.opening-arrival .hero .name-wrap{animation:callingHeroType 1.2s cubic-bezier(.22,1,.36,1) both}
html.opening-arrival .portrait-frame{animation:callingHeroPortrait 1.4s cubic-bezier(.22,1,.36,1) both}
.footer .opening-replay{font-size:8px;letter-spacing:.07em;white-space:nowrap;transition:color .25s}
.footer .opening-replay:hover,.footer .opening-replay:focus-visible{color:#e69a82}
.motion-paused .opening-replay{display:none}
@keyframes callingLight{0%{transform:translate(-6%,3%) rotate(-14deg);opacity:.5}45%{opacity:1}100%{transform:translate(7%,-4%) rotate(8deg);opacity:.85}}
@keyframes callingSweep{0%{transform:translateX(-65%);opacity:0}35%{opacity:.6}100%{transform:translateX(50%);opacity:0}}
@keyframes openingInk{from{opacity:0;filter:blur(9px);transform:translateY(24px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes callingHeroType{from{opacity:.25;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes callingHeroPortrait{from{opacity:.5;transform:translateY(35px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:750px){
  .opening-top,.opening-bottom{left:25px;right:25px}
  .opening-top{top:max(22px,env(safe-area-inset-top))}
  .opening-bottom{bottom:max(30px,env(safe-area-inset-bottom))}
  .opening-brand{font-size:8px;gap:9px}
  .opening-top-caption,.opening-bottom-copy{display:none}
  .opening-skip{font-size:9px;padding:10px 0 10px 5px}
  .opening-skip span{margin-left:9px}
  .opening-narrative{inset:16% 25px 19%}
  .opening-eyebrow{font-size:9px;margin-bottom:29px}
  .opening-headline{font-size:clamp(38px,10.4vw,72px);line-height:1.08;letter-spacing:-.06em}
  .opening-headline em{white-space:normal}
  .opening-affirmation{font-size:clamp(18px,4.8vw,25px);line-height:1.45;max-width:450px;margin-top:30px}
  .opening-desktop-break{display:none}
  .opening-scene-two .opening-headline{font-size:clamp(43px,12vw,83px);line-height:1.03}
  .opening-thought em{display:block}
  .opening-thought + .opening-thought{margin-top:.5em}
  .opening-scene-three{justify-content:flex-end;padding-bottom:12%}
  .opening-scene-three .opening-eyebrow{margin-bottom:18px}
  .opening-prelude{font-size:30px}
  .opening-name{font-size:clamp(46px,13.1vw,100px);line-height:.92;letter-spacing:-.08em}
  .opening-portrait{right:-25px;top:-4%;width:85%;height:97%}
  .opening-portrait::after{background:linear-gradient(0deg,#100d0f 0%,#100d0fd6 20%,transparent 70%),linear-gradient(90deg,#100d0f88,transparent 75%)}
  .opening[data-scene="3"] .opening-portrait{opacity:.9}
  .opening-enter{font-size:8px;padding:13px 15px}
  .opening-enter span{margin-left:9px;font-size:16px}
  .opening-chapters{width:86px}
  .footer .opening-replay{grid-column:1;font-size:8px}
}
@media(max-width:360px){
  .opening-top,.opening-bottom{left:18px;right:18px}
  .opening-narrative{left:18px;right:18px}
  .opening-headline{font-size:10.7vw}
  .opening-scene-two .opening-headline{font-size:12vw}
  .opening-name{font-size:13.1vw}
}
@media(max-height:620px) and (min-width:751px){
  .opening-narrative{inset:18% 7% 19%}
  .opening-eyebrow{margin-bottom:16px}
  .opening-headline{font-size:min(7.2vw,13vh)}
  .opening-affirmation{font-size:20px;margin-top:20px}
  .opening-desktop-break{display:none}
  .opening-scene-two .opening-headline{font-size:min(6.8vw,14vh)}
  .opening-name{font-size:12vw}
}
@media(max-height:500px){
  .opening-top{top:12px}.opening-bottom{bottom:12px}
  .opening-narrative{inset:21% 7% 22%}
  .opening-eyebrow{display:none}
  .opening-headline{font-size:10.5vh}
  .opening-affirmation{font-size:4vh;line-height:1.3;margin-top:12px;max-width:none}
  .opening-desktop-break{display:none}
  .opening-scene-two .opening-headline{font-size:13vh}
  .opening-thought em{display:inline}
  .opening-thought + .opening-thought{margin-top:.25em}
  .opening-prelude{font-size:6vh;margin-bottom:10px}
  .opening-name{font-size:18vh}
  .opening-scene-three{padding-bottom:0;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  html.opening-active{overflow:auto}
  .opening{display:none!important}
  .opening *{animation:none!important;transition:none!important}
  html.opening-arrival .hero .name-wrap,html.opening-arrival .portrait-frame{animation:none!important}
}
