/* ==========================================================================
   pms.theorionhotels.com — colour and motion, layered over asar.css.
   A separate file on purpose: asar.css is symlinked into cloud.theorionhotels.com,
   so anything added there changes the other site too. Only the seven pms pages
   load this one.
   Every animation stops under prefers-reduced-motion, and nothing is hidden
   unless site.js/lively.js has run (html.lv), so a page without JS is complete.
   ========================================================================== */

:root{
  --teal:#14B8A6; --sky:#38BDF8; --violet:#8B7CF6; --coral:#F47C6C;
  --amber:#F5B544; --mint:#4ADE9B; --rose:#F472B6;
  --grad:linear-gradient(100deg,var(--amber) 0%,var(--coral) 35%,var(--rose) 60%,var(--violet) 100%);
  --grad-cool:linear-gradient(120deg,var(--teal),var(--sky) 55%,var(--violet));
}

/* ---------- the hero: an aurora instead of a dimmed photograph ---------- */
.hero.lv-hero{background:#0A222A;isolation:isolate}
.lv-hero .aurora{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.8;pointer-events:none}
.lv-hero .aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.lv-hero .aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:8%;background:radial-gradient(circle,#0FA39A 0,transparent 66%);animation:drift1 22s ease-in-out infinite alternate}
.lv-hero .aurora i:nth-child(2){width:40vw;height:40vw;right:2%;top:-4%;background:radial-gradient(circle,#6B5CE7 0,transparent 66%);animation:drift2 26s ease-in-out infinite alternate}
.lv-hero .aurora i:nth-child(3){width:34vw;height:34vw;right:22%;bottom:-2%;background:radial-gradient(circle,#E8655A 0,transparent 66%);animation:drift3 30s ease-in-out infinite alternate;opacity:.75}
.lv-hero .aurora i:nth-child(4){width:26vw;height:26vw;left:30%;bottom:10%;background:radial-gradient(circle,#E9A23B 0,transparent 66%);animation:drift1 34s ease-in-out infinite alternate-reverse;opacity:.55}
@keyframes drift1{to{transform:translate(9vw,6vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-8vw,10vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-6vw,-8vh) scale(1.2)}}
.lv-hero .gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 70%)}
.lv-hero .wrap{z-index:2}
.lv-hero h1 em{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:shimmer 8s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.lv-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#E6F0F2;letter-spacing:.12em}
.lv-hero .eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(74,222,155,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,155,0)}100%{box-shadow:0 0 0 0 rgba(74,222,155,0)}}
.lv-hero .lede{color:#D3E2E6}
.btn-glow{background:var(--grad);background-size:160% auto;color:#1B1030;border:0;font-weight:700;
  box-shadow:0 10px 30px rgba(244,124,108,.35);transition:background-position .5s,transform .16s,box-shadow .16s}
.btn-glow:hover{background-position:100% center;transform:translateY(-2px);box-shadow:0 14px 38px rgba(139,124,246,.45)}

/* ---------- the live chart drawn in the hero --------------------------- */
.lv-stage{position:relative;max-width:620px;margin:0 auto;width:100%}
.lv-board{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.lv-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.lv-top .dots{display:flex;gap:6px}
.lv-top .dots i{width:9px;height:9px;border-radius:50%;background:#FF6B6B}
.lv-top .dots i:nth-child(2){background:#FFC24B}.lv-top .dots i:nth-child(3){background:#3DD68C}
.lv-top b{font-size:.78rem;color:#fff;font-weight:600;margin-left:4px}
.lv-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;color:var(--mint);text-transform:uppercase}
.lv-top .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 2s infinite}
.lv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}
.lv-kpis div{background:rgba(10,34,42,.55);padding:10px 14px}
.lv-kpis small{display:block;font-size:.62rem;color:#9FB6BF;letter-spacing:.06em;text-transform:uppercase}
.lv-kpis b{font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums}
.lv-kpis b.up{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-grid{display:grid;grid-template-columns:42px repeat(10,1fr);font-size:.6rem;font-variant-numeric:tabular-nums;position:relative}
.lv-grid .hd{padding:6px 0;text-align:center;color:#8FA8B1;border-bottom:1px solid rgba(255,255,255,.08)}
.lv-grid .hd.today{color:#fff;font-weight:700;background:rgba(245,181,68,.16)}
.lv-grid .rm{padding:0 8px;line-height:30px;color:#B9CBD1;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06)}
.lv-grid .ln{grid-column:2/-1;position:relative;height:30px;border-bottom:1px solid rgba(255,255,255,.06);
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:10% 100%}
.lv-bar{position:absolute;top:4px;height:22px;border-radius:6px;padding:0 7px;line-height:22px;font-size:.62rem;font-weight:700;
  color:#0B1E24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);animation:lvdraw .7s cubic-bezier(.2,.8,.2,1) backwards}
.lv-bar.c-in{background:linear-gradient(90deg,#3DD68C,#7BE6B4)}
.lv-bar.c-due{background:linear-gradient(90deg,#38BDF8,#7DD3FC)}
.lv-bar.c-ota{background:linear-gradient(90deg,#8B7CF6,#B3A8FA);color:#140F33}
.lv-bar.c-grp{background:linear-gradient(90deg,#F5B544,#F9CF7E)}
.lv-bar.c-corp{background:linear-gradient(90deg,#F47C6C,#F8A699)}
.lv-bar.c-ooo{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 5px,rgba(255,255,255,.16) 5px 10px);color:#B9CBD1;box-shadow:none}
.lv-bar.new{animation:lvdrop .8s cubic-bezier(.2,1.4,.4,1) backwards;outline:2px solid #fff;outline-offset:1px}
@keyframes lvdraw{from{transform:scaleX(.02);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes lvdrop{0%{transform:translateY(-26px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.lv-key{display:flex;gap:12px;flex-wrap:wrap;padding:10px 14px;font-size:.62rem;color:#9FB6BF;border-top:1px solid rgba(255,255,255,.1)}
.lv-key i{display:inline-block;width:10px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* floating event chips around the board */
.lv-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;
  background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.3);font-size:.74rem;line-height:1.35;
  animation:bob 6s ease-in-out infinite;max-width:230px}
.lv-chip b{display:block;font-size:.76rem}
.lv-chip small{color:var(--muted);font-size:.68rem}
.lv-chip .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.lv-chip .ic svg{width:16px;height:16px}
.lv-chip.a{display:none}
.lv-chip.b{right:-56px;top:58%;animation-delay:-2s}
.lv-chip.c{left:-44px;bottom:-64px;animation-delay:-4s}
.lv-chip.d{right:-30px;top:-46px;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-9px)}}
.lv-toast{position:absolute;left:50%;bottom:44px;z-index:4;transform:translate(-50%,-12px);opacity:0;pointer-events:none;
  background:#0B1E24;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;font-size:.7rem;
  white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:opacity .35s,transform .35s}
.lv-toast.on{opacity:1;transform:translate(-50%,0)}
.lv-toast b{color:var(--amber)}
.hero .fig button.lv-real{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:14px auto 0;font-size:.8rem;color:#CFE0E5;
  border-bottom:1px dashed rgba(255,255,255,.35)}
.hero .fig button.lv-real:hover{color:#fff}
.hero .fig button.lv-real:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.lv-real img,.lv-real picture,.lv-real .chrome,.lv-real .note{display:none!important}
.lv-under{text-align:right;max-width:620px;margin:0 auto}
@media (min-width:900px){.lv-stage{margin-top:30px}}
@media (max-width:899px){
  .lv-chip{display:none!important}
  .lv-grid{grid-template-columns:34px repeat(10,1fr)}
  .lv-bar{font-size:.55rem;padding:0 4px}
}
@media (max-width:480px){.lv-grid .hd:nth-child(n){font-size:.52rem}.lv-kpis b{font-size:.92rem}}

/* ---------- stat strip: colour and a count ------------------------------ */
.strip.lv-strip{background:#0D2C35;position:relative;overflow:hidden}
.lv-strip::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.lv-strip .stat b{font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-strip .stat:nth-child(2) b{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text}
.lv-strip .stat:nth-child(4) b{background:linear-gradient(100deg,var(--mint),var(--teal));-webkit-background-clip:text;background-clip:text}
@media (min-width:900px){.lv-strip .stat b{font-size:2.6rem}}

/* trust bar: each promise its own colour */
.trust span:nth-child(6n+1) svg{color:var(--teal)}
.trust span:nth-child(6n+2) svg{color:var(--coral)}
.trust span:nth-child(6n+3) svg{color:var(--violet)}
.trust span:nth-child(6n+4) svg{color:var(--amber)}
.trust span:nth-child(6n+5) svg{color:var(--sky)}
.trust span:nth-child(6n+6) svg{color:var(--rose)}

/* ---------- cards: an accent each, a lift on hover ---------------------- */
.card{position:relative;transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(12,39,47,.14);border-color:transparent}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:var(--accent-grad,var(--grad));opacity:0;transition:opacity .22s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::after{opacity:1}
.grid > .card:nth-child(6n+1){--ac:var(--teal);--accent-grad:linear-gradient(135deg,var(--teal),var(--sky))}
.grid > .card:nth-child(6n+2){--ac:var(--coral);--accent-grad:linear-gradient(135deg,var(--coral),var(--amber))}
.grid > .card:nth-child(6n+3){--ac:var(--violet);--accent-grad:linear-gradient(135deg,var(--violet),var(--rose))}
.grid > .card:nth-child(6n+4){--ac:var(--amber);--accent-grad:linear-gradient(135deg,var(--amber),var(--coral))}
.grid > .card:nth-child(6n+5){--ac:var(--sky);--accent-grad:linear-gradient(135deg,var(--sky),var(--violet))}
.grid > .card:nth-child(6n+6){--ac:var(--rose);--accent-grad:linear-gradient(135deg,var(--rose),var(--violet))}
.grid > .card .mark{background:var(--accent-grad,var(--tan-bg));color:#fff;box-shadow:0 8px 20px -6px var(--ac,transparent)}
.dark .grid > .card .mark{color:#fff}
.dark .card:hover{box-shadow:0 22px 50px rgba(0,0,0,.35)}

/* ---------- sections: colour washes instead of flat grey ---------------- */
.eyebrow{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
.dark .eyebrow,.lv-hero .eyebrow{background:none;-webkit-background-clip:border-box;background-clip:border-box}
.dark .eyebrow{color:var(--amber)}
section.alt{background:
  radial-gradient(60% 50% at 0% 0%,rgba(20,184,166,.08),transparent 70%),
  radial-gradient(50% 50% at 100% 100%,rgba(139,124,246,.08),transparent 70%),var(--bg-2)}
section.dark{position:relative;overflow:hidden;background:
  radial-gradient(50% 60% at 100% 0%,rgba(107,92,231,.30),transparent 70%),
  radial-gradient(45% 55% at 0% 100%,rgba(15,163,154,.26),transparent 70%),var(--navy)}
.notice{border-left:0;position:relative;background:linear-gradient(90deg,rgba(245,181,68,.10),rgba(139,124,246,.06) 70%,transparent)}
.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:var(--grad)}
.checks svg{color:var(--teal)}

/* the closing band */
.band{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(40% 80% at 15% 20%,rgba(15,163,154,.55),transparent 70%),
             radial-gradient(40% 80% at 85% 80%,rgba(232,101,90,.5),transparent 70%),
             radial-gradient(35% 70% at 60% 10%,rgba(107,92,231,.55),transparent 70%),#0A222A;
  background-size:140% 140%;animation:bandmove 16s ease-in-out infinite alternate}
@keyframes bandmove{to{background-position:100% 100%}}
.band .btn-tan{background:#fff;color:var(--navy)}
.band .btn-tan:hover{background:var(--amber)}

/* inner page headers get the same light */
.phead{position:relative;overflow:hidden;background:
  radial-gradient(45% 80% at 90% 0%,rgba(139,124,246,.16),transparent 70%),
  radial-gradient(40% 70% at 0% 100%,rgba(20,184,166,.14),transparent 70%),
  linear-gradient(180deg,#fff,var(--bg-2))}
.phead h1{background:linear-gradient(100deg,var(--navy) 40%,#3B4FA0 75%,#8B3F7A);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- scroll reveal (only once lively.js has marked the page) ----- */
html.lv .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.lv .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .lv-hero .aurora i,.lv-hero h1 em,.lv-chip,.band,.lv-bar,.lv-bar.new,.lv-top .live::before,.lv-hero .eyebrow .pulse{animation:none!important}
  html.lv .rv{opacity:1;transform:none;transition:none}
  .card:hover{transform:none}
}