/* Secure access gate — cinematic iris entry for Aerial / Ground */

.secure-gate {
  --sg-teal: #0f766e;
  --sg-teal-bright: #14b8a6;
  --sg-sky: #0c4a6e;
  --sg-ink: #020617;
  --sg-panel: rgba(15, 23, 42, 0.72);
  --sg-line: rgba(204, 251, 241, 0.55);
  --sg-muted: rgba(226, 232, 240, 0.72);
  --sg-scenic: 5s;
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f8fafc;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  isolation: isolate;
}
.secure-gate[hidden] {
  display: none !important;
}
.secure-gate.is-done {
  pointer-events: none;
}

.secure-gate[data-channel="aerial"] {
  --sg-accent: var(--sg-teal);
  --sg-accent-2: var(--sg-sky);
}
.secure-gate[data-channel="ground"] {
  --sg-accent: #0f766e;
  --sg-accent-2: #334155;
}

.secure-gate__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(15, 118, 110, 0.28) 0%, transparent 52%),
    radial-gradient(120% 80% at 50% 20%, rgba(15, 118, 110, 0.35) 0%, transparent 55%),
    linear-gradient(160deg, #020617 0%, #0f172a 42%, #0c4a6e 100%);
  transition: clip-path 0.85s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.85s ease;
  clip-path: circle(150% at 50% 50%);
}
.secure-gate.is-phase-grant .secure-gate__veil,
.secure-gate.is-done .secure-gate__veil {
  clip-path: circle(0% at 50% 45%);
  opacity: 0;
}

.secure-gate__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(204, 251, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 251, 241, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  opacity: 0.55;
  pointer-events: none;
}
.secure-gate.is-scenic .secure-gate__grid,
.secure-gate.is-phase-auth .secure-gate__grid {
  animation: sg-grid-drift 5s linear forwards;
}
@keyframes sg-grid-drift {
  from { background-position: 0 0, 0 0; opacity: 0.45; }
  to { background-position: 24px 18px, 24px 18px; opacity: 0.7; }
}

.secure-gate__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(20, 184, 166, 0.08) 40%,
    rgba(20, 184, 166, 0.22) 50%,
    rgba(20, 184, 166, 0.08) 60%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
}
.secure-gate.is-phase-scan .secure-gate__scan {
  opacity: 1;
  animation: sg-scan 1.4s ease-in-out forwards;
}
.secure-gate.is-phase-auth .secure-gate__scan {
  opacity: 0.7;
  animation: sg-scan-auth 2.4s ease-in-out infinite alternate;
}
@keyframes sg-scan {
  from { top: -30%; }
  to { top: 110%; }
}
@keyframes sg-scan-auth {
  from { top: 15%; opacity: 0.35; }
  to { top: 55%; opacity: 0.75; }
}

.secure-gate__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(204, 251, 241, 0.55), transparent),
    radial-gradient(1px 1px at 78% 18%, rgba(20, 184, 166, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 62% 72%, rgba(226, 232, 240, 0.4), transparent),
    radial-gradient(1px 1px at 28% 80%, rgba(20, 184, 166, 0.35), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(204, 251, 241, 0.4), transparent);
}
.secure-gate.is-scenic .secure-gate__dust {
  opacity: 1;
  animation: sg-dust 5s ease-in-out forwards;
}
@keyframes sg-dust {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 0.85; }
  100% { opacity: 0.55; transform: translateY(-12px); }
}

.secure-gate__panel {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100vw - 2.5rem));
  padding: 1.75rem 1.5rem 1.35rem;
  border-radius: 1rem;
  background: var(--sg-panel);
  border: 1px solid rgba(204, 251, 241, 0.18);
  box-shadow:
    0 0 0 1px rgba(15, 118, 110, 0.2),
    0 24px 60px rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.secure-gate.is-scenic .secure-gate__panel,
.secure-gate.is-phase-auth .secure-gate__panel {
  animation: sg-panel-pulse 2.2s ease-in-out infinite;
}
@keyframes sg-panel-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(15, 118, 110, 0.2),
      0 24px 60px rgba(2, 6, 23, 0.55),
      0 0 24px rgba(20, 184, 166, 0.12);
    border-color: rgba(204, 251, 241, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(20, 184, 166, 0.45),
      0 24px 60px rgba(2, 6, 23, 0.55),
      0 0 36px rgba(20, 184, 166, 0.28);
    border-color: rgba(20, 184, 166, 0.45);
  }
}
.secure-gate.is-phase-grant .secure-gate__panel,
.secure-gate.is-done .secure-gate__panel {
  opacity: 0;
  transform: scale(0.96) translateY(-8px);
  animation: none;
}

/* —— Iris + camera —— */
.secure-gate__icon-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 1rem;
}

.secure-gate__iris {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

@property --sg-ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.secure-gate__iris-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --sg-ring: 0deg;
  background: conic-gradient(
    from -90deg,
    var(--sg-teal-bright) 0deg,
    var(--sg-teal-bright) var(--sg-ring),
    rgba(148, 163, 184, 0.22) var(--sg-ring)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0.85;
}
.secure-gate.is-scenic .secure-gate__iris-ring {
  animation: sg-ring-fill var(--sg-scenic) linear forwards;
}
.secure-gate.is-phase-grant .secure-gate__iris-ring {
  --sg-ring: 360deg;
  animation: sg-ring-flash 0.55s ease forwards;
  filter: drop-shadow(0 0 10px rgba(20, 184, 166, 0.65));
}
.secure-gate.is-denied .secure-gate__iris-ring,
.secure-gate.is-phase-denied .secure-gate__iris-ring {
  --sg-ring: 360deg;
  background: conic-gradient(from -90deg, #f87171 0deg, #f87171 360deg);
  animation: none;
  filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.45));
}
@keyframes sg-ring-fill {
  from { --sg-ring: 0deg; }
  to { --sg-ring: 360deg; }
}
@keyframes sg-ring-flash {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.06); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1.1); }
}

.secure-gate__iris-sclera {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, #f8fafc 0%, #e2e8f0 35%, #94a3b8 100%);
  box-shadow:
    inset 0 0 18px rgba(2, 6, 23, 0.35),
    0 8px 28px rgba(15, 118, 110, 0.35);
}

.secure-gate__camera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  pointer-events: none;
}
.secure-gate.has-camera .secure-gate__camera {
  opacity: 1;
}

.secure-gate__iris-disk {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(45, 212, 191, 0.55) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, #0f766e 0%, #115e59 42%, #042f2e 72%, #020617 100%);
  box-shadow: inset 0 0 12px rgba(2, 6, 23, 0.55);
  overflow: hidden;
}
.secure-gate.has-camera .secure-gate__iris-disk {
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 38%, rgba(15, 118, 110, 0.35) 55%, rgba(2, 6, 23, 0.55) 100%);
  mix-blend-mode: soft-light;
  box-shadow:
    inset 0 0 0 2px rgba(20, 184, 166, 0.45),
    inset 0 0 16px rgba(2, 6, 23, 0.4);
}
.secure-gate.is-denied .secure-gate__iris-disk,
.secure-gate.is-phase-denied .secure-gate__iris-disk {
  background:
    radial-gradient(circle at 50% 50%, #7f1d1d 0%, #450a0a 70%, #020617 100%);
}

.secure-gate__iris-pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #334155 0%, #020617 70%);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.5);
  transition: width 0.45s ease, height 0.45s ease;
}
.secure-gate.has-camera .secure-gate__iris-pupil {
  width: 18%;
  height: 18%;
  opacity: 0.55;
}
.secure-gate.is-denied .secure-gate__iris-pupil,
.secure-gate.is-phase-denied .secure-gate__iris-pupil {
  width: 42%;
  height: 42%;
  background: #020617;
}

.secure-gate__iris-beam {
  position: absolute;
  left: -20%;
  top: 0;
  width: 28%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(204, 251, 241, 0.15) 40%,
    rgba(20, 184, 166, 0.55) 50%,
    rgba(204, 251, 241, 0.15) 60%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}
.secure-gate.is-phase-scan .secure-gate__iris-beam {
  opacity: 1;
  animation: sg-iris-beam 1.4s ease-in-out forwards;
}
.secure-gate.is-phase-auth .secure-gate__iris-beam {
  opacity: 0.85;
  animation: sg-iris-beam-auth 2.2s ease-in-out infinite;
}
@keyframes sg-iris-beam {
  from { left: -30%; }
  to { left: 110%; }
}
@keyframes sg-iris-beam-auth {
  from { left: -20%; }
  to { left: 95%; }
}

.secure-gate__channel-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sg-accent), var(--sg-accent-2));
  color: #ecfeff;
  font-size: 0.8rem;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.4);
  border: 1px solid rgba(204, 251, 241, 0.25);
  z-index: 2;
}
.secure-gate.is-denied .secure-gate__channel-badge {
  background: linear-gradient(145deg, #b91c1c, #7f1d1d);
  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.4);
}

/* Legacy icon (if present) */
.secure-gate__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.85rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sg-accent), var(--sg-accent-2));
  color: #ecfeff;
  font-size: 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
}

.secure-gate__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sg-teal-bright);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.secure-gate__title {
  margin: 0 0 1.1rem;
  font-family: "Outfit", "DM Sans", sans-serif;
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.secure-gate__lines {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-radius: 0.65rem;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--sg-muted);
}
.secure-gate__lines li {
  opacity: 0.4;
  transform: translateY(4px);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.secure-gate__lines li span:last-child {
  color: #ccfbf1;
  font-weight: 600;
}
.secure-gate.is-phase-auth .secure-gate__lines li,
.secure-gate.is-phase-grant .secure-gate__lines li {
  animation: sg-line-in 0.45s ease forwards;
}
.secure-gate.is-phase-auth .secure-gate__lines li:nth-child(1),
.secure-gate.is-phase-grant .secure-gate__lines li:nth-child(1) { animation-delay: 0.2s; }
.secure-gate.is-phase-auth .secure-gate__lines li:nth-child(2),
.secure-gate.is-phase-grant .secure-gate__lines li:nth-child(2) { animation-delay: 0.9s; }
.secure-gate.is-phase-auth .secure-gate__lines li:nth-child(3),
.secure-gate.is-phase-grant .secure-gate__lines li:nth-child(3) { animation-delay: 1.6s; }
@keyframes sg-line-in {
  to { opacity: 1; transform: none; }
}

.secure-gate__stamp {
  margin: 0.25rem 0 0.85rem;
  font-family: "Outfit", "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sg-teal-bright);
  opacity: 0;
  transform: scale(1.2);
  filter: blur(2px);
}
.secure-gate.is-phase-grant .secure-gate__stamp--grant,
.secure-gate.is-phase-denied .secure-gate__stamp--denied {
  animation: sg-stamp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards;
}
.secure-gate.is-phase-grant .secure-gate__stamp--grant::after {
  content: "";
  position: absolute;
  /* flare via text-shadow on parent */
}
.secure-gate.is-phase-grant .secure-gate__stamp--grant {
  position: relative;
  text-shadow: 0 0 18px rgba(20, 184, 166, 0.75), 0 0 40px rgba(20, 184, 166, 0.35);
}
.secure-gate__stamp--denied {
  color: #fca5a5;
}
.secure-gate.is-denied .secure-gate__veil {
  clip-path: none;
  opacity: 1;
}
.secure-gate.is-denied .secure-gate__panel {
  opacity: 1;
  transform: none;
  animation: none;
}
.secure-gate.is-denied .secure-gate__icon {
  background: linear-gradient(145deg, #b91c1c, #7f1d1d);
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.35);
}
.secure-gate.is-phase-denied .secure-gate__lines li,
.secure-gate.is-denied .secure-gate__lines li {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes sg-stamp {
  0% { opacity: 0; transform: scale(1.25); filter: blur(3px); }
  55% { opacity: 1; transform: scale(0.96); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

.secure-gate__skip,
.secure-gate__cta {
  appearance: none;
  border: 1px solid rgba(204, 251, 241, 0.28);
  background: transparent;
  color: rgba(248, 250, 252, 0.85);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.secure-gate__skip:hover,
.secure-gate__skip:focus-visible,
.secure-gate__cta:hover,
.secure-gate__cta:focus-visible {
  background: rgba(15, 118, 110, 0.25);
  border-color: var(--sg-teal-bright);
  outline: none;
}
.secure-gate__cta--primary {
  background: var(--sg-teal);
  border-color: var(--sg-teal);
  color: #ecfeff;
}
.secure-gate__cta--primary:hover,
.secure-gate__cta--primary:focus-visible {
  background: var(--sg-teal-bright);
  border-color: var(--sg-teal-bright);
  color: #042f2e;
}
.secure-gate__denied-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.15rem;
}
.secure-gate__denied-actions[hidden] {
  display: none !important;
}
.secure-gate__stamp[hidden] {
  display: none !important;
}

.secure-gate.is-reduced .secure-gate__scan,
.secure-gate.is-reduced .secure-gate__dust,
.secure-gate.is-reduced .secure-gate__iris-beam,
.secure-gate.is-reduced .secure-gate__camera { display: none; }
.secure-gate.is-reduced .secure-gate__lines li {
  opacity: 1;
  transform: none;
  animation: none;
}
.secure-gate.is-reduced .secure-gate__stamp {
  opacity: 1;
  transform: none;
  animation: none;
  filter: none;
}
.secure-gate.is-reduced .secure-gate__panel,
.secure-gate.is-reduced .secure-gate__grid,
.secure-gate.is-reduced .secure-gate__iris-ring {
  animation: none !important;
}
.secure-gate.is-reduced.is-phase-grant .secure-gate__veil,
.secure-gate.is-reduced.is-done .secure-gate__veil {
  transition-duration: 0.2s;
}
.secure-gate.is-reduced.is-phase-grant .secure-gate__panel,
.secure-gate.is-reduced.is-done .secure-gate__panel {
  transition-duration: 0.2s;
}

@media (max-width: 480px) {
  .secure-gate__panel { padding: 1.35rem 1.1rem 1.15rem; }
  .secure-gate__lines { font-size: 0.66rem; }
  .secure-gate__icon-wrap { width: 104px; height: 104px; }
  .secure-gate__iris-sclera { width: 80px; height: 80px; }
}