/* ===========================================================
   AL ASSAF FOOTBALL ACADEMY — "coming soon" landing page
   Palette taken from the academy's printed collateral:
   ink #050C2B · deep #0E266C · mid #0F4AA8 · bright #1E6BE0
   logo navy #2C2A7D · chalk #EFF3FB
   =========================================================== */

:root{
  --ink:#050C2B;
  --deep:#0E266C;
  --mid:#0F4AA8;
  --bright:#1E6BE0;
  --navy:#2C2A7D;
  --chalk:#EFF3FB;
  --muted:rgba(239,243,251,.62);
  --line:rgba(239,243,251,.16);
  --pad:clamp(20px,5vw,64px);
  box-sizing:border-box;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  background-image:linear-gradient(178deg,#050C2B 0%,#071238 60%,#050C2B 100%);
  color:var(--chalk);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;flex-direction:column;
}

/* =========================================================
   BANNER
   Full-bleed strip at the top, built like the printed panel:
   blue field, fine diagonal lines, oversized outlined wordmark,
   players standing on one baseline, dissolving into the page.
   ========================================================= */
.banner{
  position:relative;
  padding-top:env(safe-area-inset-top,0px);
  background:
    radial-gradient(75% 130% at 68% 88%, rgba(30,107,224,.62) 0%, rgba(30,107,224,0) 62%),
    radial-gradient(60% 110% at 12% 20%, rgba(15,74,168,.68) 0%, rgba(15,74,168,0) 66%),
    linear-gradient(158deg,#0E266C 0%,#0F4AA8 46%,#0A1C55 100%);
  overflow:hidden;
}
/* diagonal line texture */
.banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(112deg,
    rgba(239,243,251,.075) 0px,
    rgba(239,243,251,.075) 1px,
    transparent 1px,
    transparent 14px);
}
/* dissolve into the page below */
.banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  pointer-events:none;z-index:4;
  background:linear-gradient(to bottom,rgba(5,12,43,0) 0%,rgba(5,12,43,.55) 58%,var(--ink) 100%);
}

.banner-inner{
  position:relative;max-width:1240px;margin:0 auto;padding:0 var(--pad);
  min-height:clamp(520px,80vh,740px);
  display:flex;flex-direction:column;
}

/* masthead sits on the banner */
.mast{position:relative;z-index:5;display:flex;align-items:center;gap:14px;
  padding-top:clamp(18px,3.4vw,30px)}
.mast img{height:clamp(38px,4.4vw,52px);width:auto;display:block}
.mast .nm{font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:clamp(16px,2vw,20px);letter-spacing:.11em;text-transform:uppercase;line-height:1.12}
.mast .sub{font-size:clamp(9.5px,1.1vw,11px);letter-spacing:.21em;color:rgba(239,243,251,.72);
  text-transform:uppercase;font-weight:500}

/* oversized outlined wordmark, low and behind everything */
.ghost{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  left:var(--pad);bottom:4%;
  font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(5rem,15vw,13rem);letter-spacing:.005em;line-height:.78;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.6px rgba(239,243,251,.16);
}

/* headline block, left half */
.say{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;
  justify-content:center;max-width:min(40%,460px);
  padding:clamp(20px,3vw,34px) 0 clamp(34px,5vw,60px)}

/* players — one lineup on a single baseline, all at matching
   human scale and full strength. The girl's frame is a leaning
   dribble, so her image height is set lower than the others to
   make her body read the same size as theirs. */
.lineup{position:absolute;right:0;bottom:0;z-index:3;
  width:min(76%,900px);height:100%;pointer-events:none}
.lineup .fig{position:absolute;bottom:0;width:auto;display:block;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.48))}
.fig-back{--o:1;height:97%;left:0;z-index:1}
.fig-girl{--o:1;height:78%;left:11%;z-index:2}
.fig-main{--o:1;height:100%;right:-3%;z-index:3}

/* =========================================================
   CONTENT
   ========================================================= */
.wrap{
  position:relative;z-index:2;
  max-width:1240px;width:100%;margin:0 auto;
  padding:clamp(30px,4.5vw,54px) var(--pad) 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex;flex-direction:column;
}

.cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,56px);align-items:start}


h1{font-family:"Saira Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(3.2rem,8.6vw,6.4rem);line-height:.84;letter-spacing:-.004em;
  margin:0 0 18px;text-wrap:balance}

.tag{font-family:"Saira Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(.98rem,1.9vw,1.24rem);letter-spacing:.13em;color:#8FB6F5;margin:0 0 22px}

.rule{width:84px;height:3px;background:var(--chalk);margin:0 0 22px;border-radius:2px}

.lede{font-size:clamp(1rem,1.7vw,1.1rem);max-width:42ch;margin:0;font-weight:500}
.sub2{font-size:.93rem;max-width:46ch;color:var(--muted);margin:0 0 16px}

/* enquiry */
.notify{border:1px solid var(--line);border-radius:12px;padding:clamp(18px,2.4vw,24px);
  background:rgba(239,243,251,.035);margin-bottom:22px}
.notify h2{font-size:.96rem;font-weight:700;margin:0 0 4px}
.notify p{font-size:.85rem;color:var(--muted);margin:0 0 15px}
.fields{display:flex;flex-wrap:wrap;gap:10px}

input{flex:1 1 150px;min-width:0;background:rgba(239,243,251,.08);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  color:var(--chalk);font-family:inherit;font-size:.92rem}
input::placeholder{color:rgba(239,243,251,.44)}
input:focus-visible{outline:2px solid var(--chalk);outline-offset:1px;
  background:rgba(239,243,251,.13)}

button{flex:0 0 auto;background:var(--chalk);color:var(--navy);border:0;border-radius:8px;
  padding:12px 24px;font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease}
button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.34)}
button:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.said{font-size:.84rem;color:#8FB6F5;margin:11px 0 0;min-height:1.2em}

/* contact */
.contact{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.contact a{display:flex;align-items:center;gap:10px;color:var(--chalk);
  text-decoration:none;font-size:.94rem;font-weight:500;padding:4px 0;
  border-bottom:1px solid transparent;transition:border-color .16s ease}
.contact a:hover{border-bottom-color:var(--chalk)}
.contact a:focus-visible{outline:2px solid var(--chalk);outline-offset:3px;border-radius:3px}
.contact svg{flex:0 0 auto;stroke:#8FB6F5;fill:none;stroke-width:1.7;width:17px;height:17px}

/* footer */
footer{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,48px);
  padding:18px 0 clamp(22px,3.4vw,32px);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.lic{font-size:.79rem;color:var(--muted);max-width:56ch;margin:0}
.social{display:flex;gap:8px}
.social a{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;
  display:grid;place-items:center;color:var(--chalk);
  transition:border-color .16s ease,background .16s ease}
.social a:hover{border-color:var(--chalk);background:rgba(239,243,251,.09)}
.social a:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}
.social svg{width:17px;height:17px;fill:currentColor}

/* =========================================================
   PAGE-LOAD REVEAL — one sequence, front to back
   ========================================================= */
@keyframes fig{from{opacity:0;transform:translateY(16px)}to{opacity:var(--o);transform:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fig-main{animation:fig .9s cubic-bezier(.22,.7,.3,1) .10s both}
.fig-girl{animation:fig .9s cubic-bezier(.22,.7,.3,1) .24s both}
.fig-back{animation:fig .9s cubic-bezier(.22,.7,.3,1) .36s both}
.mast,.ghost{animation:up .7s cubic-bezier(.22,.7,.3,1) .04s both}
.say{animation:up .7s cubic-bezier(.22,.7,.3,1) .18s both}
.act{animation:up .7s cubic-bezier(.22,.7,.3,1) .42s both}
footer{animation:up .7s cubic-bezier(.22,.7,.3,1) .52s both}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .banner-inner{min-height:0;padding-bottom:0}
  .say{max-width:none;padding:clamp(18px,4vw,28px) 0 clamp(14px,3vw,22px)}
  .lineup{position:relative;right:auto;bottom:auto;width:100%;
    height:clamp(280px,46vw,380px);margin:0 calc(var(--pad) * -1);
    width:calc(100% + var(--pad) * 2)}
  .fig-back{height:94%;left:0}
  .fig-girl{height:74%;left:9%}
  .fig-main{height:100%;right:-2%}
  .ghost{font-size:clamp(4rem,17vw,7rem);bottom:auto;top:clamp(74px,14vw,110px);
    -webkit-text-stroke-width:1.3px}
  .cols{grid-template-columns:1fr;gap:24px}
  .contact{flex-direction:row;flex-wrap:wrap;gap:6px 28px;align-items:center}
}
@media (max-width:620px){
  .lineup{height:clamp(240px,62vw,320px)}
  .fig-back{height:92%;left:-4%}
  .fig-girl{height:72%;left:4%}
  .fig-main{height:100%;right:-8%}
  .ghost{font-size:3.2rem;top:78px;-webkit-text-stroke-width:1.1px}
  h1{font-size:clamp(3rem,15vw,4.6rem)}
  .fields{flex-direction:column}
  button{width:100%}
  .contact{flex-direction:column;align-items:flex-start;gap:2px}
  footer{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .fig-main,.fig-girl,.fig-back,.mast,.ghost,.say,.act,footer{
    animation:none;opacity:var(--o,1);transform:none}
  *{transition:none!important}
}