/* ==========================================================================
   Gate pages: under construction and login.
   Standalone pages (no site header or footer) drawn in the site's own frame:
   rail, 2px grid lines, square cells, outlined numerals, Hamra red.
   ========================================================================== */

:root{
  --bg:#190f20;--fg:#f3f3f3;--accent:#e60032;--muted:#c9b9d6;--line:#331f40;--star:#e60032;
  --input:#211428;--pattern-ink:#22142b;--sidebar:54px;
}
:root.light{
  --bg:#f3f3f3;--fg:#4c2e60;--muted:#6a4a82;--line:#4c2e60;--star:#4c2e60;
  --input:#e9e6ec;--pattern-ink:#ebeaed;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);color:var(--fg);zoom:1.25}
body{
  font-family:var(--font-site);-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.35;min-height:calc(100vh / 1.25);
  position:relative;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:#e60032;color:#fff}

/* faint flag pattern, as in the footer */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:var(--pattern-ink);
  -webkit-mask:url("../vector/hamra_pattern.svg?v=2") center/170px repeat;
  mask:url("../vector/hamra_pattern.svg?v=2") center/170px repeat;
}

/* ---------- frame ---------- */
.gate{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:calc(100vh / 1.25);
}
.gate__rail{
  display:flex;flex-direction:column;
  border-inline-end:2px solid var(--line);background:var(--bg);
}
.gate__star{
  height:var(--sidebar);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-bottom:2px solid var(--line);background:transparent;cursor:pointer;
}
.gate__star svg{width:22px;height:22px;fill:var(--star);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gate__star:hover svg{transform:rotate(72deg)}
.gate__rail-label{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:20px 0;overflow:hidden}
.gate__rail-label span{
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--muted);
}

.gate__main{display:flex;flex-direction:column;min-width:0;min-height:calc(100vh / 1.25)}

/* top bar: logo cell, then square cells */
.gate__top{
  display:flex;align-items:stretch;min-height:var(--sidebar);
  border-bottom:2px solid var(--line);background:var(--bg);
}
.gate__logo{display:flex;align-items:center;min-width:0;flex:0 1 auto;padding:0 24px;border-inline-end:2px solid var(--line)}
.gate__logo img{height:30px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:none}
[dir="rtl"] .gate__logo img{object-position:right center}
html:not(.light) .gate__logo .is-dark,
html.light .gate__logo .is-light{display:block}
.gate__spacer{flex:1}
.gate__cell{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;
  border-inline-start:2px solid var(--line);
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.gate__cell:hover,.gate__cell:focus-visible{background:var(--accent);color:#fff;outline:none}
.gate__cell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
[dir="rtl"] .gate__cell .gate__arrow{transform:scaleX(-1)}

/* label row: red square + small caps, as in the menu head */
.gate__label{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
}
.gate__label::before{content:"";width:8px;height:8px;background:var(--accent);flex:0 0 auto}
.gate__label span{color:var(--muted);margin-inline-start:auto;font-variant-numeric:tabular-nums}

/* big uppercase titles, like the menu rows */
.gate__title{
  font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.005em;
  font-size:clamp(40px,11.4cqw,92px);
}
.gate__title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--accent)}
.gate__text{font-size:18px;line-height:1.6;color:var(--muted);max-width:56ch}
.gate__text p + p{margin-top:10px}

/* bottom strip: square social cells, then text, then the TV cell */
.gate__bottom{
  display:flex;align-items:stretch;min-height:var(--sidebar);
  border-top:2px solid var(--line);background:var(--bg);
}
.gate__social{display:flex}
.gate__social a{
  width:var(--sidebar);display:flex;align-items:center;justify-content:center;
  border-inline-end:2px solid var(--line);transition:background .2s ease,color .2s ease;
}
.gate__social a:hover,.gate__social a:focus-visible{background:var(--accent);color:#fff;outline:none}
.gate__social svg{width:18px;height:18px;fill:currentColor}
.gate__copy{display:flex;align-items:center;padding:0 24px;font-size:13px;color:var(--muted)}

/* hazard stripe: the one moving thing on the page */
.gate__stripe{
  height:10px;flex:0 0 auto;border-bottom:2px solid var(--line);
  background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,transparent 12px 24px);
  background-size:34px 34px;animation:gate-stripe 1.6s linear infinite;
}
@keyframes gate-stripe{to{background-position:34px 0}}

/* entrance: rows rise in one after another */
.gate [data-rise]{opacity:0;transform:translateY(14px);animation:gate-rise .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
@keyframes gate-rise{to{opacity:1;transform:none}}

/* ==========================================================================
   UNDER CONSTRUCTION
   ========================================================================== */
.uc__body{flex:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.uc__content{display:flex;flex-direction:column;border-inline-end:2px solid var(--line);background:var(--bg)}
.uc__intro{padding:40px 48px 44px;display:flex;flex-direction:column;gap:26px;container-type:inline-size}
.uc__intro .gate__title{margin-top:6px}

/* about Dar Alhamra, and what the site will offer */
.uc__about{border-top:2px solid var(--line);display:grid;grid-template-columns:1fr 1fr;flex:1}
.uc__block{display:flex;flex-direction:column}
.uc__block + .uc__block{border-inline-start:2px solid var(--line)}
.uc__block-head{padding:14px 28px;border-bottom:2px solid var(--line)}
.uc__block-text{padding:22px 28px 28px;font-size:15px;line-height:1.65;color:var(--muted)}

/* aside: the menu map and the site statement */
.uc__aside{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;background:var(--bg)}
.uc__map{position:absolute;inset:0;pointer-events:none}
.uc__map svg{position:absolute;inset:6% 6% 22%;width:88%;height:72%}
.uc__map .st1{animation:gate-glow 3s ease-in-out infinite}
@keyframes gate-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(230,0,50,.4))}50%{filter:drop-shadow(0 0 10px rgba(230,0,50,.7))}}
.uc__statement{
  position:relative;padding:18px 28px;border-top:2px solid var(--line);background:var(--bg);
  font-size:14px;font-weight:500;line-height:1.55;color:var(--muted);
}

/* Hamra TV, opened from the bottom strip */
.uc__tv{
  margin-inline-start:auto;display:flex;align-items:center;gap:12px;padding:0 24px;
  border:0;border-inline-start:2px solid var(--line);background:transparent;cursor:pointer;
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.uc__tv i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.uc__tv.is-live{background:var(--accent);color:#fff}
.uc__tv.is-live i{background:#fff;animation:gate-blink 1.6s ease-in-out infinite}
.uc__tv:hover,.uc__tv:focus-visible{background:var(--accent);color:#fff;outline:none}
.uc__tv[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
@keyframes gate-blink{50%{opacity:.25}}

.uc__screen{position:absolute;inset:0;z-index:3;background:#0b070e;display:none}
.uc__aside.is-tv .uc__screen{display:block}
.uc__aside.is-tv .uc__statement{display:none}
.uc__screen .tv-player{position:absolute;inset:0}
.uc__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b070e}
.uc__screen-msg{
  position:absolute;inset:auto 0 0;z-index:5;padding:12px 16px;
  font-size:12px;color:#c9b9d6;background:rgba(11,7,14,.9);border-top:2px solid #331f40;
}
.uc__screen-msg[hidden]{display:none}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.login__panel{display:flex;flex-direction:column;border-inline-end:2px solid var(--line);background:var(--bg)}
.login__head{padding:14px 48px;border-bottom:2px solid var(--line)}
.login__inner{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:44px 48px;max-width:560px;width:100%;container-type:inline-size}
.login__intro{font-size:16px;line-height:1.55;color:var(--muted)}
.login__form{display:flex;flex-direction:column;gap:0;border:2px solid var(--line)}
.login__field{display:flex;flex-direction:column;border-bottom:2px solid var(--line);transition:background .2s ease}
.login__field:focus-within{background:var(--input)}
.login__field label{
  display:flex;align-items:center;gap:12px;padding:12px 16px 0;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.login__field label b{
  font-weight:900;font-size:13px;color:transparent;-webkit-text-stroke:1px var(--accent);letter-spacing:0;
}
.login__field input{
  width:100%;padding:8px 16px 14px;border:0;background:transparent;color:var(--fg);
  font:inherit;font-size:18px;font-weight:500;outline:none;
}
.login__field:focus-within label{color:var(--accent)}
.login__field:focus-within{box-shadow:inset 4px 0 0 var(--accent)}
[dir="rtl"] .login__field:focus-within{box-shadow:inset -4px 0 0 var(--accent)}
.login__submit{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border:0;background:var(--accent);color:#fff;cursor:pointer;
  font-size:15px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease;
}
.login__submit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s ease}
.login__submit:hover svg,.login__submit:focus-visible svg{transform:translateX(5px)}
[dir="rtl"] .login__submit svg{transform:scaleX(-1)}
[dir="rtl"] .login__submit:hover svg{transform:scaleX(-1) translateX(5px)}
.login__submit:hover,.login__submit:focus-visible{background:#c4002a;outline:none}

.login__message{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--line);font-size:14px;line-height:1.5}
.login__message::before{content:"";width:8px;height:8px;margin-top:6px;flex:0 0 auto;background:var(--muted)}
.login__message--error{border-color:var(--accent);color:var(--fg)}
.login__message--error::before{background:var(--accent)}
.login__signed{display:flex;flex-direction:column;gap:14px}

.login__picture{position:relative;overflow:hidden;background:var(--line);min-height:300px}
.login__picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.login__picture::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(25,15,32,.75),transparent 40%);
}
.login__caption{
  position:absolute;inset:auto 0 0;z-index:1;display:flex;align-items:stretch;
  border-top:2px solid var(--line);background:var(--bg);
}
.login__caption span{display:flex;align-items:center;padding:12px 20px;font-size:13px;color:var(--muted)}
.login__caption strong{
  display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--accent);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- under construction: the presentation (assets/js/uc-sequence.js) ---------- */
/* hidden states apply only while the sequence plays; no JS or reduced motion shows everything */
html.uc-play .uc [data-seq]{opacity:0}
html.uc-play .uc [data-seq].is-in{opacity:1}

/* panels are laid out: dropping in from the top edge, or wiped in from the start edge */
html.uc-play .uc [data-seq="drop"]{clip-path:inset(0 0 100% 0);opacity:1}
html.uc-play .uc [data-seq="drop"].is-in{clip-path:inset(0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
html.uc-play .uc [data-seq="wipe"]{clip-path:inset(0 100% 0 0);opacity:1}
html.uc-play[dir="rtl"] .uc [data-seq="wipe"]{clip-path:inset(0 0 0 100%)}
html.uc-play .uc [data-seq="wipe"].is-in{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.77,0,.18,1)}

/* rows rise */
html.uc-play .uc [data-seq="rise"]{transform:translateY(18px)}
html.uc-play .uc [data-seq="rise"].is-in{transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}

/* cells pop */
html.uc-play .uc [data-seq="pop"]{transform:scale(.6)}
html.uc-play .uc [data-seq="pop"].is-in{transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}

/* the title lands like a rubber stamp, in red ink that dries to the page colour */
html.uc-play .uc [data-seq="stamp"].is-in{animation:uc-stamp .55s cubic-bezier(.2,.9,.3,1.2) both,uc-ink 1.6s ease .2s both}
@keyframes uc-stamp{
  0%{opacity:0;transform:scale(1.9) rotate(-7deg);filter:blur(4px)}
  55%{opacity:1;transform:scale(.97) rotate(-1.5deg);filter:none}
  75%{transform:scale(1.015) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
@keyframes uc-ink{0%,35%{color:var(--accent)}100%{color:var(--fg)}}
.gate__title{transform-origin:left center}
[dir="rtl"] .gate__title{transform-origin:right center}
/* the page jolts slightly when the stamp lands */
html.uc-play .uc .uc__content:has([data-seq="stamp"].is-in){animation:uc-jolt .35s ease .18s}
@keyframes uc-jolt{30%{transform:translateY(3px)}60%{transform:translateY(-1px)}100%{transform:none}}

/* typed message: the cursor */
.uc__cursor{display:inline-block;width:.55em;height:1.05em;margin-inline-start:2px;vertical-align:-.15em;background:var(--accent);animation:uc-caret .8s steps(1) infinite}
.uc__cursor.is-done{animation:uc-caret-out .5s ease forwards}
@keyframes uc-caret{50%{opacity:0}}
@keyframes uc-caret-out{to{opacity:0;width:0;margin:0}}

/* the map: borders fade in behind the red outline being drawn */
html.uc-play .uc .uc__map .st0,html.uc-play .uc .uc__map .st2{opacity:0;transition:opacity 1.8s ease .6s}
html.uc-play .uc .uc__map svg.is-drawing .st0,html.uc-play .uc .uc__map svg.is-drawing .st2{opacity:1}
html.uc-play .uc .uc__map .st1{animation:none}
html.uc-done .uc .uc__map .st1{animation:gate-glow 3s ease-in-out infinite}

/* the stripe only starts moving once it is laid down */
html.uc-play .uc .gate__stripe{animation-play-state:paused}
html.uc-play .uc .gate__stripe.is-in{animation-play-state:running}

/* the flags in the background drift, one tile per minute */
.uc::before{animation:uc-drift 60s linear infinite}
@keyframes uc-drift{to{-webkit-mask-position:calc(50% + 170px) calc(50% + 105px);mask-position:calc(50% + 170px) calc(50% + 105px)}}

/* Hamra TV live: a ring keeps pulsing out of the dot */
.uc__tv i{position:relative}
.uc__tv.is-live i::after{content:"";position:absolute;inset:-5px;border:2px solid #fff;border-radius:50%;animation:uc-ring 1.8s ease-out infinite}
@keyframes uc-ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* ---------- Arabic ---------- */
html[lang="ar"] .gate__title{text-transform:none;font-weight:800;line-height:1.15;letter-spacing:0;font-size:clamp(38px,12cqw,80px)}
html[lang="ar"] .gate__label,
html[lang="ar"] .gate__cell,
html[lang="ar"] .gate__rail-label span,
html[lang="ar"] .uc__tv,
html[lang="ar"] .login__field label,
html[lang="ar"] .login__submit,
html[lang="ar"] .login__caption strong{letter-spacing:0;font-size:14px}
html[lang="ar"] .gate__text,html[lang="ar"] .login__intro,html[lang="ar"] .uc__block-text{line-height:1.8}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .uc__body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .uc__content{border-inline-end:0}
  .uc__aside{min-height:0;border-top:2px solid var(--line)}
  .uc__aside:not(.is-tv) .uc__map{position:relative;inset:auto;height:min(64vw,420px)}
  .uc__aside:not(.is-tv) .uc__map svg{inset:8% 10%;width:80%;height:84%}
  .uc__aside.is-tv{aspect-ratio:16/9}
  .login__body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login__picture{order:-1;min-height:0;height:calc(32vh / 1.25);border-bottom:2px solid var(--line)}
  .login__panel{border-inline-end:0}
  .login__inner{max-width:none}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  html{zoom:1}
  body,.gate,.gate__main{min-height:100vh}
  .gate{grid-template-columns:1fr}
  .gate__rail{display:none}
  .gate__logo{padding:0 16px}
  .gate__logo img{height:auto;max-height:26px}
  .gate__top .gate__spacer{display:none}
  .gate__logo{flex:1 1 auto;border-inline-end:0}
  .gate__cell{flex:0 0 auto}
  .gate__cell{padding:0 14px;font-size:12px}
  .gate__cell .gate__cell-text{display:none}
  .gate__cell .gate__cell-text.is-keep{display:inline}
  .uc__intro{padding:28px 20px 30px;gap:20px}
  .gate__text{font-size:16px}
  .login__head{padding:12px 20px}
  .uc__about{grid-template-columns:1fr}
  .uc__block + .uc__block{border-inline-start:0;border-top:2px solid var(--line)}
  .uc__block-head{padding:12px 20px}
  .uc__block-text{padding:18px 20px 22px}
  .gate__bottom{flex-wrap:wrap}
  .gate__copy{order:3;width:100%;padding:12px 20px;border-top:2px solid var(--line)}
  .uc__tv{padding:0 16px}
  .login__picture{height:22vh}
  .login__inner{padding:28px 20px 36px;gap:22px}
  .login__caption span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gate__stripe,.uc__map .st1,.uc__tv i,.uc::before,.uc__tv.is-live i::after,.uc__cursor{animation:none}
  .gate [data-rise]{animation:none;opacity:1;transform:none}
}