/* ========================================
HADI AL SAIF - PORTFOLIO GATE
========================================= */
/* ========================================
GLOBAL STYLES
========================================= */
:root {
  --bg:#05080d; --panel:rgba(10,16,25,.82); --white:#f7fbff;
  --steel:#9aa9b8; --cyan:#42d9e8; --copper:#d29a5a;
  --copper-light:#f0c48d;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  min-height:100vh; margin:0; overflow-x:hidden;
  color:var(--white); background:radial-gradient(circle at 14% 12%,rgba(210,154,90,.14),transparent 28%),radial-gradient(circle at 88% 84%,rgba(66,217,232,.11),transparent 30%),linear-gradient(145deg,#030508,var(--bg) 48%,#060c13); font-family:Manrope,sans-serif;
}
body:before {
  content:""; position:fixed; inset:0;
  z-index:-1; opacity:.38; background-image:linear-gradient(rgba(174,187,200,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(174,187,200,.13) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle,#000 8%,transparent 76%);
}
.gate {
  display:grid; min-height:100svh; place-items:center;
  padding:22px;
}
.shell {
  position:relative; width:min(1160px,100%); padding:clamp(32px,4vw,48px) clamp(22px,7vw,84px);
  overflow:hidden; background:linear-gradient(145deg,rgba(13,20,31,.88),rgba(4,7,11,.94)); border:1px solid rgba(174,187,200,.2);
  border-radius:32px; box-shadow:0 45px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06); text-align:center;
  isolation:isolate;
}
.shell:before,.shell:after {
  content:""; position:absolute; z-index:-1;
  border-radius:50%;
}
.shell:before {
  top:-220px; left:-170px; width:430px;
  height:430px; border:1px solid rgba(210,154,90,.23); box-shadow:0 0 90px rgba(210,154,90,.08);
}
.shell:after {
  right:-240px; bottom:-220px; width:500px;
  height:500px; border:1px solid rgba(66,217,232,.2); box-shadow:0 0 100px rgba(66,217,232,.08);
}
.corner {
  position:absolute; width:44px; height:44px;
}
.corner:before,.corner:after {
  content:""; position:absolute; background:var(--copper);
}
.corner:before {
  width:44px; height:1px;
}
.corner:after {
  width:1px; height:44px;
}
.tl {
  top:22px; left:22px;
}
.br {
  right:22px; bottom:22px; transform:rotate(180deg);
}
.college-logo {
  display:block; position:absolute; top:23px;
  right:26px; width:276px; height:106px;
  padding:11px 15px; object-fit:contain; background:rgba(255,255,255,.98);
  border:1px solid rgba(183,245,250,.42); border-radius:20px; box-shadow:0 0 0 6px rgba(66,217,232,.035),0 0 38px rgba(66,217,232,.17),0 18px 34px rgba(0,0,0,.34);
}
.status {
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:22px; padding:9px 18px; color:#b7f5fa;
  background:rgba(66,217,232,.06); border:1px solid rgba(66,217,232,.2); border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase;
}
.dot {
  width:7px; height:7px; background:var(--cyan);
  border-radius:50%; box-shadow:0 0 15px var(--cyan); animation:pulse 2s infinite;
}
.mark {
  display:grid; position:relative; width:104px;
  height:104px; margin:0 auto 21px; place-items:center;
}
.mark:before,.mark:after {
  content:""; position:absolute; inset:0;
  border:1px solid rgba(210,154,90,.4); border-radius:25px; transform:rotate(45deg);
}
.mark:after {
  inset:11px; border-color:rgba(66,217,232,.32); animation:spin 12s linear infinite;
}
.mark span {
  font:800 48px Orbitron,sans-serif; background:linear-gradient(135deg,var(--copper-light),#fff 48%,#b7f5fa); background-clip:text;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.eyebrow {
  margin:0 0 9px; color:var(--copper-light); font-size:clamp(10px,1.5vw,13px);
  font-weight:800; letter-spacing:4px; text-transform:uppercase;
}
h1 {
  margin:0; font:800 clamp(3rem,8.4vw,7.5rem)/.92 Orbitron,sans-serif; letter-spacing:-.045em;
  text-transform:uppercase;
}
h1 span {
  display:block;
}
.last {
  margin-top:5px; background:linear-gradient(90deg,var(--copper),var(--copper-light) 42%,#fff 52%,#b7f5fa 70%,var(--cyan)); background-clip:text;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.institution {
  display:inline-flex; align-items:center; gap:14px;
  margin-top:19px; padding:12px 22px; color:var(--white);
  background:linear-gradient(135deg,rgba(210,154,90,.11),rgba(66,217,232,.055)); border:1px solid rgba(210,154,90,.3); border-radius:15px;
  box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.institution>i {
  display:grid; width:40px; height:40px;
  place-items:center; color:var(--copper-light); background:rgba(210,154,90,.08);
  border:1px solid rgba(210,154,90,.22); border-radius:11px; font-size:17px;
}
.institution-copy {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:3px; text-align:left;
}
.institution strong {
  font-size:clamp(13px,1.8vw,16px); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase;
}
.institution small {
  color:var(--cyan); font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}
.statement {
  max-width:650px; margin:14px auto 0; color:#8796a6;
  font-size:clamp(14px,1.8vw,17px); line-height:1.7;
}
.enter {
  display:inline-flex; align-items:center; justify-content:center;
  gap:18px; min-width:280px; margin-top:24px;
  padding:16px 30px; color:#071014; background:linear-gradient(135deg,var(--copper-light),#f7e1c4 48%,#b7f5fa);
  border:0; border-radius:999px; box-shadow:0 16px 38px rgba(210,154,90,.2);
  cursor:pointer; font-size:13px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; transition:.3s;
}
.enter:hover,.enter:focus-visible {
  transform:translateY(-4px); box-shadow:0 22px 48px rgba(210,154,90,.32); outline:0;
}
.enter i {
  transition:.3s;
}
.enter:hover i {
  transform:translateX(5px);
}
.values {
  display:flex; justify-content:center; gap:28px;
  margin-top:21px; color:#596675; font:600 8px Orbitron,sans-serif;
  letter-spacing:1.8px; text-transform:uppercase;
}
.reveal {
  display:grid; position:fixed; inset:0;
  z-index:20; place-items:center; padding:24px;
  visibility:hidden; opacity:0; background:rgba(2,5,8,.9);
  backdrop-filter:blur(18px); transition:.5s;
}
.reveal.open {
  visibility:visible; opacity:1;
}
.message {
  position:relative; width:min(720px,100%); padding:clamp(38px,8vw,70px);
  background:linear-gradient(145deg,rgba(16,24,36,.98),rgba(5,9,14,.98)); border:1px solid rgba(210,154,90,.34); border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.65); text-align:center; transform:translateY(24px) scale(.97);
  transition:.55s cubic-bezier(.16,1,.3,1);
}
.reveal.open .message {
  transform:none;
}
.message small {
  color:var(--cyan); font-weight:800; letter-spacing:3px;
  text-transform:uppercase;
}
.message h2 {
  margin:18px 0; font:800 clamp(2rem,6vw,4.3rem)/1 Orbitron,sans-serif;
}
.message blockquote {
  margin:0; color:#bdc9d4; font-size:clamp(16px,2.5vw,21px);
  line-height:1.75;
}
.signature {
  margin:25px 0 0; color:var(--copper-light); font-weight:700;
}
.portfolio-link {
  display:inline-flex; align-items:center; gap:12px;
  margin-top:26px; padding:14px 23px; color:#061015;
  background:linear-gradient(135deg,var(--copper-light),#fff0da 48%,#b7f5fa); border-radius:999px; font-size:11px;
  font-weight:800; letter-spacing:1.5px; text-decoration:none;
  text-transform:uppercase;
}
.close {
  position:absolute; top:18px; right:18px;
  display:grid; width:42px; height:42px;
  place-items:center; color:var(--steel); background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:50%; cursor:pointer;
}
@keyframes pulse {
  50% {
    opacity:.42; transform:scale(.78);
  }
}
@keyframes spin {
  to {
    transform:rotate(405deg);
  }
}
/* ========================================
RESPONSIVE DESIGN
========================================= */
@media(max-width:650px) {
  .gate {
    padding:14px;
  }
  .shell {
    padding:28px 18px 42px; border-radius:24px;
  }
  .college-logo {
    position:static; width:205px; height:78px;
    margin:0 auto 18px; padding:8px 11px; border-radius:14px;
    box-shadow:0 0 0 4px rgba(66,217,232,.035),0 0 24px rgba(66,217,232,.14);
  }
  .status {
    max-width:100%; min-height:0; margin:0 auto 26px;
    padding:8px 12px; font-size:9px; line-height:1.5;
    letter-spacing:1.4px; text-align:center;
  }
  .mark {
    width:90px; height:90px;
  }
  .mark span {
    font-size:40px;
  }
  h1 {
    font-size:clamp(2.65rem,15vw,4.5rem);
  }
  .institution {
    width:100%; justify-content:center; padding:12px;
  }
  .institution strong {
    font-size:11px;
  }
  .enter {
    width:100%; min-width:0;
  }
  .values {
    gap:14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important; transition-duration:.01ms!important;
  }
}