/* Visit Aqaba — hero rebuilt from Figma theme 03 "Enchanted Diary" (page 4:10).
   Stage 1440×810, every number copied from the file. Only imagery, copy and colours changed. */

:root{
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --peach:#F3CEB9;          /* ornament (overridden by the palette tokens in site.css) */
  --play:#F69070;
  --card-dark:#160E05;
  /* motion, read from the prototype */
  --ease-in:cubic-bezier(1,.01,.02,1);        /* Screen 01 → 02, 2 s */
  --ease-par:cubic-bezier(.4,-.026,0,.989);   /* cursor parallax, 1 s */
  --ease-zoom:cubic-bezier(1,-.028,0,1.027);  /* Screen 03 → 04, 3 s */
  --ease-step:cubic-bezier(1,-.03,0,1.095);   /* carousel, 1 s */
  --ease-spring:cubic-bezier(.2,.8,.2,1);     /* Screen 06 → 07 spring (mass 8, k 100, damping 800), sampled in JS */
}

.hero{position:relative;width:100%;aspect-ratio:1440/810;overflow:hidden;background:#1a1420;color:#fff;--px:0;--py:0}
.hero .stage{position:absolute;left:var(--ox,0);top:var(--oy,0);width:1440px;height:810px;transform-origin:0 0;transform:scale(var(--s,1));direction:ltr;text-align:left;font-family:var(--font-body)}
/* the theme's cursor: a 34 px white disc (Screens 02–10) that stretches into the 81×34 pill of "Parts 01" over links */
@media (hover:hover) and (pointer:fine){.hero.cur-on,.hero.cur-on *{cursor:none!important}}
.cur{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:99px;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9;opacity:0;transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scaleX(var(--cw,1));transition:opacity .3s,transform .18s cubic-bezier(.2,.8,.2,1)}
.hero.cur-on .cur{opacity:1}
.hero.cur-link .cur{--cw:2.4;border-radius:99px}
.stage *{box-sizing:border-box}
.stage .abs,.stage .abs-all *{position:absolute;margin:0}
.stage a{color:inherit;text-decoration:none}

/* ===== animated pieces: --from (Screen 01) → rest (Screen 02) ===== */
.a{--from:none;--rest:none;transform:var(--rest);transition:transform 2s var(--ease-in)}
.hero[data-phase="pre"] .a{transform:var(--from);transition:none}
/* pointer parallax (Screens 10/09/08): applied on an inner wrapper so it stacks with the entrance */
.p{transition:transform 1s var(--ease-par)}
@media (prefers-reduced-motion:reduce){.a,.p,.inner,.btext,.wheel,.outer,.enter-txt{transition:none!important}}

/* ===== INNER WORLD (Scene B, seen through the portal in Scene A) ===== */
.inner{position:absolute;inset:0;overflow:hidden;transform-origin:0 0;transition:transform 2s var(--ease-in)}
.hero[data-phase="pre"] .inner{transform:translate(111px,62.4px) scale(.8458);transition:none}
.sky{position:absolute;left:-266px;top:-20.9px;width:1972px;height:842px;overflow:hidden}
/* the composite is the film's last frame with the sea painted below it; it sits exactly where the film sat, then pans down to settle */
.sky img{position:absolute;left:0;top:-133.5px;width:1972px;height:auto;transition:transform 1.8s cubic-bezier(.3,.7,.2,1)}
.hero[data-phase="b"] .sky img{transform:translateY(-460px)}
.hero[data-phase="b"] .journey{transform:translateY(-460px);transition:opacity .9s linear,transform 1.8s cubic-bezier(.3,.7,.2,1)}
/* the journey film: same frame as the sky layer so its last frame hands over to the still without a jump */
.journey{position:absolute;left:-266px;top:-20.9px;width:1972px;height:842px;opacity:0;pointer-events:none;transition:opacity .9s linear;z-index:3}
.ground{transition:opacity .6s linear}
.hero[data-phase="film"] .ground{opacity:0}
.journey video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero[data-phase="zoom"] .journey,.hero[data-phase="film"] .journey{opacity:1}
.hero[data-phase="zoom"] .btext,.hero[data-phase="zoom"] .wheel,.hero[data-phase="zoom"] .fg,.hero[data-phase="zoom"] .fg2,.hero[data-phase="zoom"] .scrim-b,.hero[data-phase="film"] .btext,.hero[data-phase="film"] .wheel,.hero[data-phase="film"] .fg,.hero[data-phase="film"] .fg2,.hero[data-phase="film"] .scrim-b{opacity:0}
.hero[data-phase="film"] .outer{transform:scale(6.2);opacity:0;pointer-events:none;transition:none}
.ground{display:none;position:absolute;left:0;top:308px;width:1440px;height:810px;-webkit-mask:linear-gradient(to bottom,transparent 200px,#000 300px);mask:linear-gradient(to bottom,transparent 200px,#000 300px)}
.ground img{width:100%;height:100%;object-fit:cover;display:block}
.inner .par{transform:translate(calc(var(--px)*12px),calc(var(--py)*10px))}
.scrim-b{position:absolute;left:0;top:497px;width:1440px;height:497px;opacity:.6;background:linear-gradient(to bottom,rgba(12,10,31,.01),#0C0A1F)}
/* foreground cloud bank (the theme's "Object" layer): sits in front of the lower cards and slides with every step */
.fg{position:absolute;left:-160px;top:400px;width:2060px;height:781px;pointer-events:none;transition:transform 1s var(--ease-step)}
.fg img{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);display:block}
/* second, smaller cloud bank on the left (the theme shows clouds both sides) */
.fg2{position:absolute;left:-260px;top:430px;width:1500px;height:569px;pointer-events:none;transition:transform 1s var(--ease-step);opacity:.96}
.fg2 img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero[data-phase="b"] .wheel.spring~.fg{transition:transform 3.16s var(--ease-spring)}

.btext{position:absolute;left:0;top:78px;width:1440px;text-align:center;transform-origin:50% 0;transition:transform 3s var(--ease-zoom),opacity 1.2s linear 1.2s}
.hero[data-phase="pre"] .btext,.hero[data-phase="a"] .btext{transform:translateY(-138.8px) scale(.447);opacity:0;transition:none}
.hero[data-phase="pre"] .btext{transition:none}
.btext h2{margin:0 auto;font:500 88px/.92 var(--font-display);width:max-content;letter-spacing:-.015em;white-space:nowrap;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.btext p{margin:10px auto 0;width:560px;font:400 16px/1.45 var(--font-body);opacity:.9}
.btext p em{font-style:normal;color:var(--peach)}

/* the card wheel: 21 cards on a 1538 px circle, centre (720, 1364.5), 15° apart */
.wheel{position:absolute;left:720px;top:1364.5px;width:0;height:0;--wz:translate(0,0);transform:var(--wz) rotate(var(--rot,0deg));transition:transform 3s var(--ease-zoom)}
.hero[data-phase="pre"] .wheel,.hero[data-phase="a"] .wheel{--wz:translateY(-959px) scale(1.67);transition:none}
.hero[data-phase="b"] .wheel{transition:transform 1s var(--ease-step)}
.hero[data-phase="b"] .wheel.spring{transition:transform 3.16s var(--ease-spring)}
.wcard{position:absolute;left:-113px;top:-122px;width:226px;height:244px;border-radius:40px;padding:0;background:var(--c,#1a1420);color:#fff;transform:rotate(var(--t)) translateY(-895px);display:block;cursor:pointer;overflow:hidden;will-change:transform;box-shadow:0 18px 40px rgba(12,10,31,.25)}
.wcard .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,10,31,.05) 30%,rgba(12,10,31,.82));pointer-events:none}
.wcard:hover .ph{transform:scale(1.06)}
.wcard:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wcard h3{position:absolute;left:18px;right:18px;bottom:54px;margin:0;font:700 24px/1.02 var(--font-display);letter-spacing:-.01em;z-index:1;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.wcard p{position:absolute;left:18px;right:18px;bottom:16px;margin:0;font:400 13.5px/1.25 var(--font-body);opacity:.85;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard .ic{position:absolute;left:168.6px;top:12px;width:45.4px;height:45.4px;z-index:1;border-radius:50%}
.wcard .ic svg{width:45.4px;height:45.4px;display:block}
.wcard:hover h3{text-decoration:none}
.wheel-ctl{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:12px;z-index:5;opacity:0;pointer-events:none;transition:opacity .6s}
.hero[data-phase="b"] .wheel-ctl{opacity:1;pointer-events:auto}
.wheel-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(20,20,30,.35);color:#fff;font:400 18px var(--font-body);cursor:pointer}
.wheel-ctl button:hover{background:rgba(255,255,255,.3)}
.wheel-ctl button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===== OUTER WORLD (Scene A) — zooms 6.2× into the portal on Enter ===== */
.outer{position:absolute;inset:0;transform-origin:742px 389px;transition:transform 3s var(--ease-zoom),opacity .6s linear 2.6s}
.hero[data-phase="zoom"] .outer,.hero[data-phase="b"] .outer{transform:scale(6.2)}
.hero[data-phase="b"] .outer{opacity:0;pointer-events:none;transition:none}
/* the sea seen through the arch: a still, inside the outer world so it zooms and fades with the rock */
/* the still sits in exactly the film's frame, so the hand-over at 2 s is invisible */
.view{position:absolute;left:-266px;top:-20.9px;width:1972px;height:842px;overflow:hidden;opacity:1;transition:opacity .7s linear 2s}
.view .p{position:absolute;inset:0;transform:translate(calc(var(--px)*-10px),calc(var(--py)*-8px))}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero[data-phase="zoom"] .view{opacity:0}
.hero[data-phase="film"] .view,.hero[data-phase="b"] .view{opacity:0;transition:none}
.portal{position:absolute;left:-38.2px;top:-46.1px;width:1516.3px;height:902.2px;transform-origin:758.2px 451.1px;--from:scale(1.912)}
.portal .p{position:absolute;inset:0;transform:translate(calc(var(--px)*20px),calc(var(--py)*20px))}
.portal img{position:absolute;inset:0;width:100%;height:100%}
.scrim-a{position:absolute;left:0;top:497px;width:1440px;height:313px;opacity:.6;background:linear-gradient(to bottom,rgba(0,0,0,0),#000);pointer-events:none}
.curtain{position:absolute;top:0;width:1890.5px;height:810px;pointer-events:none}
.curtain img{position:absolute;inset:0;width:100%;height:100%}
.curtain.l{left:-984px;--from:translateX(640px)}
.curtain.r{left:534px;--from:translateX(-860px)}
.curtain .p{position:absolute;inset:0;transform:translate(calc(var(--px)*110px),calc(max(var(--py),0)*30px))}

/* headline: Step › Into / Aqaba */
.headline{position:absolute;left:171px;top:196px;width:332px;height:133px;--from:translateY(-100px)}
.headline .p{position:absolute;inset:0;transform:translateX(calc(var(--px)*60px))}
.headline .w1,.headline .w2,.headline .w3{position:absolute;margin:0;font:500 78px/.9 var(--font-display);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.headline .w2{font:300 44px/1 var(--font-body);letter-spacing:.06em;text-transform:lowercase;color:rgba(255,255,255,.92)}
.headline .w3{font-style:italic;font-weight:400}
.headline .w1{left:0;top:0;width:auto;height:56px}
.headline .w2{left:152px;top:22px;width:auto;height:56px;text-align:left}
.headline .w3{left:0;top:66px;width:auto;height:72px;font-size:76px}
.headline .orn{position:absolute;left:157px;top:37px;width:16.9px;height:25.1px;color:var(--peach)}
.headline .orn svg{width:16.9px;height:25.1px;display:block}
.para{position:absolute;left:229px;top:355px;width:206px;margin:0;font:400 16px/1.2 var(--font-body);--from:translateY(80px)}
.para .p{display:block;transform:translateX(calc(var(--px)*60px))}

/* three media cards (184×193, r40) + dots */
.cards{position:absolute;left:891px;top:273.5px;width:573.6px;height:223.5px}
.cards .track{position:absolute;left:0;top:0;width:974px;height:193px;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.cards .p{overflow:hidden}
.cards .p{position:absolute;inset:0;transform:translate(calc(var(--px)*40px),calc(var(--py)*30px))}
.mcard{position:absolute;top:0;width:184px;height:193px;border-radius:40px;overflow:hidden;background:var(--card-dark);display:block;transition:transform 1s var(--ease-par)}
.mcard:nth-child(1){left:0;--from:translateY(-220px)}
.mcard:nth-child(2){left:194.8px;--from:translateY(-370px)}
.mcard:nth-child(3){left:389.6px;--from:translateY(-510px)}
.mcard:nth-child(4){left:584.4px;--from:translateY(-640px)}
.mcard:nth-child(5){left:779.2px;--from:translateY(-760px)}
.mcard img,.mcard video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.mcard video{opacity:0;transition:opacity .5s}
.mcard video.ready{opacity:1}
.mcard .ft{position:absolute;left:0;top:93px;width:184px;height:100px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.85))}
.mcard .lbl{position:absolute;left:74.3px;top:34.7px;width:100px;margin:0;font:500 17px/1.2 var(--font-body);color:#fff}
.mcard .num{position:absolute;left:18px;top:40px;margin:0;font:700 30px/.94 var(--font-display);color:#fff;white-space:nowrap}
.mcard .num+.lbl{left:92px;top:36px;width:84px;font-size:17px}
.mcard .play{position:absolute;left:12px;top:32.6px;width:45.4px;height:45.4px;border-radius:50%;background:#fff}
.mcard .play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:8.5px 0 8.5px 13px;border-color:transparent transparent transparent var(--play);border-radius:2px}
.mcard:hover{transform:scale(1.03)}
.mcard:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dots{position:absolute;left:29px;top:215.5px;width:121px;height:8px}
.dots i{position:absolute;top:0;width:17.5px;height:8px;border-radius:99px;background:#fff}
.dots i{opacity:.35;transition:opacity .4s}.dots i.on{opacity:1}.dots i:nth-child(1){left:0}.dots i:nth-child(2){left:34.5px}.dots i:nth-child(3){left:69px}
.dots{pointer-events:auto}.dots i{cursor:pointer}

/* round "Enter Experience" button (Group 43): 122.9 circle, 60% opacity, text on a path, double chevron */
.enter{position:absolute;left:658.5px;top:658px;width:122.9px;height:122.9px;opacity:1;--from:translateY(150px);border:0;background:none;padding:0;color:#fff;cursor:pointer;transition:transform 2s var(--ease-in),opacity .4s}
.enter:hover,.enter:focus-visible{opacity:1;outline:none}
.enter .ring{position:absolute;inset:0;border-radius:50%;border:1px solid #fff}
.enter .enter-txt{position:absolute;left:18px;top:18px;width:87px;height:87px;transition:transform 2s var(--ease-in)}
.hero[data-phase="pre"] .enter .enter-txt{transform:rotate(90deg);transition:none}
.enter .enter-txt svg{width:87px;height:87px;display:block;overflow:visible}
.enter .enter-txt text{font:400 8.6px var(--font-body);letter-spacing:1.9px;text-transform:uppercase;fill:#fff}
.enter .chev{position:absolute;left:49px;top:50px;width:25px;height:24px}
.enter .chev svg{width:25px;height:24px;display:block}

/* nav (Frame 1597882308): 82/14.7, 1274 wide, Imprima 13 */
.hnav{position:absolute;left:82px;top:14.7px;width:1274.1px;height:48.4px;--from:translateY(-120px);z-index:4}
.hnav .grp{position:absolute;top:16.2px;height:16px;display:flex;justify-content:space-between;font:400 13px/1.2 var(--font-body);white-space:nowrap}
.hnav .grp.l{left:0;width:447px}
.hnav .grp.r{left:804.6px;width:469.6px}
.hnav .grp a{opacity:.6;position:relative}
.hnav .grp a:hover,.hnav .grp a[aria-current]{opacity:1}
.hnav .grp a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hnav .logo{position:absolute;left:586px;top:3px;width:102px;height:42px;display:block}
.hnav .logo img{width:100%;height:100%;object-fit:contain;display:block}

/* small controls (replay) */
.hero-ctl{position:absolute;right:18px;bottom:18px;z-index:6;display:flex;gap:8px}
.hero-ctl button{border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font:400 12px var(--font-body);padding:7px 11px;border-radius:99px;cursor:pointer}
.hero-ctl button:hover{background:rgba(0,0,0,.45)}
.hero-ctl button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* skip link target + visually hidden text */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== compact hero for narrow screens (< 860px): same ingredients, stacked ===== */
.hero-compact{display:none}
@media (max-width:859px){
  .hero{display:block;aspect-ratio:auto;height:100svh;min-height:560px}
  .hero-compact{display:none!important;position:relative;color:#fff;background:#1a1420;overflow:hidden}
  .hero-compact .bg{position:absolute;inset:0}
  .hero-compact .bg img,.hero-compact .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-compact .bg .portal-m{object-position:50% 40%}
  .hero-compact .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.05) 40%,rgba(0,0,0,.75))}
  .hero-compact .in{position:relative;padding:112px 20px 28px;min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
  .hero-compact h1{margin:0;font:500 clamp(44px,13vw,72px)/.94 var(--font-display);letter-spacing:-.01em}
  .hero-compact h1 .orn{display:inline-block;width:.32em;height:.5em;vertical-align:-.02em;margin:0 .12em;color:var(--peach)}
  .hero-compact h1 .orn svg{width:100%;height:100%;display:block}
  .hero-compact p{margin:0;font:400 17px/1.35 var(--font-body);max-width:34ch}
  .hero-compact .cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:6px;padding:14px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:400 14px/1 var(--font-body);letter-spacing:1.5px;text-transform:uppercase;color:#fff}
  .hero-compact .strip{position:relative;display:flex;gap:12px;overflow-x:auto;padding:14px 20px 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:#1a1420}
  .hero-compact .strip::-webkit-scrollbar{display:none}
  .hero-compact .wcard{position:relative;left:auto;top:auto;transform:none;flex:0 0 200px;height:216px;scroll-snap-align:start;border-radius:34px}
  .hero-compact .wcard h3{font-size:22px}
  .hero-compact .wcard p{font-size:13px}
}

/* "Welcome" in the world's languages, above "to Aqaba" */
.btext .welcome{position:relative;height:1.25em;margin:0 auto 2px;font:400 38px/1.2 var(--font-display);color:#fff;letter-spacing:.01em;width:auto}
.btext .welcome span{position:absolute;left:0;right:0;top:0;opacity:0;filter:blur(10px);transform:translateY(6px);transition:opacity .7s ease,filter .7s ease,transform .7s ease;font-family:var(--font-display),"Noto Naskh Arabic","Geeza Pro","Noto Sans SC","PingFang SC","Hiragino Sans",serif}
.btext .welcome span.on{opacity:1;filter:blur(0);transform:none}

/* the Enter ring breathes and sends out a wave, so the hand knows where to go */
.enter .ring{animation:enter-breathe 2.4s ease-in-out infinite}
.enter::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);animation:enter-wave 2.4s ease-out infinite;pointer-events:none}
.hero[data-phase="pre"] .enter::before,.hero[data-phase="zoom"] .enter::before,.hero[data-phase="film"] .enter::before,.hero[data-phase="b"] .enter::before{animation:none;opacity:0}
.enter .chev{animation:enter-nudge 2.4s ease-in-out infinite}
@keyframes enter-breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes enter-wave{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes enter-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.enter .ring,.enter::before,.enter .chev{animation:none}}

/* ---------- the hero on phones: same stage, cropped around the arch, text re-hung on the visible window ---------- */
@media (max-width:859px){
  .hero .stage{--pad:28px}
  .headline{left:calc(var(--vl)*1px + var(--pad));top:calc(var(--vt)*1px + var(--vh)*1px - 430px);width:calc(var(--vw)*1px - var(--pad)*2);height:150px}
  .headline .w1{font-size:68px}.headline .w2{left:146px;top:18px;font-size:38px}.headline .w3{top:60px;font-size:66px}
  .para{left:calc(var(--vl)*1px + var(--pad));top:calc(var(--vt)*1px + var(--vh)*1px - 268px);width:calc(var(--vw)*1px - var(--pad)*2);font-size:17px;line-height:1.3}
  .enter{left:calc(var(--vl)*1px + var(--vw)*0.5px - 61px);top:calc(var(--vt)*1px + var(--vh)*1px - 170px)}
  .hnav .grp{display:none}
  .hnav .logo{left:calc(var(--vl)*1px + var(--vw)*0.5px - 51px);top:calc(var(--vt)*1px + 20px)}
  .btext{left:calc(var(--vl)*1px);width:calc(var(--vw)*1px);top:calc(var(--vt)*1px + 96px)}
  .btext .welcome{font-size:30px}.btext h2{font-size:64px}.btext p{width:calc(var(--vw)*1px - 56px);font-size:14px}
  .hero-ctl{bottom:14px;right:12px}
  .wheel-ctl{bottom:16px}
}