:root{--ink:#25204e;--purple:#7452d2;--lilac:#e7dcff;--pink:#f9e5fa;--cream:#fffaf7}
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:25px}
html.cinematic-scrolling{scroll-behavior:auto}
body{margin:0;overflow-x:hidden;background:var(--lilac);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}
button,a{font:inherit}button{cursor:pointer}img{max-width:100%}a{color:inherit}[hidden]{display:none!important}
.site-header{position:absolute;top:0;left:0;width:100%;z-index:20;padding:22px clamp(18px,5vw,75px);display:flex;align-items:center;justify-content:space-between;gap:15px;color:white}
.brand{font:700 clamp(20px,2.5vw,31px)/1 Georgia,serif;text-decoration:none;text-shadow:0 2px 10px #19132c88}
.brand span{display:block;font:700 12px Arial,sans-serif;letter-spacing:.09em}
.site-header nav{display:flex;align-items:center;gap:clamp(10px,2vw,28px)}.site-header nav a{text-decoration:none;font-size:14px;font-weight:700}
.site-header nav button{border:1px solid #ffffff8a;border-radius:24px;background:#ffffff38;color:white;padding:10px 16px;backdrop-filter:blur(8px)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 23px;border-radius:100px;background:var(--purple);color:white;text-decoration:none;font-weight:800;box-shadow:0 9px 25px #4e379c36}
/* One sticky cinematic scene, not two stacked videos */
.journey{height:155svh;position:relative;z-index:0;isolation:isolate;background:#e7dcff}
.journey::after{content:none}
.journey-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#332943}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .45s ease}
.hero-video.ready{opacity:1}
.video-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#18102caa 0%,#18102c44 75%,#18102c55 100%)}
.hero-copy{position:absolute;z-index:2;left:clamp(25px,7vw,120px);top:50%;transform:translateY(-50%);width:min(650px,85%);color:white;opacity:1}
.hero-copy h1{font:700 clamp(52px,7vw,106px)/1.02 Georgia,serif;margin:15px 0 20px}.hero-copy h1 em{color:#ffdbfb}
.hero-lead{font-size:clamp(20px,2.2vw,29px);font-weight:700}.hero-description{max-width:560px;line-height:1.75}
.hero-button{background:white;color:#33215f;margin-top:12px}
.scroll-cue{position:absolute;z-index:2;bottom:30px;left:50%;transform:translateX(-50%);color:white;text-decoration:none;font-size:13px;font-weight:700}
/* Soft recognizable cloud shapes, all overlay the SAME video */
.cloud-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;overflow:hidden;transition:none}
.cloud-overlay::before{content:"";position:absolute;inset:8% 4% 2%;z-index:4;opacity:.9;background:radial-gradient(circle at 8% 72%,#fff 0 2px,transparent 3px),radial-gradient(circle at 17% 58%,#ffe9a8 0 2px,transparent 3px),radial-gradient(circle at 28% 82%,#fff 0 3px,transparent 4px),radial-gradient(circle at 39% 63%,#e7c8ff 0 2px,transparent 3px),radial-gradient(circle at 49% 75%,#fff 0 3px,transparent 4px),radial-gradient(circle at 59% 56%,#fff2b5 0 2px,transparent 3px),radial-gradient(circle at 69% 84%,#fff 0 2px,transparent 3px),radial-gradient(circle at 79% 66%,#e8caff 0 3px,transparent 4px),radial-gradient(circle at 91% 78%,#fff 0 2px,transparent 3px);filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 12px #caa8ff);animation:magicDustFloat 3.8s ease-in-out infinite alternate}
.cloud-overlay::after{content:"";position:absolute;inset:15% -10% -15%;z-index:3;opacity:.75;background:radial-gradient(circle at 22% 68%,#ffffffb8 0 2px,transparent 9px),radial-gradient(circle at 74% 61%,#fff3bba8 0 2px,transparent 11px),radial-gradient(circle at 54% 78%,#ead1ffb8 0 3px,transparent 13px),radial-gradient(ellipse at 50% 95%,#fffaffd9 0%,#dfc9ff70 23%,transparent 62%);mix-blend-mode:screen;animation:magicPulse 2.6s ease-in-out infinite alternate}
.cloud{position:absolute;left:-20%;width:140%;height:100%;bottom:-35%;will-change:transform;transform:translateY(45vh);background-repeat:no-repeat}
.cloud-back{background:radial-gradient(ellipse 24% 26% at 15% 82%,#f1e6fc 55%,transparent 72%),radial-gradient(ellipse 26% 28% at 45% 78%,#eee0fb 55%,transparent 73%),radial-gradient(ellipse 28% 28% at 78% 82%,#f4e8ff 55%,transparent 73%);filter:blur(25px)}
.cloud-middle{background:radial-gradient(ellipse 23% 30% at 12% 85%,#fff9ff 55%,transparent 74%),radial-gradient(ellipse 25% 31% at 38% 83%,#fff7ff 55%,transparent 74%),radial-gradient(ellipse 28% 32% at 70% 85%,#fff9ff 55%,transparent 74%),radial-gradient(ellipse 21% 30% at 95% 83%,#fff8ff 55%,transparent 74%);filter:blur(19px)}
.cloud-front{background:radial-gradient(ellipse 32% 38% at 12% 94%,#e7dcff 62%,transparent 80%),radial-gradient(ellipse 32% 40% at 50% 94%,#e7dcff 62%,transparent 80%),radial-gradient(ellipse 32% 40% at 88% 94%,#e7dcff 62%,transparent 80%);filter:blur(25px)}
.magic-glow{position:absolute;z-index:6;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 78%,#fff 0%,#fff9ffcc 7%,#dfc5ff73 24%,transparent 58%),conic-gradient(from 220deg at 50% 100%,transparent 0 9%,#fff3 11%,transparent 14% 23%,#ecd9ff40 25%,transparent 28% 71%,#fff3 74%,transparent 77% 86%,#e8d2ff38 89%,transparent 92%);mix-blend-mode:screen}
@keyframes magicDustFloat{from{transform:translate3d(-5px,12px,0) scale(.98);opacity:.58}to{transform:translate3d(7px,-16px,0) scale(1.03);opacity:1}}
@keyframes magicPulse{from{transform:scale(.96);filter:blur(1px)}to{transform:scale(1.05);filter:blur(3px)}}
/* The entire dreamverse has ONE continuous background, no white transition bands */
.dreamverse{position:relative;z-index:2;isolation:isolate;margin-top:0;background:#e7dcff}
.dreamverse::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffedbc 0 2px,transparent 3px);background-size:137px 151px,241px 203px;background-position:15px 30px,62px 95px}
.dreamverse::after{content:none}
.worlds-section{padding:0 24px 70px;position:relative;overflow:visible;background:linear-gradient(180deg,#e7defc 0%,#e7defcf5 5%,#eee4fddb 12%,#f4e9ff91 21%,#f8efff42 32%,#eadcff38 78%,#e5d5f5 100%),url("../assets/images/Backgrounds/dream-world-map.webp") center top/cover no-repeat}
.dreamverse-prologue{position:relative;z-index:5;max-width:920px;margin:-8svh auto clamp(58px,8vw,115px);padding:0 clamp(18px,4vw,48px);text-align:center;background:radial-gradient(ellipse at center,#fffaff9e 0%,#fffaff58 43%,transparent 73%)}
.dreamverse-prologue::after{content:"✦";display:block;margin-top:clamp(30px,4.5vw,56px);color:#805ad5;font-size:clamp(15px,1.5vw,21px);text-shadow:0 0 14px #fff,0 0 24px #f7d9ff}
.dreamverse-prologue h2{max-width:850px;margin:0 auto;font:700 clamp(34px,4vw,54px)/1.12 Georgia,serif;letter-spacing:-.018em;text-wrap:balance;text-shadow:0 2px 18px #fff,0 1px 2px #fff}
.dreamverse-prologue p{max-width:780px;margin:clamp(15px,2vw,24px) auto 0;font:italic 500 clamp(20px,2.2vw,30px)/1.38 Georgia,serif;color:#604a91;text-wrap:balance;text-shadow:0 1px 12px #fff}
.worlds-intro{position:relative;z-index:5;text-align:center;max-width:930px;margin:0 auto clamp(38px,5vw,58px);padding:0 clamp(18px,4vw,48px);background:radial-gradient(ellipse at center,#fffaff9c 0%,#fffaff52 45%,transparent 74%)}
.worlds-intro h2{font:700 clamp(39px,5vw,72px)/1.07 Georgia,serif;margin:0 0 17px;text-wrap:balance;text-shadow:0 2px 18px #fff,0 1px 2px #fff}
.worlds-intro p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.45vw,19px);line-height:1.55;text-wrap:balance;text-shadow:0 1px 10px #fff}
.worlds-intro,.dream-map,.worlds-note{transition:opacity .55s ease,transform .55s ease}
.worlds-section.is-story-paused .worlds-intro,.worlds-section.is-story-paused .dream-map,.worlds-section.is-story-paused .worlds-note{opacity:0;transform:translateY(24px);pointer-events:none}
.dream-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.8fr) minmax(0,1fr);grid-template-rows:auto auto;gap:30px clamp(15px,3vw,55px);max-width:1350px;margin:auto;align-items:center}
.dream-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.dream-connections path{fill:none;stroke:#8660d7;stroke-width:4;stroke-dasharray:5 13;stroke-linecap:round;opacity:.85}
.island{position:relative;z-index:2;border:0;background:transparent;padding:0;display:flex;align-items:center;flex-direction:column;min-width:0;gap:6px;color:var(--ink);transition:transform .25s ease}
.island:hover,.mowe-button:hover{transform:translateY(-6px)}
.island img{display:block;width:100%;height:clamp(180px,23vw,315px);object-fit:contain;filter:drop-shadow(0 15px 20px #65439c2a)}
.island-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;max-width:100%;padding:8px 16px;border-radius:20px;background:#fff9ffbd;backdrop-filter:blur(5px)}
.island-label strong{font:700 clamp(18px,1.9vw,26px)/1.15 Georgia,serif}.island-label small{font-size:12px;font-weight:700}.island-label>span{font-size:12px;font-weight:800;color:var(--purple)}
.island-boxes{grid-column:1;grid-row:1}.island-balloons{grid-column:3;grid-row:1}.island-corporate{grid-column:1;grid-row:2}.island-workshop{grid-column:3;grid-row:2}
.mowe-button{grid-column:2;grid-row:1/3;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:transparent;color:var(--ink);padding:0;transition:transform .25s ease}
.mowe-button img{display:block;width:100%;max-width:360px;filter:drop-shadow(0 15px 20px #6e4ca433)}
.mowe-hint{padding:10px 13px;background:#fffaffd9;border-radius:100px;font-size:12px;font-weight:800;text-align:center}
.worlds-note{text-align:center;margin:50px 0 0;font-size:13px;font-weight:800}
/* Mowe's help becomes the next explorable scene in the same dream world */
.guide{position:relative;padding:110px 20px 140px;background:linear-gradient(180deg,#e1d4f2 0%,#e1d4f2f2 6%,#e1d4f2a8 14%,#e1d4f23d 23%,transparent 32%),linear-gradient(90deg,#f8edff70 0%,transparent 70%),url("../assets/images/Backgrounds/mowe-guide-path.webp") center/cover no-repeat}
.guide::before{content:"";position:absolute;z-index:2;pointer-events:none;left:-3%;right:-3%;top:-105px;height:205px;background:radial-gradient(ellipse 27% 43% at 10% 55%,#e1d4f2e8 0 53%,transparent 76%),radial-gradient(ellipse 29% 46% at 38% 58%,#e1d4f2f2 0 55%,transparent 78%),radial-gradient(ellipse 30% 45% at 68% 54%,#e1d4f2ef 0 54%,transparent 77%),radial-gradient(ellipse 25% 42% at 91% 57%,#e1d4f2e8 0 54%,transparent 76%),linear-gradient(180deg,transparent,#e1d4f2d6 48%,transparent);filter:blur(11px)}
.guide-inner{max-width:1180px;min-height:610px;margin:auto;padding:clamp(30px,5vw,70px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(300px,1.08fr);align-content:center;align-items:center;text-align:left;border:1px solid #ffffff80;border-radius:48px;background:linear-gradient(90deg,#fffaffeb 0%,#fffaffc7 42%,#fffaff1c 70%,transparent 100%);box-shadow:0 28px 90px #4e377842;backdrop-filter:blur(4px)}
.guide-inner{position:relative;z-index:3}
.guide-inner>*:not(.guide-mowe){grid-column:1}
.guide-mowe{display:block;grid-column:2;grid-row:1/7;align-self:end;width:min(100%,470px);height:500px;object-fit:contain;margin:0 auto -35px;filter:drop-shadow(0 20px 28px #5c3e8c55)}
.guide h2{font:700 clamp(36px,4.5vw,62px)/1.1 Georgia,serif;margin:10px 0}.guide h3{font:700 clamp(24px,3vw,38px)/1.2 Georgia,serif;color:var(--purple);margin:10px 0}
.guide-inner>p:not(.eyebrow){max-width:550px;margin:20px 0 26px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;padding:28px clamp(20px,5vw,70px);background:#ddc9f4;font-size:13px;font-weight:700}footer a{text-decoration:none}
.world-portal{position:fixed;inset:0;z-index:150;overflow:hidden;pointer-events:none;background:#efe5ff00;opacity:0;isolation:isolate}
.world-portal.is-entering{opacity:1;animation:portalBackdrop .68s ease-in forwards}
.portal-glow{position:absolute;z-index:1;inset:-30%;opacity:0;transform:scale(.45);background:radial-gradient(circle at center,#fff 0 5%,#fff8ffc9 14%,#e8d4ff99 30%,transparent 58%)}
.world-portal.is-entering .portal-glow{animation:portalGlow .68s cubic-bezier(.2,.7,.2,1) forwards}
.portal-island{position:absolute;z-index:2;left:50%;top:50%;width:min(42vw,520px);height:min(42vw,520px);object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.7);filter:drop-shadow(0 0 28px #fff) drop-shadow(0 24px 35px #6d4bae5c)}
.world-portal.is-entering .portal-island{animation:portalIsland .42s cubic-bezier(.2,.75,.25,1) forwards}
.portal-cloud{position:absolute;z-index:4;inset:-20%;will-change:transform,opacity;filter:blur(12px);opacity:0;background-repeat:no-repeat}
.portal-cloud-back{background:radial-gradient(ellipse 30% 34% at 4% 20%,#e9ddfa 60%,transparent 73%),radial-gradient(ellipse 32% 38% at 96% 28%,#eadcfb 60%,transparent 74%),radial-gradient(ellipse 34% 38% at 12% 86%,#f0e6ff 60%,transparent 74%),radial-gradient(ellipse 36% 40% at 91% 88%,#eadcff 60%,transparent 74%)}
.portal-cloud-middle{background:radial-gradient(ellipse 28% 34% at 10% 42%,#fffaff 59%,transparent 74%),radial-gradient(ellipse 29% 35% at 90% 48%,#fff9ff 59%,transparent 74%),radial-gradient(ellipse 32% 36% at 35% 105%,#f7efff 60%,transparent 75%),radial-gradient(ellipse 33% 37% at 68% -5%,#fffaff 60%,transparent 75%)}
.portal-cloud-front{z-index:6;background:radial-gradient(ellipse 35% 42% at -2% 55%,#fff 60%,transparent 75%),radial-gradient(ellipse 36% 43% at 102% 55%,#fff 60%,transparent 75%),radial-gradient(ellipse 45% 36% at 50% -8%,#fffaff 62%,transparent 77%),radial-gradient(ellipse 45% 38% at 50% 108%,#fffaff 62%,transparent 77%)}
.world-portal.is-entering .portal-cloud-back{animation:cloudCloseBack .62s cubic-bezier(.2,.75,.2,1) forwards}
.world-portal.is-entering .portal-cloud-middle{animation:cloudCloseMiddle .58s .02s cubic-bezier(.2,.75,.2,1) forwards}
.world-portal.is-entering .portal-cloud-front{animation:cloudCloseFront .54s .03s cubic-bezier(.2,.75,.2,1) forwards}
.portal-sparkles{position:absolute;z-index:7;inset:7%;opacity:0;background:radial-gradient(circle at 12% 34%,#fff 0 2px,transparent 3px),radial-gradient(circle at 25% 72%,#ffe598 0 3px,transparent 4px),radial-gradient(circle at 42% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 57% 78%,#dec2ff 0 3px,transparent 4px),radial-gradient(circle at 72% 30%,#fff 0 3px,transparent 4px),radial-gradient(circle at 88% 65%,#ffeaa9 0 2px,transparent 3px);filter:drop-shadow(0 0 8px white)}
.world-portal.is-entering .portal-sparkles{animation:portalSparkles .52s .02s ease-out forwards}
.dream-map.is-map-highlighted{animation:mapMagicPulse 1.2s ease-out}
html.portal-transitioning{cursor:wait}
@keyframes portalBackdrop{0%{background:#efe5ff00}58%{background:#efe5ff66}100%{background:#f7efff}}
@keyframes portalGlow{0%{opacity:0;transform:scale(.45)}55%{opacity:.9}100%{opacity:1;transform:scale(1.45)}}
@keyframes portalIsland{0%{opacity:0;transform:translate(-50%,-50%) scale(.76)}16%{opacity:.92;transform:translate(-50%,-50%) scale(.9)}42%{opacity:.72;filter:blur(0) drop-shadow(0 0 32px #fff)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.28);filter:blur(4px) drop-shadow(0 0 45px #fff)}}
@keyframes cloudCloseBack{0%{opacity:0;transform:scale(1.08)}30%{opacity:.82}100%{opacity:1;transform:scale(.69)}}
@keyframes cloudCloseMiddle{0%{opacity:0;transform:scale(1.18) rotate(2deg)}25%{opacity:.9}100%{opacity:1;transform:scale(.72) rotate(0)}}
@keyframes cloudCloseFront{0%{opacity:0;transform:scale(1.28)}28%{opacity:.95}100%{opacity:1;transform:scale(.78)}}
@keyframes portalSparkles{0%{opacity:0;transform:scale(.8) rotate(-4deg)}45%{opacity:1}100%{opacity:.2;transform:scale(1.35) rotate(4deg)}}
@keyframes mapMagicPulse{0%,100%{filter:none}45%{filter:drop-shadow(0 0 22px #fff) drop-shadow(0 0 38px #9f74e6);transform:scale(1.01)}}
.mowe-room{position:fixed;inset:0;z-index:90;overflow:hidden;background:#b8a5ed}
.room-backdrop{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}.room-dream-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 45%,#57448214 72%,#392b652b 100%),radial-gradient(circle at 22% 57%,#fff8ff2b,transparent 35%)}.room-back{position:absolute;z-index:4;top:22px;left:22px;border:1px solid #ffffffb8;border-radius:30px;padding:12px 18px;background:#fffaffdf;box-shadow:0 12px 32px #493c7029;color:var(--ink);font-weight:800;backdrop-filter:blur(12px)}.room-content{position:relative;z-index:3;width:100%;min-height:100svh;display:flex;align-items:flex-end;justify-content:flex-end;padding:96px clamp(22px,5vw,78px) clamp(24px,5vh,54px)}.room-story{width:min(440px,100%);padding:28px 30px;border:1px solid #ffffffb8;border-radius:32px;background:#fffaffd9;box-shadow:0 25px 65px #35265f3d;backdrop-filter:blur(14px)}.room-story h2{margin:5px 0 12px;font:700 clamp(32px,3.5vw,48px)/1.02 Georgia,serif;letter-spacing:-.03em}.room-story>p:not(.eyebrow){margin:0 0 14px;color:#50476c}.room-story details{padding:10px 0;border-top:1px solid #765cb226}.room-story summary{cursor:pointer;font:700 19px Georgia,serif}.room-story details p{margin:8px 0 2px;color:#5a5074;font-size:14px}.room-story .pill{margin-top:14px;padding:12px 17px;font-size:13px}
body.overlay-open{overflow:hidden}
@media(max-width:850px){.site-header{padding:16px}.site-header nav{gap:10px}.site-header nav a{font-size:12px}.site-header nav button{font-size:12px;padding:8px}.hero-copy{left:6%;width:88%}.hero-description{font-size:14px}.worlds-section{padding:65px 10px 55px;background-position:58% top}.dreamverse-prologue{margin-bottom:clamp(76px,13vw,112px);padding-inline:22px}.dreamverse-prologue h2{font-size:clamp(34px,7vw,48px)}.dreamverse-prologue p{font-size:clamp(20px,3.8vw,27px)}.worlds-intro{padding-inline:20px}.worlds-intro h2{font-size:clamp(39px,8vw,58px)}.dream-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px}.dream-connections{display:none}.mowe-button{grid-column:1/-1;grid-row:3;max-width:330px;justify-self:center;margin-top:22px}.island-balloons,.island-boxes,.island-corporate,.island-workshop{grid-column:auto;grid-row:auto}.island img{width:100%;max-width:100%;height:clamp(185px,42vw,250px)}.island-label{padding:9px 7px;width:100%}.island-label strong{font-size:19px}.island-label small{font-size:11px}.guide{padding:75px 16px 90px;background-position:66% center}.guide-inner{min-height:auto;display:flex;flex-direction:column;text-align:center;padding:34px 22px;background:#fffaffcf;border-radius:34px}.guide-mowe{order:2;width:min(80%,330px);height:300px;margin:30px auto -10px}.guide-inner>p:not(.eyebrow){margin:18px auto 24px}.room-backdrop{object-position:18% center}.room-dream-glow{background:linear-gradient(180deg,#392b6526 0%,transparent 54%,#392b652d 100%)}.room-content{align-items:flex-start;justify-content:center;padding:86px 14px 16px}.room-story{width:min(500px,100%);padding:20px 20px 18px;border-radius:25px;background:#fffaffe0}.room-story h2{font-size:clamp(29px,7.5vw,40px)}.room-story>p:not(.eyebrow){font-size:14px}.room-back{top:14px;left:14px;padding:10px 14px;font-size:12px}}
@media(max-width:500px){.site-header nav a{display:none}.hero-copy h1{font-size:54px}.hero-description{font-size:13px}.journey{height:170svh}.dreamverse-prologue{margin-bottom:78px;padding-inline:14px}.dreamverse-prologue h2{font-size:clamp(32px,9.4vw,40px)}.dreamverse-prologue p{font-size:clamp(19px,5.8vw,24px)}.worlds-intro{margin-bottom:34px;padding-inline:12px}.worlds-intro h2{font-size:clamp(36px,10.5vw,44px)}.worlds-intro p{font-size:15px}.island img{width:100%;height:clamp(175px,44vw,220px)}.island-label strong{font-size:16px}.island-label small,.island-label>span{font-size:10px}.mowe-button{max-width:275px}.portal-island{width:min(72vw,360px);height:min(72vw,360px)}}
@media(max-width:850px){.journey{height:145svh}.worlds-section{padding-top:0}.dreamverse-prologue{margin-top:-5svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.journey{height:100svh}.cloud-overlay,.magic-glow,.world-portal{display:none}.hero-video,.island,.mowe-button,.worlds-intro,.dream-map,.worlds-note{transition:none}}

/* Single video-to-lilac fade, without competing section overlays */
.journey-stage::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(to bottom,transparent 20%,#e7dcff00 38%,#e7dcff33 52%,#e7dcff99 68%,#e7dcff 88%,#e7dcff 100%)}
.journey,.dreamverse,.worlds-section{background-color:#e7dcff}

/* Keep hero text above the clouds */
.hero-copy {
  z-index: 10;
}

.scroll-cue {
  z-index: 10;
}

/* Clouds stay behind the text */
.cloud-overlay {
  z-index: 5;
}

.magic-glow {
  z-index: 6;
}

/* Background transition stays behind text */
.journey-stage::after {
  z-index: 7;
}

/* Lower the clouds to reveal more of the hero video */
.cloud-overlay {
  top: 18%;
  bottom: -18%;
}

/* Keep the background fade lower */
.journey-stage::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 58%,
    #e7dcff20 70%,
    #e7dcff80 85%,
    #e7dcff 100%
  );
}

/* Raise the emotional message */
.dreamverse-prologue {
  transform: translateY(-90px);
}

@media (max-width: 850px) {
  .dreamverse-prologue {
    transform: translateY(-35px);
  }
}

/* Remove decorative symbol below the message */
.dreamverse-prologue::after {
  display: none !important;
  content: none !important;
}
/* Remove island zoom during world transition */
.world-portal.is-entering .portal-island {
  display: none !important;
}

/* Keep the fog glow soft and stationary */
.world-portal.is-entering .portal-glow {
  animation: none !important;
  transform: none !important;
  opacity: 0.65;
}
/* CINEMATIC DREAM PORTAL */

.world-portal {
  background: transparent;
}

.world-portal.is-entering {
  animation: dreamPortalFade 0.85s ease-in-out forwards;
}

.world-portal .portal-cloud {
  inset: 0;
  filter: none;
  transform: none;
  background: none;
  opacity: 0;
}

.world-portal.is-entering .portal-cloud {
  animation: none;
}

.world-portal.is-entering .portal-cloud-back {
  background:
    radial-gradient(
      ellipse 110% 95% at 50% 50%,
      #e8d8ff 0%,
      #f4eaff 55%,
      transparent 100%
    );
  animation: dreamMist 0.85s ease-in-out forwards;
}

.world-portal.is-entering .portal-cloud-middle,
.world-portal.is-entering .portal-cloud-front {
  display: none;
}

@keyframes dreamMist {
  0% {
    opacity: 0;
    filter: blur(35px);
  }
  55% {
    opacity: 0.65;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes dreamPortalFade {
  0% {
    background: transparent;
  }
  100% {
    background: #f4eaff;
  }
}
/* 2026-10-25: Direct dream-world arrival, keeping original hero and island sizes */
.dreamverse-prologue{display:none!important}
.worlds-section{padding-top:clamp(35px,5vw,70px)}
.worlds-intro{margin-top:0}
.footer-verse{flex-basis:100%;text-align:center;margin:0 0 14px;font:italic clamp(17px,2vw,24px)/1.4 Georgia,serif;color:#574184}
.footer-verse span{display:block;font-size:.8em;margin-top:3px}
@media(max-width:850px){.worlds-section{padding-top:clamp(30px,5vw,55px)}}

/* Final spacing polish: shorten the actual scroll distance, not a visual-only transform. */
@media (min-width: 851px) {
  .journey { height: 145svh; }
  .worlds-section { padding-top: 20px; }
}
@media (min-width: 501px) and (max-width: 850px) {
  .journey { height: 135svh; }
  .worlds-section { padding-top: 18px; }
}
@media (max-width: 500px) {
  .journey { height: 138svh; }
  .worlds-section { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey { height: 100svh; }
}
/* Emotional brand sign-off above the functional footer links. */
footer { align-items: center; row-gap: 12px; }
footer .footer-verse {
  flex: 0 0 100%;
  margin: 2px 0 15px;
  padding: 24px 12px 26px;
  border-bottom: 1px solid #8063b53d;
  font: 700 clamp(24px, 3vw, 39px)/1.2 Georgia, serif;
  font-style: normal;
  color: #302653;
  text-align: center;
}
footer .footer-verse span {
  display: block;
  margin-top: 12px;
  font: italic 400 clamp(16px, 1.9vw, 23px)/1.4 Georgia, serif;
  color: #725a9a;
}

/* Clearer hero message: targeted adjustments only; all original animations retained. */
.hero-lead{font-size:clamp(23px,2.5vw,34px);line-height:1.2;margin:16px 0 18px}
.hero-description{max-width:610px;font-size:clamp(15px,1.18vw,18px);line-height:1.55;margin:0 0 18px}
.hero-offerings{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 4px;max-width:650px}
.hero-offerings span{display:inline-flex;align-items:center;border:1px solid #ffffffa8;background:#ffffff30;backdrop-filter:blur(8px);border-radius:999px;padding:8px 13px;color:white;font-size:clamp(12px,1vw,14px);font-weight:700;line-height:1.2;box-shadow:0 4px 15px #24173524}
.hero-button{margin-top:18px}
@media(max-width:850px){.hero-lead{font-size:clamp(22px,4vw,29px)}.hero-offerings{gap:7px}.hero-offerings span{font-size:12px;padding:7px 10px}}
@media(max-width:500px){.hero-copy{top:52%}.hero-copy h1{font-size:clamp(44px,11vw,54px)}.hero-lead{font-size:21px;margin:10px 0 12px}.hero-description{font-size:13px;line-height:1.4;margin-bottom:12px}.hero-offerings{gap:6px}.hero-offerings span{font-size:11px;padding:6px 9px}.hero-button{margin-top:14px;padding:12px 18px}}

/* === Responsive layout refinement — retains the original cinematic design === */
html{scroll-padding-top:24px}
.journey{height:120svh!important;min-height:0}
.journey-stage{height:100svh;min-height:0}
.worlds-section{padding-top:clamp(12px,2vw,26px)!important}
.worlds-intro{margin-top:0!important}
.hero-copy{
  left:clamp(24px,5.8vw,110px);
  top:50%;
  width:min(660px,58vw);
  max-width:calc(100% - 48px);
}
.hero-copy h1{font-size:clamp(52px,6.4vw,100px);line-height:1.02;margin:8px 0 16px;text-wrap:balance}
.hero-lead{font-size:clamp(23px,2.3vw,32px);line-height:1.17;margin:0 0 16px}
.hero-description{font-size:clamp(15px,1.12vw,18px);line-height:1.48;max-width:570px;margin:0 0 16px}
.hero-offerings{gap:8px;max-width:610px;margin:0}
.hero-offerings span{font-size:clamp(12px,.95vw,14px);padding:8px 12px;white-space:nowrap}
.hero-button{margin-top:19px;padding:13px 22px}
.scroll-cue{display:none!important}
.mobile-menu-toggle{display:none}
@media(min-width:1200px) and (max-height:780px){
 .hero-copy h1{font-size:clamp(52px,5.8vw,86px)}
 .hero-lead{font-size:clamp(22px,2vw,29px)}
 .hero-copy{top:53%}
}
@media(max-width:1000px){
 .site-header{padding:16px 22px}
 .site-header nav{gap:14px}
 .site-header nav a{font-size:13px}
 .hero-copy{width:min(580px,70vw)}
 .hero-copy h1{font-size:clamp(52px,7.2vw,78px)}
 .hero-lead{font-size:clamp(22px,3vw,28px)}
 .hero-offerings{max-width:510px}
 .journey{height:118svh!important}
}
@media(max-width:700px){
 .site-header{padding:13px 18px;align-items:center}
 .brand{font-size:clamp(20px,5vw,27px)}
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;border:1px solid #ffffffa8;border-radius:16px;background:#ffffff2c;color:#fff;width:44px;height:42px;font-size:23px;backdrop-filter:blur(8px)}
 .site-header nav{display:none;position:absolute;right:16px;top:calc(100% - 2px);width:min(290px,calc(100vw - 32px));padding:15px;flex-direction:column;align-items:stretch;gap:8px;border-radius:20px;background:#fff9fff5;box-shadow:0 12px 30px #26173d44}
 .site-header nav.is-open{display:flex}
 .site-header nav a{display:block!important;color:#302451;font-size:15px;padding:9px 10px}
 .site-header nav button{background:#7452d2;color:white;width:100%;padding:11px 12px}
 .journey{height:112svh!important}
 .journey-stage{height:100svh}
 .hero-video{object-position:58% center}
 .video-shade{background:linear-gradient(90deg,#1b1231c7 0%,#1b123190 65%,#1b12314d 100%)}
 .hero-copy{left:6%;top:53%;width:88%;max-width:540px}
 .hero-copy h1{font-size:clamp(44px,9.1vw,65px);margin-bottom:14px}
 .hero-lead{font-size:clamp(21px,4.2vw,27px);margin-bottom:12px}
 .hero-description{font-size:clamp(14px,2.5vw,16px);line-height:1.45;margin-bottom:14px}
 .hero-offerings{gap:7px}
 .hero-offerings span{font-size:12px;padding:7px 10px}
 .hero-button{margin-top:15px}
 .worlds-section{padding-top:15px!important}
}
@media(max-width:420px){
 .journey{height:110svh!important}
 .hero-copy{top:54%;left:6%;width:88%}
 .hero-copy h1{font-size:clamp(41px,11vw,51px);margin:5px 0 11px}
 .hero-lead{font-size:clamp(19px,5vw,22px);margin-bottom:10px}
 .hero-description{font-size:13px;line-height:1.35;margin-bottom:12px}
 .hero-offerings{gap:6px}
 .hero-offerings span{font-size:11px;padding:6px 9px}
 .hero-button{padding:12px 18px;margin-top:12px;font-size:14px}
}
@media(max-width:360px) and (max-height:700px){
 .hero-copy{top:55%}
 .hero-copy h1{font-size:39px}
 .hero-lead{font-size:18px}
 .hero-description{font-size:12px}
 .hero-offerings span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .journey{height:100svh!important}
 .hero-video{opacity:1}
}

/* Prevent CSS smooth-scroll from fighting the 7-second fog journey. */
html.cinematic-scrolling{scroll-behavior:auto!important}


/* Seamless video-to-Dreamverse fog: feather the cloud edges, not a flat cut. */
.cloud-overlay{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 69%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 69%,transparent 100%);
}
.journey-stage::after{
  background:linear-gradient(to bottom,
    transparent 0%,transparent 49%,
    #e7dcff08 59%,#e7dcff25 70%,
    #e7dcff65 81%,#e7dcffb3 91%,#e7dcff 100%)!important;
}
.dreamverse::before{
  background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffedbc 0 2px,transparent 3px);
}
.worlds-section{
  background-color:#e7dcff;
  background-image:linear-gradient(to bottom,
    #e7dcff 0%,#e7dcffed 6%,#e7dcffbd 15%,
    #e7dcff78 28%,#e7dcff22 48%,#e7dcff30 100%),
    url("../assets/images/Backgrounds/dream-world-map.webp");
}

/* 2026-10-26: actual cinematic veil spans the viewport across both sections. */
.dream-journey-veil {
  position:fixed;
  inset:-3px;
  z-index:80;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 85%, #fffaff 0%, #f4e9ffeb 48%, transparent 100%),
    radial-gradient(ellipse 75% 75% at 10% 45%, #f5eaffed 0%, transparent 88%),
    radial-gradient(ellipse 75% 75% at 90% 45%, #eee0ffed 0%, transparent 88%),
    linear-gradient(180deg,#e7dcffeb,#e7dcfff5);
  filter:blur(13px);
  will-change:opacity;
}
/* Do not show a clipped, horizontal mask edge in the stationary cloud layer. */
.cloud-overlay { -webkit-mask-image:none!important; mask-image:none!important; }
/* Make the video blend into the exact section background at its bottom. */
.journey-stage::after {
  background:linear-gradient(to bottom,
    transparent 0%, transparent 38%,
    #e7dcff0a 50%, #e7dcff26 62%,
    #e7dcff60 73%, #e7dcffac 84%,
    #e7dcffec 94%, #e7dcff 100%)!important;
}
/* Do not alter existing layout proportions or map assets. */
html.cinematic-scrolling { scroll-behavior:auto!important; }