*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#070f21;color:#fff;font-family:Arial,sans-serif}
body{min-height:100svh;overflow-x:hidden}
.backdrop{position:fixed;inset:0;z-index:0;background:#070f21;overflow:hidden}
.aurora{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse 80% 60% at 18% 28%,rgba(34,211,238,.28),transparent 58%),
  radial-gradient(ellipse 70% 55% at 82% 18%,rgba(139,92,246,.38),transparent 55%),
  radial-gradient(ellipse 65% 50% at 72% 82%,rgba(236,72,153,.32),transparent 58%),
  radial-gradient(ellipse 50% 40% at 12% 88%,rgba(34,211,238,.18),transparent 55%),
  #070f21}
.aurora .orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;mix-blend-mode:screen;pointer-events:none;will-change:transform}
.aurora .orb-a{width:58vmax;height:58vmax;left:-12%;top:-18%;background:rgba(34,211,238,.55);animation:driftA 16s ease-in-out infinite}
.aurora .orb-b{width:52vmax;height:52vmax;right:-16%;top:8%;background:rgba(139,92,246,.55);animation:driftB 20s ease-in-out infinite}
.aurora .orb-c{width:48vmax;height:48vmax;left:28%;bottom:-22%;background:rgba(236,72,153,.5);animation:driftC 18s ease-in-out infinite}
.aurora .sheen{position:absolute;inset:-25%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);animation:sheenMove 9s ease-in-out infinite;pointer-events:none}
.backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;opacity:0;transition:opacity .7s ease;pointer-events:none}
.backdrop video.is-playing{opacity:1}
.backdrop.is-paused .aurora .orb,.backdrop.is-paused .aurora .sheen{animation-play-state:paused}
.backdrop:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,#050c1abf,transparent 24%);pointer-events:none}
header{position:absolute;top:0;left:0;right:0;height:19.17svh;min-height:118px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:1.67svh 5.2vw 1.67svh 3.33vw;border-bottom:1px solid #86cdf782;background:#071124e6}
.school{width:43.2vw;max-height:12svh;object-fit:contain;object-position:left center}
.sponsor{width:20vw;max-height:15.9svh;object-fit:contain}
main{position:relative;min-height:100svh}
.start{position:absolute;left:50%;top:50svh;transform:translate(-50%,-50%);width:min(39.6vw,760px);height:min(16.67vw,180px);max-height:16.67svh;min-height:82px;border:3px solid transparent;border-radius:999px;background:linear-gradient(#d2f0ff05,#d2f0ff05) padding-box;isolation:isolate;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:1.4vw;font-size:clamp(32px,3.54vw,68px);font-weight:700;text-shadow:0 2px 5px #000,2px 0 2px #051325,-2px 0 2px #051325;box-shadow:-10px 0 27px #22d3ee38,10px 0 27px #ec489938;animation:pulse 3s ease-in-out infinite;transition:scale .2s}
.start:before{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;background:linear-gradient(100deg,#22d3ee,#8b5cf6,#ec4899);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.start:after{content:"";position:absolute;width:30%;height:2px;top:10%;left:12%;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px #cfffff;animation:gleam 4s ease-in-out infinite;pointer-events:none}
.start span{position:relative;z-index:1;white-space:nowrap}
.start svg{width:.55em;height:.65em;filter:drop-shadow(0 2px 3px #000)}
.start:hover{scale:1.035;box-shadow:-10px 0 40px #22d3ee66,10px 0 40px #ec489966}
.start:active{scale:.99}
.start:focus-visible,button:focus-visible{outline:4px solid #fff;outline-offset:8px}
.identity{position:absolute;left:3.44vw;bottom:2.1svh;text-shadow:0 2px 4px #000,2px 0 3px #071327;pointer-events:none}
.identity h1{font-size:clamp(32px,3.125vw,60px);line-height:1.15;margin:0 0 12px;font-weight:800}
.identity p{font-size:clamp(18px,1.77vw,34px);margin:0;color:#d4edff;line-height:1.3}
#motion{position:fixed;right:20px;bottom:22px;z-index:3;font:12px Arial,sans-serif;color:#dbeafe;background:#0c1a32c9;border:1px solid #c4d6ff55;border-radius:30px;padding:10px 15px;cursor:pointer}
@keyframes pulse{50%{box-shadow:-10px 0 35px #22d3ee50,10px 0 35px #ec489950}}
@keyframes gleam{50%{left:58%;opacity:.65}0%,100%{opacity:.9}}
@keyframes driftA{50%{transform:translate(12%,10%) scale(1.12)}}
@keyframes driftB{50%{transform:translate(-10%,14%) scale(1.08)}}
@keyframes driftC{50%{transform:translate(8%,-12%) scale(1.15)}}
@keyframes sheenMove{50%{transform:translateX(12%) rotate(8deg)}}
@media(max-width:700px){
  header{height:auto;min-height:126px;padding:15px 20px;gap:15px}
  .school{width:62%;max-height:80px}
  .sponsor{width:30%;max-height:88px}
  .start{width:min(88vw,600px);height:108px;max-height:none;min-height:0;font-size:clamp(35px,8vw,54px);gap:20px;top:50svh}
  .identity{left:6vw;right:6vw;bottom:11svh}
  .identity h1{font-size:clamp(30px,7vw,48px);margin-bottom:13px}
  .identity p{font-size:clamp(17px,4.1vw,25px);max-width:95%;line-height:1.5}
  .backdrop video{object-position:57% center}
  #motion{right:6vw;bottom:24px;font-size:11px}
  .start:hover{scale:1}
}
@media(max-height:500px) and (min-width:701px){
  header{min-height:75px}
  .start{min-height:68px;font-size:36px}
  .identity h1{font-size:30px;margin-bottom:5px}
  .identity p{font-size:17px}
  #motion{font-size:10px;padding:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .start:hover{scale:1}
  .backdrop video,.backdrop video.is-playing{opacity:0!important}
}

/* ---- title proposal A2: A typography + C eagle mark ---- */

@font-face{font-family:"Exo 2";src:url("assets/fonts/Exo2-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
.identity h1{display:flex;align-items:center;gap:.2em;flex-wrap:nowrap;font-family:"Exo 2",Arial,sans-serif;font-size:clamp(40px,4.5vw,80px);font-weight:800;line-height:1.05;margin:0 0 10px;letter-spacing:.02em}
.identity h1 .title-text{background:linear-gradient(90deg,#5cf0ff 0%,#22d3ee 18%,#8b5cf6 55%,#ec4899 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px #22d3ee99) drop-shadow(0 0 18px #8b5cf666) drop-shadow(0 2px 4px #020817cc);
  text-shadow:none;white-space:nowrap;min-width:0}
.identity h1 .eagle-mark{display:inline-flex;height:.95em;width:calc(.95em * 185 / 92);flex:none;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 6px #22d3eecc) drop-shadow(0 0 12px #8b5cf688) drop-shadow(0 0 14px #ec489954) drop-shadow(0 2px 3px #020817cc)}
.identity h1 .eagle-mark img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.identity p{font-size:clamp(18px,1.77vw,34px);margin:0;color:#d4edff;line-height:1.3;text-shadow:0 2px 4px #000,2px 0 3px #071327}
@media(max-width:700px){
  .identity h1{font-size:clamp(34px,9vw,52px);margin-bottom:11px}
  .identity h1 .title-text{white-space:normal;line-height:1.08;background:linear-gradient(165deg,#5cf0ff 0%,#22d3ee 22%,#8b5cf6 62%,#ec4899 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .identity p{font-size:clamp(17px,4.1vw,25px);max-width:95%;line-height:1.5}
}