/* the House of White Wings' calligraphy (its own fonts, served with its pages) */
@font-face{font-family:"Aref Ruqaa";src:url(../../ww/fonts/ArefRuqaa-700.ttf);font-weight:700;font-display:block}
@font-face{font-family:"Amiri";src:url(../../ww/fonts/Amiri-700.ttf);font-weight:700;font-display:block}
/* The opening film's overlay (intro.js). The film itself is the live 3D city behind it; this layer is only the
   letterbox, the words, the island names, the dissolves and the title. Only transform and opacity move;
   no filters, no blend modes (cheap tablets). */
.story{--bar:min(9.5vh,max(0px,calc((100vh - 100vw / 2.2) / 2)));--safe-top:max(calc(var(--bar) + 5vh),calc(env(safe-area-inset-top,0px) + 66px));position:fixed;inset:0;z-index:60;overflow:hidden;background:transparent;color:#FFF8EE;-webkit-user-select:none;user-select:none}
.story[hidden]{display:none}
.story.is-leaving{pointer-events:none}
.is-leaving .st-ctl{display:none}
body:has(.story:not([hidden])) :is(#labels,.hud,.counter,.camctl){opacity:0;pointer-events:none}
body:has(.story:not([hidden]):not(.is-leaving)) .dock{opacity:0;pointer-events:none} /* the CTA arrives with the wordmark, at the hand-off */

/* the cover hides the city until the first picture is drawn (also first paint) */
.st-cover{position:absolute;inset:0;background:#1B2450;pointer-events:none}
.is-full .st-cover{background:#2A3466}
.st-cover.is-still{background:rgba(10,16,51,.35)}
.story:empty{background:#1B2450}

/* dissolves: a frozen picture of the last shot, and a warm white for the House of White Wings */
.st-snap{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.st-white{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 50% 45%,#FFFDF8 0%,#FFF6E8 60%,#F8E9D6 100%)}
/* the sun in the lens (dawn and golden hour) and a soft film grain over everything */
.st-flare{position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden}
.st-flare i{position:absolute;left:0;top:0;border-radius:50%}
.st-sunglow{width:70vmax;height:70vmax;background:radial-gradient(circle,rgba(255,244,222,.95) 0,rgba(255,226,186,.55) 4%,rgba(255,206,160,.22) 14%,rgba(255,190,150,.08) 32%,rgba(255,190,150,0) 55%)}
.st-rays{width:90vmax;height:90vmax;background:repeating-conic-gradient(from 0deg,rgba(255,236,206,.10) 0deg 1.6deg,rgba(255,236,206,0) 1.6deg 9deg);-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 52%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 52%)}
.st-ghost{width:9vmin;height:9vmin;background:radial-gradient(circle,rgba(255,214,170,0) 40%,rgba(255,214,170,.16) 62%,rgba(255,214,170,0) 72%)}
.st-ghost.g1{width:16vmin;height:16vmin;background:radial-gradient(circle,rgba(170,220,255,.09) 0,rgba(170,220,255,0) 70%)}
.st-ghost.g2{width:5vmin;height:5vmin;background:radial-gradient(circle,rgba(255,200,230,.18) 0,rgba(255,200,230,0) 70%)}
.st-grain{position:absolute;inset:-160px;pointer-events:none;opacity:.13;background-repeat:repeat;background-size:160px 160px}
.st-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 78% 72% at 50% 50%,rgba(10,14,40,0) 58%,rgba(10,14,40,.34) 100%)}

/* letterbox (2.2:1 on wide screens); it opens for the reveal. Phones in portrait: none */
.st-bar{position:absolute;inset-inline:0;background:#070912;height:var(--bar)}
.st-bar-top{top:0;transform-origin:top}
.st-bar-bot{bottom:0;transform-origin:bottom}
.no-bars{--bar:0px}
.no-bars .st-bar{display:none}

/* the words: big, centred, landing one by one */
.st-lines{position:absolute;inset:0;pointer-events:none}
.st-say{position:absolute;inset-inline:0;top:var(--safe-top);display:grid;align-content:start;justify-items:center;gap:.25em;padding-inline:24px;text-align:center}
.st-line{margin:0;max-width:24ch;font-family:var(--display);font-weight:800;font-size:clamp(28px,1.9vw + 18px,60px);line-height:1.2;letter-spacing:-.005em;color:#FFF8EE;text-wrap:balance;
  text-shadow:0 1px 1px rgba(10,12,40,.45),0 4px 22px rgba(8,10,36,.55),0 0 40px rgba(8,10,36,.25)}
[dir=rtl] .st-line{line-height:1.5;letter-spacing:0;max-width:22ch}
.st-w{display:inline-block}
.st-say.is-big{top:var(--safe-top)}
.st-say.is-big .st-line{font-size:clamp(44px,4.4vw + 18px,118px);line-height:1.08;color:#FFFFFF}
[dir=rtl] .st-say.is-big .st-line{line-height:1.35}
.st-say.is-quote .st-line{font-weight:600;font-size:clamp(24px,1.5vw + 16px,48px);max-width:30ch;color:#3A2A1E;text-shadow:0 0 2px rgba(255,251,244,.9),0 0 18px rgba(255,248,236,.95),0 0 36px rgba(255,248,236,.7)}
.st-say.is-quote .st-line2{color:#8A5A2B}
.st-say.is-small .st-line{color:#3A2A1E!important;text-shadow:0 0 2px rgba(255,251,244,.9),0 0 16px rgba(255,248,236,.95)!important}
/* a soft shade under the quiet words, so they read over the white island */
.st-scrim{position:absolute;inset-inline:0;bottom:0;height:52vh;pointer-events:none;opacity:0;background:linear-gradient(to top,rgba(255,250,242,.62),rgba(255,250,242,.34) 45%,rgba(255,250,242,0))}
.st-say.is-small .st-line{font-family:var(--body);font-weight:700;font-size:clamp(16px,.6vw + 13px,22px);letter-spacing:.02em;color:#FFF6E6;max-width:40ch}
[dir=ltr] .st-say.is-small .st-line{letter-spacing:.06em}

/* three places, each with its small drawing (tablet · home · club) */
.st-say.is-place,.st-say.is-quote{top:auto;bottom:calc(var(--bar) + 5vh + env(safe-area-inset-bottom,0px));align-content:end}
.st-say.is-small{top:var(--safe-top)}
.st-age{font-family:var(--display);font-weight:800;color:#E6197E;padding-inline-end:.5em;margin-inline-end:.15em;border-inline-end:2px solid rgba(42,38,32,.14)}
/* the White Wings title: gold calligraphy, then who it is for */
.st-say.is-wwtitle{top:var(--safe-top);gap:.1em}
.st-wwcard{display:grid;justify-items:center;gap:.05em;padding:.35em 1.3em .55em;border-radius:24px;background:rgba(255,250,241,.82);border:1px solid rgba(201,154,60,.45);box-shadow:0 14px 40px -18px rgba(90,60,20,.45)}
.st-ww1{margin:0;font-family:"Aref Ruqaa","Amiri",serif;font-weight:700;font-size:clamp(40px,3.6vw + 18px,92px);line-height:1.25;color:#B8892E;background:linear-gradient(100deg,#9A6E1E 0%,#C99A3C 30%,#FFF1C9 45%,#D9AE52 55%,#A87A26 80%) 100% 0/260% 100% no-repeat,#B8892E;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:none}
[dir=ltr] .st-ww1{font-family:"Amiri",serif;letter-spacing:.01em}
.st-ww2{margin:0;font-family:"Amiri",serif;font-weight:700;font-size:clamp(22px,1.5vw + 14px,44px);line-height:1.4;color:#5A3C1C;text-shadow:none}
.st-places{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.4vw,34px)}
.st-place{display:inline-flex;align-items:center;gap:.45em;padding:.38em .95em .34em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:clamp(19px,1vw + 13px,34px);line-height:1.2;color:#2A2620;background:rgba(255,251,243,.94);box-shadow:0 12px 34px -14px rgba(10,14,40,.55)}
.st-place .st-ico{width:1.2em;height:1.2em;color:#E6197E}
.st-place:nth-child(2) .st-ico{color:#1EA3DF}
.st-place:nth-child(3) .st-ico{color:#2EA84A}

/* the island names, one at a time during the flight */
.st-chips{position:absolute;inset-inline:0;bottom:calc(var(--bar) + 4.5vh + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;pointer-events:none}
.st-chip{grid-area:1/1;display:inline-flex;align-items:center;gap:.55em;padding:.42em 1.05em .36em;border-radius:999px;font-family:var(--display);font-weight:700;font-size:clamp(15px,.5vw + 13px,21px);line-height:1.2;color:#FFF8EE;background:rgba(14,18,44,.42);border:1px solid rgba(255,248,238,.28);opacity:0}
.st-dot{width:.62em;height:.62em;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.75)}

/* "play with sound": on the first picture, a moment, then the film starts anyway */
.st-prompt{position:absolute;inset-inline:0;bottom:calc(var(--bar) + 9vh + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:10px;opacity:0}
.st-play{display:inline-flex;align-items:center;gap:.55em;border:0;cursor:pointer;padding:.62em 1.5em .56em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:clamp(19px,.8vw + 15px,26px);line-height:1.15;color:#1F1B16;background:#FFF8EC;box-shadow:0 0 0 6px rgba(255,248,236,.18),0 16px 40px -14px rgba(10,14,40,.7)}
.st-play .st-ico{width:1em;height:1em;color:#E6197E}
.st-play:focus-visible{outline:3px solid #FFD54A;outline-offset:4px}
.st-play:active{transform:scale(.97)}
.st-hint{margin:0;font-family:var(--body);font-weight:700;font-size:14px;color:#FFF3E2;text-shadow:0 2px 10px rgba(5,8,30,.6)}
.is-waiting .st-play{opacity:.85}

/* the title: the six-colour wordmark over the city at blue hour */
.st-title{position:absolute;inset-inline:0;top:max(calc(env(safe-area-inset-top,0px) + 54px),10vh);display:flex;justify-content:center;padding-inline:16px;pointer-events:none}
.st-plate{position:relative;text-align:center;color:#FFF8EE}
.st-word{direction:ltr;font-family:var(--display);font-weight:800;font-size:clamp(66px,8.6vw + 10px,168px);line-height:1;letter-spacing:.035em}
.st-letter{display:inline-block;opacity:0;text-shadow:0 2px 0 rgba(255,255,255,.55),0 5px 0 rgba(0,0,0,.18),0 14px 40px rgba(6,10,40,.45)}
.st-name{margin:.1em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(28px,1.9vw + 16px,54px);line-height:1.2;color:#FFFFFF;opacity:0;text-shadow:0 3px 18px rgba(6,10,40,.6)}
.st-sub{margin:.35em 0 0;font-family:var(--body);font-weight:800;font-size:clamp(18px,.8vw + 14px,26px);line-height:1.45;color:#FFF1D6;opacity:0;text-shadow:0 2px 3px rgba(6,10,40,.75),0 2px 16px rgba(6,10,40,.7)} /* readable on a phone over the night city */
.st-plate.is-short .st-word{font-size:clamp(54px,6vw + 10px,110px)}

/* controls: always visible */
.st-ctl{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);inset-inline-end:max(12px,env(safe-area-inset-right,0px));display:flex;gap:8px;z-index:3}
.st-pill{border:1.5px solid rgba(255,244,224,.42);font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2;padding:7px 16px 5px;border-radius:999px;background:rgba(8,10,24,.5);color:#FFF4E0;cursor:pointer;min-height:40px}
.st-sound{padding-inline:11px;display:inline-grid;place-items:center;min-width:42px}
.st-ico{width:18px;height:18px}
.st-pill:active{transform:scale(.96)}
.st-pill:focus-visible{outline:3px solid #FFD54A;outline-offset:2px}

/* "Families who join now become its founding residents", just above the CTA */
.st-founding{position:fixed;inset-inline:0;bottom:calc(env(safe-area-inset-bottom,0px) + 136px);z-index:5;width:max-content;max-width:calc(100% - 32px);margin:0 auto;padding:6px 16px 4px;border-radius:999px;text-align:center;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.35;color:#2A2620;background:rgba(255,251,243,.95);box-shadow:0 10px 30px -12px rgba(40,25,5,.45);pointer-events:none;opacity:0}

/* calm still card (no 3D) */
.is-still .st-title{pointer-events:auto}
.st-plate-still{max-width:min(660px,100%);padding:18px clamp(22px,4vw,44px) 20px;border-radius:30px;color:#2A2620;background:#FFF8EC;box-shadow:0 9px 0 #E4CFAD,0 34px 60px -20px rgba(6,26,60,.6);max-height:calc(100vh - 120px);overflow:auto}
.st-plate-still .st-letter,.st-plate-still .st-name{opacity:1;text-shadow:none}
.st-plate-still .st-name{color:#2A2620}
.st-plate-still .st-sub{opacity:1;color:#E6197E;text-shadow:none}
.st-story{margin:10px auto 0;max-width:46ch;font-size:15px;line-height:1.7;color:#4C4438}
.st-waiting{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:20px;color:#E6197E}
.st-founding-in{margin:6px 0 0;font-weight:700;font-size:14px;color:#6A6153}
.st-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.st-go{border:0;font-family:var(--display);font-weight:800;font-size:20px;padding:12px 26px 9px;border-radius:999px;color:#fff;background:#E6197E;box-shadow:0 5px 0 #A80F5B;cursor:pointer}
.st-look{background:#F3EBDC;color:#2A2620;border-color:#E4D9C6}

/* the secondary "Came from Instagram?" link beside the CTA: only while the CTA shows */
#btn-cta[hidden]+#btn-from-ig{display:none!important}
.link.small-cta{font-size:14px;padding:2px 10px}

@media (max-width:520px){
  .st-ctl .st-pill{font-size:14px;padding:6px 13px 4px}
  .st-lines{position:absolute;inset:0;pointer-events:none}
  .st-line{max-width:17ch}
  .st-say.is-quote .st-line{max-width:20ch}
  .st-title{top:calc(env(safe-area-inset-top,0px) + 76px)}
}