/* Homepage hero "Light" (owner's choice, 3 Oct 2026): a calm centred headline, lit like a keynote slide -
   one warm light rising over the horizon of a dark planet. Loaded by index.html only.
   Every rule lives under .paper-hero. */

/* ---- calm ground: nothing crosses the words ---- */
body.paper .paper-hero::before{display:none}
body.paper .paper-hero{min-height:min(100svh,900px);overflow:clip}
.paper-hero .ph-stage{min-height:min(calc(100dvh - 90px),900px)}
/* a touch more room under the facts than above the badge: the planet needs floor, the top stays dark */
body.paper .paper-hero .ph-sheet{padding-block:clamp(48px,7vh,80px) clamp(64px,10vh,110px)}

.paper-hero{
  color-scheme:dark; /* forced dark modes (Samsung Internet, Chrome 'darken websites') would invert the headline gradient */
  --hl-ease:cubic-bezier(0.22,1,0.36,1);
  --hl-gap:clamp(104px,14vh,140px);     /* buttons -> facts */
  --hl-apex:calc(var(--hl-gap) * 0.44); /* where the horizon crosses that gap */
}

/* ---- one centred column; named rows so the light can find the facts row ---- */
.paper-hero .ph-sheet{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"badge" "kicker" "title" "sub" "ctas" "facts";
  justify-items:center;text-align:center;isolation:isolate
}
.paper-hero .hl-head{display:contents}
.paper-hero .live-badge{grid-area:badge}
.paper-hero .ph-kicker{grid-area:kicker}
.paper-hero .ph-title{grid-area:title}
.paper-hero .ph-sub{grid-area:sub}
.paper-hero .ph-ctas{grid-area:ctas}
.paper-hero .ph-facts{grid-area:facts}
.paper-hero .live-badge,.paper-hero .ph-kicker,.paper-hero .ph-title,.paper-hero .ph-sub,.paper-hero .ph-ctas,.paper-hero .ph-facts{position:relative;z-index:1}

/* ---- glass pill ---- */
.paper-hero .live-badge{
  margin:0 0 24px;padding:8px 16px 8px 13px;
  background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));
  border:1px solid rgba(241,239,232,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 12px 32px -14px rgba(0,0,0,0.8);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)
}
.paper-hero .live-badge:hover{border-color:rgba(255,138,51,0.55)}
.paper-hero .live-dot{box-shadow:0 0 10px rgba(255,107,0,0.8)}
.paper-hero .ph-kicker::before{box-shadow:0 0 10px rgba(255,107,0,0.7)}

/* ---- headline ---- */
.paper-hero .ph-title{
  font-family:var(--font-display);font-weight:500;font-style:normal;
  font-size:clamp(1.3rem,2.05vw,2rem);line-height:1.25;letter-spacing:-0.012em;
  color:#b6b1a7;max-width:none;margin-top:26px;text-wrap:balance
}
.paper-hero .ph-title .ph-accent{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;color:inherit}
.paper-hero .ph-title .ph-line:nth-child(n+2){display:inline}
.paper-hero .ph-title .ph-line:nth-child(1){
  display:block;font-size:clamp(2.6rem,5.6vw,5.9rem);line-height:1.04;letter-spacing:-0.034em;font-weight:600;
  margin-bottom:clamp(14px,1.4vw,22px);padding-bottom:0.04em
}
/* metallic sheen: pure white at the top of each line, warm grey at the foot.
   Without JavaScript the line carries it (one tile per line); once motion.js
   splits the words, each word carries its own copy. */
.paper-hero .ph-title .ph-line:nth-child(1),
.paper-hero .ph-title .ph-line:nth-child(1) .swi{
  background-image:linear-gradient(180deg,#ffffff 6%,#f6f3ec 42%,#c4bdb1 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.paper-hero .ph-title .ph-line:nth-child(1){background-size:100% 1.04em;background-repeat:repeat-y}
.paper-hero .ph-title .ph-line:nth-child(1):has(.sw){background-image:none}
.paper-hero .ph-title .ph-line:nth-child(1) .swi{background-size:100% 100%;padding-bottom:0.04em;margin-bottom:-0.04em}
.paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai,
.paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai .swi{
  background-image:linear-gradient(115deg,#ff6b00 8%,#ff8a33 48%,#ffb347 96%);background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.paper-hero .ph-title .ph-line:nth-child(1):has(.sw) .hl-dubai{background-image:none}

/* ---- intro paragraph: small and quiet ---- */
.paper-hero .ph-sub{
  margin-top:clamp(20px,2vw,28px);max-width:42em;font-size:clamp(0.98rem,1.08vw,1.1rem);
  line-height:1.6;color:#9d988d;font-weight:400;text-wrap:balance
}
.paper-hero .ph-sub a{color:#e9e6de}

/* ---- buttons: lit orange + glass ---- */
.paper-hero .ph-ctas{justify-content:center;margin-top:clamp(30px,2.8vw,40px);gap:12px 14px}
.paper-hero .btn-hero{
  background:linear-gradient(180deg,#ff8f3a 0%,#ff6b00 100%);color:#1a0d02;padding:15px 28px;
  box-shadow:inset 0 1px 0 rgba(255,232,205,0.55),inset 0 -1px 0 rgba(110,36,0,0.25),0 12px 34px -12px rgba(255,107,0,0.75)
}
.paper-hero .btn-hero:hover{box-shadow:inset 0 1px 0 rgba(255,232,205,0.6),inset 0 -1px 0 rgba(110,36,0,0.25),0 16px 44px -12px rgba(255,107,0,0.9)}
.paper-hero .ph-ghost{
  color:var(--ink);border:1px solid rgba(241,239,232,0.16);padding:0 27px;
  background:linear-gradient(180deg,rgba(241,239,232,0.06),rgba(241,239,232,0.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 10px 30px -14px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)
}
.paper-hero .ph-ghost:hover{border-color:rgba(255,138,51,0.6);color:#fff}

/* ---- facts sit below the horizon, the arc replaces their rule ---- */
.paper-hero .ph-facts{justify-content:center;width:100%;border-top:0;margin-top:var(--hl-gap);padding-top:0;gap:10px 40px}
.paper-hero .ph-facts li{color:#8f8a80}
.paper-hero .ph-facts b{color:#ece9e1}

/* ---- the light ---- */
.paper-hero .hl-light{
  grid-area:facts;position:absolute;inset:0;z-index:0;pointer-events:none;container-type:inline-size
}
.paper-hero .hl-light span{position:absolute;left:50%;top:var(--hl-apex);display:block}

/* the glow: a wide ellipse centred on the horizon; the planet hides its lower half */
.paper-hero .hl-glow{
  --w:min(1400px,92cqw);--h:clamp(280px,34cqw,480px);
  width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background:
    radial-gradient(46% 16% at 50% 50%,rgba(255,206,150,0.5),rgba(255,170,90,0.16) 55%,rgba(255,138,51,0) 100%),
    radial-gradient(50% 50% at 50% 50%,rgba(255,122,26,0.30) 0%,rgba(255,112,12,0.19) 24%,rgba(255,107,0,0.085) 50%,rgba(255,107,0,0.03) 74%,rgba(255,107,0,0.008) 90%,rgba(255,107,0,0) 100%);
  filter:blur(16px);transform-origin:50% 50%
}

/* the planet: a huge dark circle; its fill is the page ground, so only its lit edge reads */
.paper-hero .hl-planet,.paper-hero .hl-rim,.paper-hero .hl-sweep{
  --d:max(1500px,330cqw);
  width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);border-radius:50%
}
.paper-hero .hl-planet{
  background:
    radial-gradient(min(46cqw,760px) 110px at 50% 0,rgba(255,107,0,0.12),rgba(255,107,0,0) 100%),
    #0c0c0c;
}

/* the rim: a 1px line, white-hot in the middle, warm toward the ends, gone at both ends.
   The rim box is 64px larger than the planet so its halo has room above the edge. */
.paper-hero .hl-rim{
  --d2:calc(var(--d) + 64px);
  width:var(--d2);height:var(--d2);margin:-32px 0 0 calc(var(--d2) / -2);
  --reach:min(50cqw,980px)
}
.paper-hero .hl-rim::before,.paper-hero .hl-rim::after{content:"";position:absolute;border-radius:50%}
.paper-hero .hl-rim::before{ /* warm halo hugging the edge, both sides */
  inset:8px;
  background:radial-gradient(closest-side,rgba(255,107,0,0) calc(100% - 46px),rgba(255,122,26,0.22) calc(100% - 30px),rgba(255,150,70,0.55) calc(100% - 24px),rgba(255,122,26,0.16) calc(100% - 16px),rgba(255,107,0,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 42cqw),rgba(0,0,0,0.3) calc(50% - 28cqw),rgba(0,0,0,0.85) calc(50% - 12cqw),#000 50%,rgba(0,0,0,0.85) calc(50% + 12cqw),rgba(0,0,0,0.3) calc(50% + 28cqw),transparent calc(50% + 42cqw));
  mask-image:linear-gradient(90deg,transparent calc(50% - 42cqw),rgba(0,0,0,0.3) calc(50% - 28cqw),rgba(0,0,0,0.85) calc(50% - 12cqw),#000 50%,rgba(0,0,0,0.85) calc(50% + 12cqw),rgba(0,0,0,0.3) calc(50% + 28cqw),transparent calc(50% + 42cqw))
}
.paper-hero .hl-rim::after{ /* the hairline itself */
  inset:32px;
  box-shadow:inset 0 1px 0 0 rgba(255,246,234,0.95),inset 0 2px 0 0 rgba(255,150,70,0.35);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 45cqw),rgba(0,0,0,0.25) calc(50% - 32cqw),rgba(0,0,0,0.8) calc(50% - 15cqw),#000 50%,rgba(0,0,0,0.8) calc(50% + 15cqw),rgba(0,0,0,0.25) calc(50% + 32cqw),transparent calc(50% + 45cqw));
  mask-image:linear-gradient(90deg,transparent calc(50% - 45cqw),rgba(0,0,0,0.25) calc(50% - 32cqw),rgba(0,0,0,0.8) calc(50% - 15cqw),#000 50%,rgba(0,0,0,0.8) calc(50% + 15cqw),rgba(0,0,0,0.25) calc(50% + 32cqw),transparent calc(50% + 45cqw))
}

/* the travelling light: a soft comet that runs along the horizon from left to right, again and again.
   A wrapper the size of the planet turns about its centre, so the small glow at its top rides the curve. */
.paper-hero .hl-sweep{border-radius:0;opacity:0;transform:rotate(-19deg)}
.paper-hero .hl-sweep::before,.paper-hero .hl-sweep::after{content:"";position:absolute;left:50%;top:0}
.paper-hero .hl-sweep::before{ /* the warm bloom around it */
  --w:min(30cqw,420px);
  width:var(--w);height:72px;margin:-36px 0 0 calc(var(--w) / -2);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,236,214,0.8) 0%,rgba(255,170,90,0.46) 14%,rgba(255,122,26,0.2) 40%,rgba(255,107,0,0.06) 62%,rgba(255,107,0,0) 74%)
}
.paper-hero .hl-sweep::after{ /* the white-hot core, on the line itself */
  --w:min(15cqw,210px);
  width:var(--w);height:2px;margin:-1px 0 0 calc(var(--w) / -2);border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 50%,rgba(255,255,255,0));
  box-shadow:0 0 14px 2px rgba(255,196,140,0.75)
}

/* ---- motion: the glow blooms, the arc draws from left to right, the light travels, the words sharpen ---- */
@keyframes hl-bloom{from{opacity:0;transform:scale(0.5,0.3)}to{opacity:1;transform:none}}
@keyframes hl-draw{from{clip-path:inset(0 calc(50% + var(--reach)) 0 calc(50% - var(--reach)))}to{clip-path:inset(0 calc(50% - var(--reach)) 0 calc(50% - var(--reach)))}}
@keyframes hl-sweep{0%{transform:rotate(-19deg);opacity:0}7%{opacity:1}39%{opacity:1}48%{transform:rotate(19deg);opacity:0}100%{transform:rotate(19deg);opacity:0}}
@keyframes hl-rise{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .paper-hero .hl-glow,
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .paper-hero .hl-rim,
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .paper-hero .hl-planet{opacity:0}
  html.motion-on.si-revealed .paper-hero .hl-glow{animation:hl-bloom 1.5s var(--hl-ease) 0.25s both}
  /* only the hairline is drawn (left to right); its soft halo fades in, so no clipped edge ever shows */
  html.motion-on.si-revealed .paper-hero .hl-rim::after{animation:hl-draw 1.4s var(--hl-ease) 0.35s backwards}
  html.motion-on.si-revealed .paper-hero .hl-rim::before{animation:hl-rise 1.3s var(--hl-ease) 0.55s backwards}
  html.motion-on.si-revealed .paper-hero .hl-planet{animation:hl-rise 0.6s var(--hl-ease) 0.1s backwards}
  /* one pass every 7s (3.4s of travel, then a rest); it waits while the hero is off screen */
  html.motion-on.si-revealed .paper-hero .hl-sweep{animation:hl-sweep 7s linear 2.2s infinite}
  html.motion-on.si-revealed .paper-hero.hl-away .hl-sweep{animation-play-state:paused}

  html.motion-on .paper-hero .ph-title .swi{
    transition:transform 0.95s var(--hl-ease) var(--swd,0ms),opacity 1.1s var(--hl-ease) var(--swd,0ms),filter 1.2s var(--hl-ease) var(--swd,0ms)
  }
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .paper-hero .ph-title .swi,
  html.motion-on .paper-hero .ph-title:not(.sw-in) .swi{opacity:0;filter:blur(12px)}
}

/* ---- tablet and phone ---- */
@media (max-width:700px){
  body.paper .paper-hero{min-height:0;align-items:flex-start}
  body.paper .paper-hero .ph-sheet{padding-block:12px 28px}
  .paper-hero .ph-stage{min-height:0;padding-block:4px 0}
  .paper-hero{--hl-gap:104px;--hl-apex:46px}
  .paper-hero .live-badge{margin-bottom:14px;max-width:calc(100% - 12px)}
  .paper-hero .ph-title{font-size:1.2rem;margin-top:14px}
  .paper-hero .ph-title .ph-line:nth-child(1){font-size:clamp(2.3rem,10.6vw,3.2rem);line-height:1.05}
  .paper-hero .ph-title .ph-line:nth-child(1){background-size:100% 1.05em}
  .paper-hero .ph-title .ph-line:nth-child(n+2){display:block}
  .paper-hero .ph-sub{font-size:1rem;line-height:1.55;margin-top:14px}
  .paper-hero .ph-facts{gap:10px 26px}
  .paper-hero .ph-ctas{gap:10px 8px;margin-top:20px}
  .paper-hero .btn-hero{padding:14px 16px}
  .paper-hero .ph-ghost{padding:0 16px}
  .paper-hero .hl-glow{--w:100cqw;--h:340px}
  .paper-hero .hl-planet,.paper-hero .hl-rim,.paper-hero .hl-sweep{--d:max(1300px,330cqw)}
  .paper-hero .hl-rim{--reach:60cqw}
}

/* phones: the robots (hero-bots.js, owner's choice 6 Oct 2026) stand in a row between the headline and the intro;
   the room for it exists only when scripts run (preloader.js sets one of these classes before the first paint),
   so there is never an empty gap and no shift */
@media (max-width:700px){html:is(.si-intro,.si-quick,.si-skip) .paper-hero .ph-sub{margin-top:96px}}

/* ---- print / save as PDF: backgrounds are dropped, so the headline takes solid colours ---- */
@media print{
  .paper-hero .ph-title .ph-line:nth-child(1),
  .paper-hero .ph-title .ph-line:nth-child(1) .swi,
  .paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai,
  .paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai .swi{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
  .paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai,
  .paper-hero .ph-title .ph-line:nth-child(1) .hl-dubai .swi{color:var(--orange)}
  .paper-hero .hl-light{display:none}
}