/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root{
  --night-0:#060D24;
  --night-1:#0C1838;
  --night-2:#16224A;
  --marigold:#F6B90E;
  --marigold-hi:#FFC93A;
  --ivory:#FFFAF1;
  --ink:#14204A;
  --ink-soft:#56607F;
  --line:#E3D8C0;
  --sandstone:#9E4A2F;
  --error:#B3261E;
  --display:'Rozha One', Georgia, 'Times New Roman', serif;
  --ui:'Hind Guntur', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --building-h:clamp(220px, 36vh, 420px);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{min-height:100%}
body{
  min-height:100vh;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--night-1);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

/* ------------------------------------------------------------------
   Scene: dusk sky, stars, horizon glow, the colonnade
   ------------------------------------------------------------------ */
.scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,
    #060D24 0%, #0B1636 26%, #1A2250 46%, #3E2B5C 60%,
    #86465A 72%, #D07A4C 84%, #F0A257 100%);
}
.stars{position:absolute; left:-20px; top:0; width:calc(100% + 40px); height:62vh; will-change:transform}
.stars circle{fill:#FFF3D6}
.stars .tw{animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.15}to{opacity:.9}}

.glow{
  position:absolute; left:-10%; right:-10%;
  bottom:calc(var(--building-h) * .45);
  height:75vh;
  background:
    radial-gradient(ellipse 42% 60% at 50% 100%, rgba(255,190,96,.62), rgba(240,128,72,.28) 45%, transparent 72%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255,150,80,.25), transparent 70%);
  animation:dawn 2.4s cubic-bezier(.2,.7,.2,1) both;
  will-change:transform;
}
@keyframes dawn{from{opacity:0; translate:0 60px}to{opacity:1; translate:0 0}}

.building{
  position:absolute; left:-20px; bottom:0;
  width:calc(100% + 40px); height:var(--building-h);
  overflow:visible; will-change:transform;
}

/* columns rise from the plinth, centre first, then the lights come on */
.col{transform-box:fill-box; transform-origin:50% 100%; animation:rise .95s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d)}
@keyframes rise{from{transform:scaleY(0); opacity:0}to{transform:scaleY(1); opacity:1}}
.plinth{animation:fade .8s ease-out .1s both}
.upper{animation:fade .9s ease-out 1.05s both}
.lights{animation:lightsOn 1.6s ease-out 1.45s both}
.windows rect{animation:lightsOn 1.2s ease-out both; animation-delay:var(--d)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lightsOn{
  0%{opacity:0} 8%{opacity:.55} 12%{opacity:.08} 22%{opacity:.8} 28%{opacity:.35} 100%{opacity:1}
}

.grain{position:absolute; inset:0; width:100%; height:100%; opacity:.09; mix-blend-mode:overlay}

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.stage{
  position:relative; z-index:1;
  min-height:100vh;
  padding:40px clamp(20px, 4vw, 56px);
}
.stage-inner{
  width:min(1220px, 100%);
  min-height:calc(100vh - 80px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px, 420px);
  gap:clamp(40px, 6vw, 110px);
  align-items:center;
}

/* ------------------------------------------------------------------
   Identity
   ------------------------------------------------------------------ */
.identity{
  color:#FFF6E6; max-width:680px;
  /* centred in the sky above the colonnade */
  align-self:start;
  min-height:calc(100vh - 80px - var(--building-h) * .8);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  animation:fade 1s ease-out .5s both;
}
.portrait{
  width:100px; height:124px;
  border-radius:50px 50px 16px 16px;
  overflow:hidden;
  background:var(--marigold);
  box-shadow:
    0 0 0 2px var(--marigold),
    0 0 0 8px rgba(246,185,14,.14),
    0 24px 40px -12px rgba(0,0,0,.6);
  margin-bottom:30px;
}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block}
.name-te{
  font-weight:600;
  font-size:clamp(18px, 1.55vw, 23px);
  line-height:1.5;
  color:var(--marigold);
  margin-bottom:4px;
}
.name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(44px, 4.6vw, 88px);
  line-height:.94;
  letter-spacing:-.012em;
  color:#FFF6E6;
  text-shadow:0 2px 30px rgba(255,170,90,.18);
}
.name span{display:block; white-space:nowrap}
.roles{
  list-style:none; padding:0 0 0 20px;
  margin-top:30px;
  border-left:2px solid rgba(246,185,14,.75);
  display:grid; gap:4px;
  font-size:clamp(15px, 1.12vw, 17.5px);
  line-height:1.45;
  color:rgba(255,246,230,.74);
}
.roles li:first-child{color:#FFF6E6; font-weight:600}

/* ------------------------------------------------------------------
   The visitor pass (sign-in card)
   ------------------------------------------------------------------ */
.pass{
  width:100%; max-width:420px; min-width:0; justify-self:end;
  filter:drop-shadow(0 34px 44px rgba(3,7,24,.55)) drop-shadow(0 4px 10px rgba(3,7,24,.35));
  transform-origin:50% 0;
  animation:hang 1.7s cubic-bezier(.22,.8,.25,1) .9s both;
}
@keyframes hang{
  0%  {opacity:0; transform:translateY(-70px) rotate(-7deg)}
  32% {opacity:1; transform:translateY(8px)  rotate(3.2deg)}
  56% {transform:translateY(-2px) rotate(-1.5deg)}
  76% {transform:translateY(0)    rotate(.6deg)}
  100%{opacity:1; transform:none}
}
.pass-swing{transform-origin:50% 0}
.pass-swing.nudge{animation:nudge .6s cubic-bezier(.3,.7,.3,1)}
@keyframes nudge{
  0%{transform:rotate(0)} 25%{transform:rotate(1.8deg)} 50%{transform:rotate(-1.3deg)}
  75%{transform:rotate(.5deg)} 100%{transform:rotate(0)}
}

/* marigold header band, with a lanyard slot punched through it */
.pass-band{
  position:relative;
  border-radius:22px 22px 0 0;
  padding:40px 28px 18px;
  text-align:center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke='%2314204A' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M0 30 C 30 10, 60 50, 90 30 S 150 10, 180 30 S 240 50, 240 30'/%3E%3Cpath d='M0 22 C 30 2, 60 42, 90 22 S 150 2, 180 22 S 240 42, 240 22'/%3E%3Cpath d='M0 38 C 30 18, 60 58, 90 38 S 150 18, 180 38 S 240 58, 240 38'/%3E%3Cpath d='M0 30 C 30 50, 60 10, 90 30 S 150 50, 180 30 S 240 10, 240 30'/%3E%3C/g%3E%3C/svg%3E") center/240px 60px,
    linear-gradient(180deg, #F9C631, #F3B300);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='13'%3E%3Crect width='64' height='13' rx='6.5'/%3E%3C/svg%3E") 50% 15px / 64px 13px no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='13'%3E%3Crect width='64' height='13' rx='6.5'/%3E%3C/svg%3E") 50% 15px / 64px 13px no-repeat exclude,
    linear-gradient(#000 0 0);
}
.pass-band p{font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink)}

/* ticket notches where body meets stub */
.pass-body,.pass-stub{background:var(--ivory)}
.pass-body{
  padding:28px 32px 26px;
  -webkit-mask:
    radial-gradient(circle at 0 100%, #0000 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 100%, #0000 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 11px, #000 11.5px) right / 51% 100% no-repeat;
}
.pass-stub{
  position:relative;
  border-radius:0 0 22px 22px;
  padding:18px 32px 20px;
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; line-height:1.45; color:var(--ink-soft);
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, #0000 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 0, #0000 11px, #000 11.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, #0000 11px, #000 11.5px) right / 51% 100% no-repeat;
}
.pass-stub::before{
  content:""; position:absolute; top:0; left:20px; right:20px;
  border-top:2px dashed #D9CBAE;
}
.pass-stub svg{flex:none; margin-top:1px; color:var(--ink)}

.title{
  font-family:var(--display); font-weight:400;
  font-size:38px; line-height:1.05; letter-spacing:-.005em;
  color:var(--ink);
}
.subtitle{margin-top:6px; font-size:15px; line-height:1.45; color:var(--ink-soft)}

.notice{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:20px; padding:12px 14px;
  border-radius:12px;
  background:rgba(158,74,47,.08);
  box-shadow:inset 0 0 0 1px rgba(158,74,47,.14);
  color:#6E3020; font-size:14.5px; line-height:1.45;
}
.notice svg{flex:none; margin-top:2px; color:var(--sandstone)}
.notice.notice-error{
  background:rgba(179,38,30,.07);
  box-shadow:inset 0 0 0 1px rgba(179,38,30,.2);
  color:var(--error);
}
.notice.notice-error svg{color:var(--error)}
.notice.notice-info{
  background:rgba(20,32,74,.05);
  box-shadow:inset 0 0 0 1px rgba(20,32,74,.12);
  color:var(--ink);
}
.notice.notice-info svg{color:var(--ink)}

/* ------------------------------------------------------------------
   Form
   ------------------------------------------------------------------ */
.field{margin-top:18px}
.field label{display:block; margin-bottom:7px; font-weight:600; font-size:14.5px; color:var(--ink)}
.control{
  display:flex; align-items:stretch;
  height:54px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  transition:border-color .2s, box-shadow .2s;
}
.control:hover{border-color:#CBBE9F}
.control:focus-within{border-color:var(--ink); box-shadow:0 0 0 4px rgba(246,185,14,.38)}
.control.invalid{border-color:var(--error); box-shadow:0 0 0 4px rgba(179,38,30,.12)}
.prefix{
  display:flex; align-items:center; gap:8px;
  padding:0 14px 0 16px;
  font-weight:600; font-size:16px; color:var(--ink);
  border-right:1.5px solid var(--line);
  margin:12px 0;
}
.prefix i{
  width:18px; height:12px; border-radius:2px; flex:none;
  background:linear-gradient(#FF9933 0 33.3%, #fff 33.3% 66.6%, #138808 66.6%);
  box-shadow:0 0 0 1px rgba(20,32,74,.12);
}
.control input{
  flex:1 1 0; width:0; min-width:0;
  border:0; outline:0; background:transparent;
  padding:2px 16px 0;
  font:500 16.5px/1 var(--ui);
  color:var(--ink);
}
.control input::placeholder{color:#9AA0B5; font-weight:400}
.control--tel input{letter-spacing:.06em}
.control--tel input::placeholder{letter-spacing:0}
.reveal{
  flex:none; border:0; background:none; cursor:pointer;
  padding:2px 16px 0; border-radius:0 11px 11px 0;
  font:600 14.5px var(--ui); color:var(--ink);
}
.reveal:hover{text-decoration:underline; text-underline-offset:3px}
.reveal:focus-visible{outline:2px solid var(--ink); outline-offset:-5px}

.msg{margin-top:7px; font-size:13.5px; line-height:1.4; display:flex; gap:6px; align-items:center}
.msg.error{color:var(--error); font-weight:500}
.msg.hint{color:var(--sandstone); font-weight:500}
.msg.note{color:var(--ink-soft)}

.submit{
  position:relative; overflow:hidden;
  margin-top:24px; width:100%; height:56px;
  border:0; border-radius:12px; cursor:pointer;
  background:var(--marigold);
  color:var(--ink);
  font:700 17px var(--ui); letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:inset 0 -3px 0 rgba(120,80,0,.18), 0 12px 26px -12px rgba(217,150,0,.9);
  transition:background .2s, transform .12s;
}
.submit .label{padding-top:2px}
.submit:hover{background:var(--marigold-hi)}
.submit:active{transform:translateY(1px) scale(.995)}
.submit:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.submit::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.submit:hover::after{transform:translateX(120%)}
.submit[aria-busy="true"]{cursor:progress}
.submit .spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(20,32,74,.25); border-top-color:var(--ink);
  animation:spin .8s linear infinite; display:none;
}
.submit[aria-busy="true"] .spinner{display:block}
.submit .tick{display:none}
.submit.done{background:#1F7A4C; color:#fff; box-shadow:0 12px 26px -12px rgba(31,122,76,.8)}
.submit.done .tick{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.secondary{
  display:block; margin:14px auto 0; padding:6px 10px;
  border:0; background:none; cursor:pointer;
  font:600 14.5px var(--ui); color:var(--ink-soft);
}
.secondary:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.secondary:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:6px}

.help{margin-top:18px; font-size:14px; line-height:1.5; color:var(--ink-soft)}
.help strong{color:var(--ink); font-weight:600}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (min-width: 981px) and (max-height: 860px){
  .portrait{width:80px; height:100px; border-radius:40px 40px 14px 14px; margin-bottom:20px}
  .roles{margin-top:20px}
  .pass-band{padding:32px 24px 14px}
  .pass-body{padding:22px 28px 22px}
  .title{font-size:32px}
  .notice{margin-top:14px; padding:10px 12px; font-size:14px}
  .field{margin-top:14px}
  .control{height:48px}
  .submit{height:50px; margin-top:20px}
  .help{margin-top:14px; font-size:13.5px}
  .pass-stub{padding:14px 28px 16px}
}

@media (max-width: 980px){
  :root{--building-h:clamp(170px, 30vh, 300px)}
  .stage{padding:36px 18px calc(var(--building-h) * .55)}
  .stage-inner{grid-template-columns:minmax(0,1fr); gap:30px; justify-items:center; min-height:0}
  .identity{text-align:center; align-items:center; min-height:0}
  .name span{white-space:normal}
  .portrait{width:76px; height:94px; border-radius:38px 38px 12px 12px; margin-bottom:18px}
  .name{font-size:clamp(38px, 9vw, 64px)}
  .roles{border-left:0; padding-left:0; margin-top:18px; justify-items:center}
  .pass{justify-self:center}
}
@media (max-width: 600px){
  .stage{padding-top:28px}
  .portrait{width:64px; height:80px; border-radius:32px 32px 10px 10px; margin-bottom:14px}
  .name-te{font-size:17px}
  .name{font-size:clamp(32px, 9vw, 44px)}
  .roles{font-size:14.5px; gap:2px; margin-top:14px}
  .stage-inner{gap:24px}
}
@media (max-width: 420px){
  .pass-body{padding:24px 22px 22px}
  .pass-stub{padding:16px 22px 18px}
  .title{font-size:34px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}