/* House of White Wings in the city (wwhouse.js): the magic-carpet ride's small bar, and the calm white hall
   inside the house with its three doors. Porcelain white and soft champagne gold, cool daylight (never cream
   or yellow), low motion, no flashing. Fonts are the house's own (art/white-wings/fonts, served at /ww/). */
@font-face{font-family:"WW Ruqaa";src:url(../../ww/fonts/ArefRuqaa-700.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"WW Amiri";src:url(../../ww/fonts/Amiri-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:"WW Amiri";src:url(../../ww/fonts/Amiri-700.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"WW Cormorant";src:url(../../ww/fonts/CormorantGaramond-500.ttf);font-weight:500;font-display:swap}
@font-face{font-family:"WW Cormorant";src:url(../../ww/fonts/CormorantGaramond-600.ttf);font-weight:600;font-display:swap}

/* ---------- the ride ---------- */
.wwj{position:fixed;inset:0;z-index:34;display:flex;align-items:flex-end;justify-content:center;
  padding:0 16px calc(env(safe-area-inset-bottom,0px) + 24px);cursor:pointer;touch-action:none}
.wwj[hidden]{display:none}
.wwj-pill{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;max-width:min(560px,100%);
  padding:8px 8px 8px 8px;padding-inline-start:20px;border-radius:28px;cursor:default;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(210,182,136,.55);box-shadow:0 12px 30px -14px rgba(40,50,70,.4);animation:wwjin .6s ease both}
.wwj-say{font-family:var(--body);font-weight:600;font-size:15px;line-height:1.45;color:#2F3540;text-wrap:balance;text-align:center}
.wwj-skip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #E3D7BD;background:#fff;color:#7A6140;
  font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer;touch-action:manipulation}
.wwj-skip:focus-visible{outline:3px solid rgba(176,150,106,.6);outline-offset:2px}
.wwj-veil{position:fixed;inset:0;z-index:36;background:#F7F9FB;opacity:0;pointer-events:none;transition:opacity .42s ease}
.wwj-veil.on{opacity:1}
body.ww-journey .camctl,body.ww-journey .dock,body.ww-journey .counter,body.ww-journey #labels{display:none}
@keyframes wwjin{from{opacity:0;transform:translateY(10px)}}

/* ---------- the hall ---------- */
.room.wwh{--door-a:#FFFFFF;--door-b:#E7EDF3;--ink:#2B3140;--ink-soft:#586071;--ink-faint:#7D8492;--gold:#B0966A;--gold-line:#E3D7BD;--gold-text:#7A6140;
  --ww-serif:"WW Amiri","Amiri","Times New Roman",serif;--ww-display:"WW Ruqaa","WW Amiri",serif;--ww-sans:"Tajawal",system-ui,sans-serif;
  --clay-shadow:0 3px 0 #DCE4EC,0 14px 26px -16px rgba(30,50,80,.32);background:#F4F7FA}
:root[lang="en"] .room.wwh{--ww-serif:"WW Cormorant",Georgia,serif;--ww-display:"WW Cormorant",Georgia,serif}
.wwh .room-doors i{background:linear-gradient(180deg,#FFFFFF,#E9EEF3);box-shadow:inset 0 0 0 10px rgba(255,255,255,.7),inset 0 0 0 12px #E9DFC9}
.wwh .room-doors i::before{inset:12% 20% 34%;border-radius:999px 999px 18px 18px;background:linear-gradient(170deg,#FFFFFF,#EDF2F6);box-shadow:inset 0 0 0 3px #E3D7BD}
.wwh .room-doors i::after{background:linear-gradient(90deg,#F2E8D2,#B9A274)}
.wwh-float{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wwh-float .drift{animation:wwdrift 16s ease-in-out infinite alternate}
.wwh-float .d1{animation-duration:19s;animation-delay:-6s}.wwh-float .d2{animation-duration:23s;animation-delay:-11s}
@keyframes wwdrift{from{transform:translate(0,0) rotate(0)}to{transform:translate(24px,60px) rotate(14deg)}}

.wwh .room-head{background:linear-gradient(180deg,rgba(247,250,252,.97) 62%,rgba(247,250,252,0))}
.wwh .room-plaque{padding-inline-end:18px}
.wwh-emblem{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:0 3px 10px rgba(120,100,70,.16)}
.wwh .room-title{font-family:var(--ww-serif);font-weight:700;font-size:clamp(16px,4.2vw,21px);color:var(--gold-text)}
:root[lang="en"] .wwh .room-title{font-weight:600;font-size:clamp(18px,4.4vw,23px)}
.wwh .room-exit,.wwh .room-back{font-family:var(--ww-sans);font-weight:700;color:var(--ink)}
.wwh .room-exit .ico{width:24px;height:24px}
@media (max-width:420px){.wwh .room-title{display:none}.wwh .room-plaque{padding:5px}}
@media (max-width:400px){.wwh .room-exit span{display:inline}.wwh .room-exit{padding-inline:12px}.wwh .room-exit .ico{display:none}}
@media (max-width:600px){.wwh .room-head:has(.room-back:not([hidden])) .room-plaque{display:none}.wwh .room-head:has(.room-back:not([hidden])) .room-back{margin-inline-end:auto}}

.wwh-hall{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:900px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 36px);animation:wwhin .5s ease both}
.wwh-hall[hidden]{display:none}
@keyframes wwhin{from{opacity:0;transform:translateY(8px)}}
.wwh-crest{width:min(236px,56vw);height:auto;margin:0 0 -4px;filter:drop-shadow(0 14px 24px rgba(120,100,70,.12));animation:wwbreathe 8s ease-in-out infinite}
.wwh-heart{width:min(200px,46vw);height:auto;margin:-4px 0 -6px;animation:wwbreathe 7s ease-in-out infinite}
@keyframes wwbreathe{50%{transform:scale(1.025)}}
.wwh-kicker{margin:0;font:500 14px/1.5 var(--ww-sans);color:var(--gold-text)}
:root[lang="en"] .wwh-kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase}
.wwh-welcome{margin:4px 0 6px;font:700 clamp(30px,7vw,48px)/1.35 var(--ww-display);
  background:linear-gradient(100deg,#8C7046 0%,#B99D6C 18%,#DCCBA4 30%,#A2865A 46%,#C3AA7C 62%,#8A6E44 82%,#B49867 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em .2em .3em;text-wrap:balance}
:root[lang="en"] .wwh-welcome{font-weight:600;font-size:clamp(32px,6.6vw,50px);line-height:1.15}
.wwh-welcome:focus{outline:none}
.wwh-lead{max-width:640px;margin:0 0 6px;font:700 clamp(19px,2.8vw,23px)/1.85 var(--ww-serif);color:var(--gold-text);text-wrap:balance}
:root[lang="en"] .wwh-lead{font-weight:600;font-style:italic;line-height:1.45}
.wwh-line{max-width:620px;margin:0;font:400 16px/1.75 var(--ww-sans);color:var(--ink-soft);text-wrap:pretty}
.wwh-read{min-height:44px;margin:4px 0 0;padding:0 14px;border:0;background:none;color:var(--gold-text);
  font:600 15px/1 var(--ww-sans);text-decoration:underline;text-decoration-color:rgba(176,150,106,.55);text-underline-offset:5px;cursor:pointer}
.wwh-more{max-width:680px;margin:6px 0 4px;padding:20px clamp(18px,4vw,34px) 6px;border-radius:24px;background:rgba(255,255,255,.88);
  border:1px solid rgba(227,215,189,.8);box-shadow:0 12px 30px -18px rgba(37,55,85,.25)}
.wwh-more[hidden]{display:none}
.wwh-more p{margin:0 0 14px;font:400 clamp(17px,2.3vw,19px)/1.9 var(--ww-serif);color:var(--ink)}
:root[lang="en"] .wwh-more p{font-weight:500;line-height:1.55}
.wwh-doors-title{display:flex;align-items:center;gap:14px;margin:16px 0 12px;font:700 clamp(21px,3.6vw,27px)/1.4 var(--ww-serif);color:var(--ink)}
:root[lang="en"] .wwh-doors-title{font-weight:600}
.wwh-doors-title::before,.wwh-doors-title::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.wwh-doors-title::after{transform:scaleX(-1)}

/* three arched doors, side by side on every screen (it is a hall with three doors) */
.wwh-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.4vw,20px);width:100%;max-width:820px}
.wwh-door{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:clamp(176px,28vw,228px);
  padding:0 8px 16px;border:1px solid #E6DAC2;border-radius:50% 50% 22px 22px / 30% 30% 22px 22px;cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 60%,#F4F7FA 100%);color:var(--ink);font:inherit;
  box-shadow:inset 0 0 0 5px #FFFFFF,inset 0 0 0 6px #EFE6D3,0 16px 30px -18px rgba(37,55,85,.35),0 2px 0 #E4EAF0;
  transition:transform .25s ease,box-shadow .25s ease;touch-action:manipulation}
.wwh-door:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 5px #FFFFFF,inset 0 0 0 6px #E3D3B2,0 22px 34px -18px rgba(37,55,85,.4),0 2px 0 #E4EAF0}
.wwh-door:active{transform:translateY(1px)}
.wwh-door:focus-visible{outline:3px solid rgba(176,150,106,.7);outline-offset:4px}
.wwh-arch{display:grid;place-items:center;width:clamp(58px,13vw,84px);aspect-ratio:1;margin:clamp(22px,5vw,36px) 0 10px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#FFFFFF,#F2F5F8);box-shadow:0 8px 18px -10px rgba(120,100,70,.35)}
.wwh-ico{width:100%;height:100%}
.wwh-door-text{display:flex;flex-direction:column;align-items:center;gap:6px}
.wwh-door b{font:700 clamp(15px,2.6vw,19px)/1.4 var(--ww-serif);text-wrap:balance}
:root[lang="en"] .wwh-door b{font-weight:600;font-size:clamp(16px,2.8vw,21px);line-height:1.2}
.wwh-door small{font:400 13.5px/1.5 var(--ww-sans);color:var(--ink-soft);text-wrap:balance}
.wwh-soon{display:inline-block;padding:2px 10px;border-radius:999px;font:500 12px/1.6 var(--ww-sans);font-style:normal;color:var(--gold-text);
  background:#F4EAD6;border:1px solid rgba(196,171,126,.45)}
.wwh-door.soon{background:linear-gradient(180deg,#FBFCFD,#F2F5F8)}
.wwh-door.soon .wwh-arch{opacity:.8}
@media (max-width:560px){.wwh-door small{display:none}}
@media (max-height:860px) and (min-width:700px){.wwh-crest{width:180px}.wwh-doors-title{margin-top:10px}}
.wwh-cert{min-height:44px;margin:18px 0 0;padding:0 22px;border-radius:999px;border:1px solid #D9C9A6;background:#fff;color:var(--gold-text);
  font:700 15px/1 var(--ww-sans);cursor:pointer;box-shadow:0 8px 18px -12px rgba(120,100,70,.4)}
.wwh-cert[hidden]{display:none}
.wwh-mine{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.wwh-mine .wwh-cert{margin-top:18px}
.wwh-note{max-width:560px;margin:16px 0 0;padding:10px 16px;border-radius:14px;background:#fff;border:1px solid var(--gold-line);font:500 14px/1.6 var(--ww-sans);color:var(--ink-soft)}
.wwh-trust{max-width:600px;margin:22px 0 4px;font:400 13px/1.7 var(--ww-sans);color:var(--ink-faint)}
.wwh-by{margin:2px 0 0;font:500 14px/1.6 var(--ww-sans);color:var(--ink-faint);display:inline-flex;align-items:baseline;gap:.35em;flex-wrap:wrap;justify-content:center}
.wwh-kodomo{font:800 1.45em/1 "Baloo Bhaijaan 2",system-ui,sans-serif;letter-spacing:.01em;direction:ltr}
.wwh-kodomo .k1{color:#E52521}.wwh-kodomo .k2{color:#2EA84A}.wwh-kodomo .k3{color:#1EA3DF}.wwh-kodomo .k4{color:#E6197E}.wwh-kodomo .k5{color:#8D3D97}.wwh-kodomo .k6{color:#F6C21C;text-shadow:0 0 .5px rgba(150,110,0,.5)}

/* ---------- a door's form, inside the house ---------- */
.wwh.visiting .wwh-inner{overflow:hidden}
.wwh-visit{position:relative;z-index:1;flex:1;min-height:0;width:min(1080px,calc(100% - 20px));margin:0 auto calc(env(safe-area-inset-bottom,0px) + 10px);
  border-radius:24px;overflow:hidden;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(227,215,189,.75);box-shadow:0 18px 40px -24px rgba(37,55,85,.35)}
.wwh-visit[hidden]{display:none}
.wwh-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity .4s ease}
.wwh-visit.ready .wwh-frame{opacity:1}
.wwh-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:700 18px/1.5 var(--ww-serif);color:var(--gold-text);transition:opacity .3s ease}
.wwh-visit.ready .wwh-wait{opacity:0;pointer-events:none}
@media (max-width:600px){.wwh-visit{width:100%;margin:0;border-radius:20px 20px 0 0;border-bottom:0}}

@media (prefers-reduced-motion:reduce){
  .wwj-pill,.wwh-hall,.wwh-crest,.wwh-heart,.wwh-float .drift{animation:none}
  .wwh-door,.wwh-frame,.wwh-wait{transition:none}
}