/* E·SYNX · First-entry opening. Everything is scoped under #op so the rest of the site is untouched. */
#op{position:fixed;inset:0;z-index:1000;background:#000;color:#EDEFEC;overflow:hidden;font-family:"IBM Plex Sans","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --op-ink:#EDEFEC;--op-dim:rgba(237,239,236,.62);--op-light:#FFF4E2;--op-halo:143,211,221;--op-sign:#2A2E31;--op-signink:#FFD23F}
#op *{box-sizing:border-box}
#op.op-out{transition:opacity 1.6s ease;opacity:0}
#op button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#op .layer{position:absolute;inset:0}
#op canvas.op-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Phase 0 · logo — two memory layers fold into one mark */
.op-logo{display:grid;place-items:center;background:#000;perspective:1100px}
.lg-stage{position:relative;width:min(80vw,620px);aspect-ratio:486/124;transform-style:preserve-3d;color:#EDEFEC;--esynx-core:#CFF3F7}
.lg-l{position:absolute;inset:0;transform-style:preserve-3d}
.lg-l svg{width:100%;height:100%;display:block;overflow:visible}
.lg-a,.lg-b{opacity:0}
.lg-a{color:#DDE3E4}.lg-b{color:#8FD3DD}
.lg-main{opacity:0}
.lg-main .lg-core{transition:filter .6s ease}
.lg-main.lit .lg-core{animation:corePulse 1.6s ease-out 1 both}
@keyframes corePulse{0%{filter:drop-shadow(0 0 0 rgba(191,234,240,0))}25%{filter:drop-shadow(0 0 10px rgba(191,234,240,.95)) drop-shadow(0 0 26px rgba(143,211,221,.7))}100%{filter:drop-shadow(0 0 5px rgba(191,234,240,.55))}}
.lg-slices{pointer-events:none}.lg-slices>div{position:absolute;inset:0}.lg-slices svg{width:100%;height:100%;display:block}
.op-gl{z-index:0}
/* Phase 1 · the ordinary site (always light, deliberately plain) */
.op-stage{perspective:900px;perspective-origin:50% 50%;background:#000}
.op-fake{position:absolute;inset:0;background:#F6F7F5;color:#1E2427;transform-origin:50% 50%;will-change:transform,filter;overflow:hidden;opacity:0;transition:opacity .9s ease;
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif}
.op-fake.on{opacity:1}
.fk-top{display:flex;align-items:center;gap:28px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid #E1E4E0;background:#fff}
.fk-brand{font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px}
.fk-brand s{display:inline-block;width:20px;height:20px;border-radius:6px;background:#3B7C5A;text-decoration:none}
.fk-nav{display:flex;gap:20px;font-size:14px;color:#5C666B}
.fk-nav span:first-child{color:#1E2427;font-weight:500}
.fk-av{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#DDE5DF}
.fk-main{max-width:980px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(16px,4vw,48px)}
.fk-hello{font-size:14px;color:#5C666B;margin-bottom:10px}
.fk-hero{background:#fff;border:1px solid #E1E4E0;border-radius:14px;padding:clamp(18px,3vw,30px);display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.fk-kick{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#3B7C5A;font-weight:600}
.fk-hero h2{font-size:clamp(22px,3.2vw,32px);margin:6px 0 8px;font-weight:600;line-height:1.2}
.fk-hero p{margin:0 0 18px;color:#4A5458;font-size:15px;line-height:1.55}
#op .fk-go{background:#1E2427;color:#fff;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:500;transition:transform .2s ease,box-shadow .3s ease}
#op .fk-go:hover{transform:translateY(-1px)}
#op .fk-go.hint{animation:fkHint 1.8s ease-in-out infinite}
@keyframes fkHint{0%,100%{box-shadow:0 0 0 0 rgba(59,124,90,0)}50%{box-shadow:0 0 0 8px rgba(59,124,90,.18)}}
.fk-art{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(160deg,#DCE7EE 0%,#EEF2F0 55%,#E6E1D6 100%);position:relative;overflow:hidden}
.fk-art:before{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:22%;background:linear-gradient(#C9D3D8,#B8C3C8);border-radius:4px}
.fk-art:after{content:"✈";position:absolute;right:16%;top:16%;font-size:34px;color:#7E8D94;transform:rotate(-12deg)}
.fk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.fk-card{background:#fff;border:1px solid #E1E4E0;border-radius:12px;padding:16px 18px}
.fk-card small{font-size:12px;color:#3B7C5A;font-weight:600;letter-spacing:.04em}
.fk-card b{display:block;font-weight:600;margin:4px 0 2px}
.fk-card span{font-size:13px;color:#5C666B}
.fk-week{margin-top:16px;font-size:13px;color:#5C666B}
@media (max-width:720px){.fk-nav{display:none}.fk-hero{grid-template-columns:1fr}.fk-art{display:none}.fk-cards{grid-template-columns:1fr}.fk-card:nth-child(n+2){display:none}}
.op-tear{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.op-tear>div{position:absolute;inset:0;will-change:transform}
.op-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%);opacity:0}

/* Subtitles + choices */
.op-sub{position:absolute;left:0;right:0;bottom:clamp(96px,17vh,170px);text-align:center;padding:0 16px;pointer-events:none}
.op-sub .en{font-size:clamp(18px,2.4vw,24px);line-height:1.45;color:var(--op-ink);letter-spacing:.01em;text-shadow:0 1px 18px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .8s ease}
.op-sub .tr{margin-top:6px;font-size:clamp(13px,1.6vw,15px);color:var(--op-dim);opacity:0;transition:opacity .8s ease .15s}
.op-sub.on .en{opacity:1;transform:none}.op-sub.on .tr{opacity:1}
.op-sub.sig .en{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;font-size:clamp(14px,1.8vw,17px);color:rgba(var(--op-halo),.95)}
.op-asks{position:absolute;left:0;right:0;bottom:clamp(26px,6vh,64px);display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(10px,3vw,40px);padding:0 16px}
#op .op-ask{position:relative;padding:8px 4px;font-size:clamp(15px,1.9vw,18px);color:rgba(237,239,236,.78);font-style:italic;font-family:"Newsreader",Georgia,serif;opacity:0;transform:translateY(10px);
  transition:opacity .7s ease,transform .9s ease,color .3s ease}
#op .op-ask small{display:block;font-style:normal;font-family:"IBM Plex Sans",sans-serif;font-size:12px;color:var(--op-dim);margin-top:2px}
#op .op-ask:after{content:"";position:absolute;left:10%;right:10%;bottom:2px;height:1px;background:rgba(var(--op-halo),.6);transform:scaleX(0);transition:transform .4s ease}
#op .op-ask:hover,#op .op-ask:focus-visible{color:#fff;outline:none}
#op .op-ask:hover:after,#op .op-ask:focus-visible:after{transform:scaleX(1)}
#op .op-ask.on{opacity:1;transform:none}
#op .op-ask.drift{animation:askDrift 6s ease-in-out infinite}
#op .op-ask.gone{opacity:0;transform:translateY(-8px);pointer-events:none}
#op .op-ask.picked{color:#fff;transform:translateY(-40px);opacity:0;transition:opacity 1.6s ease .5s,transform 2s ease}
@keyframes askDrift{0%,100%{translate:0 0}50%{translate:0 -4px}}
.op-thought{position:absolute;left:0;right:0;bottom:clamp(150px,26vh,240px);text-align:center;font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(15px,1.8vw,18px);color:rgba(237,239,236,.55);opacity:0;transition:opacity .8s ease}
.op-thought.on{opacity:1}

#op .op-skip{position:absolute;right:16px;bottom:14px;font-size:12px;letter-spacing:.06em;color:rgba(237,239,236,.38);padding:6px 8px;opacity:0;transition:opacity 1s ease,color .2s;z-index:5}
#op .op-skip.on{opacity:1}#op .op-skip:hover,#op .op-skip:focus-visible{color:rgba(237,239,236,.85)}

/* Labels on the world */
.op-label{position:absolute;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.32em;color:rgba(255,244,226,.9);opacity:0;transition:opacity 1.4s ease;pointer-events:none;transform:translate(-50%,0);white-space:nowrap;text-align:center}
.op-label small{display:block;letter-spacing:.14em;font-size:10px;color:rgba(237,239,236,.5);margin-top:4px}
.op-label.on{opacity:1}

/* London memory fragments */
.op-frag{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.op-frag>div{width:min(78vw,860px);aspect-ratio:16/9;border-radius:2px;overflow:hidden;opacity:0;filter:blur(8px) saturate(.55) sepia(.12);transform:scale(.94) translateX(4%);background:#1b1f22 center/cover no-repeat}
.op-frag>div.show{animation:fragIn .62s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes fragIn{0%{opacity:0;transform:scale(.92) translateX(6%);filter:blur(10px) saturate(.5)}35%{opacity:.82;filter:blur(1.5px) saturate(.6) sepia(.12)}70%{opacity:.7}100%{opacity:0;transform:scale(1.08) translateX(-6%);filter:blur(8px) saturate(.5)}}
.op-frag svg{width:100%;height:100%;display:block}

/* Heathrow · 2.5D layered scene with curtain reveal */
.op-hw{position:absolute;inset:0;overflow:hidden;background:#0d0f10;--rv:0}
.hw-cam{position:absolute;inset:-6% -16%;transform-origin:50% 70%;will-change:transform,filter;
  -webkit-mask-image:linear-gradient(to top,#000 calc(var(--rv)*1%),rgba(0,0,0,0) calc(var(--rv)*1% + 26%));mask-image:linear-gradient(to top,#000 calc(var(--rv)*1%),rgba(0,0,0,0) calc(var(--rv)*1% + 26%))}
.hw-l{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hw-struct{background:linear-gradient(#B9C3C7 0%,#D4DBDC 30%,#E6EAE8 50%,#D8DCDA 58%)}
.hw-ceiling{position:absolute;left:-30%;right:-30%;top:-26%;height:52%;transform:perspective(700px) rotateX(-64deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(70,78,82,.0) 0 11%,rgba(70,78,82,.35) 11% 11.6%,rgba(70,78,82,0) 11.6% 22%),linear-gradient(#7F898E,#AEB7BA)}
.hw-ceiling i{position:absolute;top:8%;bottom:0;width:7%;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,.95));filter:blur(3px);border-radius:40%}
.hw-ceiling i:nth-child(1){left:18%}.hw-ceiling i:nth-child(2){left:38%}.hw-ceiling i:nth-child(3){left:57%}.hw-ceiling i:nth-child(4){left:76%}
.hw-glass{position:absolute;left:11%;right:11%;top:19%;height:33%;overflow:hidden;box-shadow:0 0 80px 10px rgba(255,255,255,.45)}
.hw-sky{position:absolute;inset:0;background:radial-gradient(ellipse 30% 22% at 30% 30%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 40% 18% at 70% 22%,rgba(255,255,255,.55),transparent 70%),linear-gradient(#DCE7EC,#C9D8DE 55%,#B4C3C9)}
.hw-apron{position:absolute;left:0;right:0;bottom:0;height:34%;width:100%;filter:blur(.6px)}
.hw-mull{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(64,74,80,.7) 0 3px,transparent 3px 10.5%,rgba(64,74,80,.45) 10.5% calc(10.5% + 1px),transparent calc(10.5% + 1px) 21%),linear-gradient(rgba(64,74,80,.55),rgba(64,74,80,.55)) 0 48%/100% 2px no-repeat}
.hw-shafts{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 38%,transparent 46%),linear-gradient(115deg,transparent 52%,rgba(255,255,255,.12) 58%,transparent 64%);mix-blend-mode:screen;pointer-events:none}
.hw-col{position:absolute;top:0;bottom:41%;background:linear-gradient(90deg,#9EA7AB,#EEF1F1 38%,#C2C9CB 70%,#A3ACB0)}
.hw-col.d0{bottom:30%;filter:brightness(.92)}.hw-col.d2{bottom:45%;opacity:.85}
.hw-floor{top:auto;height:46%;bottom:0;background:linear-gradient(#C6CBC9,#D6D9D6 28%,#BFC4C2 70%,#B3B8B6);overflow:hidden}
.hw-floor:before{content:"";position:absolute;left:-60%;right:-60%;top:0;bottom:-40%;transform:perspective(420px) rotateX(66deg);transform-origin:50% 0;opacity:.35;
  background:repeating-linear-gradient(90deg,rgba(90,96,98,.18) 0 1px,transparent 1px 13%),repeating-linear-gradient(0deg,rgba(90,96,98,.12) 0 1px,transparent 1px 21%);animation:floorRun 1.4s linear infinite;animation-play-state:var(--walk,running)}
.hw-pools{position:absolute;inset:0;background:radial-gradient(ellipse 9% 30% at 22% 8%,rgba(255,255,255,.5),transparent 70%),radial-gradient(ellipse 9% 30% at 41% 6%,rgba(255,255,255,.45),transparent 70%),radial-gradient(ellipse 9% 30% at 60% 6%,rgba(255,255,255,.45),transparent 70%),radial-gradient(ellipse 9% 30% at 79% 8%,rgba(255,255,255,.5),transparent 70%),radial-gradient(ellipse 60% 26% at 50% 0%,rgba(230,238,240,.6),transparent 70%)}
.hw-floor:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.0),rgba(0,0,0,.08))}
@keyframes floorRun{to{background-position:0 0,0 21%}}
.hw-people{pointer-events:none}
.hw-p{position:absolute;bottom:0;aspect-ratio:54/124;will-change:transform}
.hw-p .bob,.hw-p .rf{position:absolute;left:0;right:0;height:100%}
.hw-p .bob{top:0;animation:bob .62s ease-in-out infinite alternate}.hw-p .bob.still{animation:none}
.hw-p .rf{top:100%;transform:scaleY(-1);opacity:.17;-webkit-mask-image:linear-gradient(to top,#000,transparent 45%);mask-image:linear-gradient(to top,#000,transparent 45%)}
.hw-p svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes bob{to{transform:translateY(-1.2%)}}
@keyframes walkR{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
@keyframes walkL{from{transform:translateX(130vw)}to{transform:translateX(-30vw)}}
.hw-signs{pointer-events:none}
.hw-sign{position:absolute;display:flex;align-items:center;gap:.6em;background:var(--op-sign);color:var(--op-signink);font-weight:600;letter-spacing:.01em;padding:.45em .9em;border-radius:3px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:"IBM Plex Sans",Arial,sans-serif}
.hw-sign:before{content:"";position:absolute;left:50%;top:-60vh;height:60vh;width:2px;background:#6E7679}
.hw-sign svg{height:1.1em;width:1.1em}
.op-hw .hw-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.op-arrive{position:absolute;left:0;right:0;bottom:clamp(24px,6vh,60px);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.op-arrive.on{opacity:1;pointer-events:auto}
.op-arrive .gl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.24em;color:rgba(30,36,39,.7);text-transform:uppercase;background:rgba(246,247,245,.75);padding:3px 10px;border-radius:2px}
.op-arrive .gl small{letter-spacing:.06em;text-transform:none;margin-left:8px}
.op-arrive .gs{display:flex;gap:8px;background:rgba(246,247,245,.78);padding:6px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#op .op-arrive button{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;color:#1E2427;padding:7px 16px;border-radius:999px;transition:background .2s}
#op .op-arrive button:hover,#op .op-arrive button:focus-visible{background:#1E2427;color:#F6F7F5;outline:none}
.op-hw .op-sub .en{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 24px rgba(0,0,0,.35)}
.op-hw .op-sub .tr{color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6)}

@media (prefers-reduced-motion: reduce){
  .op-logo b{transition-duration:1s}
  .hw-p .bob,.hw-floor:before,#op .op-ask.drift,#op .fk-go.hint{animation:none}
}

/* fake site: feedback on the button, the late title, the faint core */
#op .fk-go.busy{opacity:.82;transform:scale(.985)}
#op .fk-go.busy span:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:fkDots 1s steps(4) infinite}
@keyframes fkDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.op-fake h2.lag{text-shadow:7px 0 0 rgba(30,36,39,.22),14px 0 0 rgba(30,36,39,.08)}
.fk-dot{position:absolute;left:50%;top:44%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#E8FAFC;opacity:0;box-shadow:0 0 8px 2px rgba(143,211,221,.8),0 0 22px 6px rgba(143,211,221,.35);transition:opacity .25s ease;z-index:2}
.fk-dot.on{opacity:.95;animation:fkCore 1.1s ease-in-out}
@keyframes fkCore{0%{transform:scale(.4)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
/* who is speaking */
.op-sub .who,.op-thought .who{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(143,211,221,.75);margin-bottom:6px}
.op-sub .who{opacity:0;transition:opacity .6s ease}.op-sub.on .who{opacity:1}
.op-thought .who{color:rgba(255,236,200,.7)}
.op-thought .en{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(16px,2vw,20px);color:rgba(255,244,226,.92)}
.op-thought .tr{font-size:13px;color:rgba(237,239,236,.55);margin-top:3px}
#op .op-ask.picked{color:#FFF4E2;text-shadow:0 0 14px rgba(255,236,200,.5)}
#op .op-ask.picked:after{transform:scaleX(1);background:rgba(255,236,200,.8)}

#op .op-logo-top{z-index:4;pointer-events:none;background:transparent}

/* travellers' arms and legs swing while they walk */
.hw-p .sw-a{animation:swA .62s ease-in-out infinite alternate;transform-box:view-box}
.hw-p .sw-b{animation:swB .62s ease-in-out infinite alternate;transform-box:view-box}
@keyframes swA{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
@keyframes swB{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.hw-p{aspect-ratio:62/150}
@media (prefers-reduced-motion: reduce){.hw-p .sw-a,.hw-p .sw-b{animation:none}}

/* London memory: real photographs as fading, grainy flashbacks */
#op .op-mem{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:transparent}
.op-mem .mem{position:absolute;inset:0;opacity:0;isolation:isolate;background:#0A0B0C;overflow:hidden}
.op-mem .mem-ph,.op-mem .mem-ghost{position:absolute;inset:-4%;background-size:cover;background-position:center;will-change:transform}
.op-mem .mem-ph{filter:saturate(.5) sepia(.12) contrast(1.05) brightness(.94)}
.op-mem .mem-ghost{mix-blend-mode:screen;filter:saturate(.2) sepia(.3) blur(3px) brightness(1.2)}
.op-mem .mem-grain{position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow:inset 0 0 18vmin 6vmin rgba(0,0,0,.75)}
.op-mem .mem svg{width:100%;height:100%;display:block;filter:saturate(.5) blur(1px)}
.op-mem .mem-flash{position:absolute;inset:0;background:#F4F0E6;opacity:0;mix-blend-mode:screen}