/* ===========================================================================
   Samrajya AWS SBCL seminar - page styles.

   Ported from the <style> block of `Samrajya Seminar.dc.html`, which stays in
   the repo unmodified as the design of record. Everything above the "additions"
   divider is verbatim from it. Below the divider are the rules the Design
   Composer template expressed as `style-focus` attributes (which a browser
   ignores) plus the states the template had no way to represent: field-level
   errors, the pending button, and the failure view.
   =========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  margin: 0;
  background: #080808;
  background-image: radial-gradient(ellipse at 50% -6%, rgba(255,255,255,.02) 0%, transparent 60%);
  color: #F1F5F9;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #10B981; text-decoration: none; }
a:hover { color: #34D399; }

input, select, textarea { font-family: 'Inter', system-ui, sans-serif; }
input::placeholder { color: #475569; }
select option { background: #0E0E14; color: #F1F5F9; }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal][data-in] { opacity: 1; transform: none; }

@keyframes bd-glow  { 0%,100% { opacity:.4 } 50% { opacity:.85 } }
@keyframes bd-rise  { 0% { opacity:0; transform:translateY(10px) } 100% { opacity:1; transform:translateY(0) } }
@keyframes bd-drop  { 0% { opacity:0; transform:translateY(-60px) scale(.6) } 60% { opacity:1; transform:translateY(6px) scale(1.05) } 100% { opacity:1; transform:translateY(0) scale(1) } }
@keyframes bd-ring  { 0% { transform:scale(.6); opacity:.9 } 100% { transform:scale(2.4); opacity:0 } }
@keyframes bd-check { 0% { stroke-dashoffset:48 } 100% { stroke-dashoffset:0 } }

img { max-width: 100%; }

@media (max-width: 920px) {
  .bd-hero-grid    { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bd-speaker-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .bd-navlink  { display: none !important; }
  .bd-reg-grid { grid-template-columns: 1fr !important; }
  .bd-reg-form { padding: 24px !important; }
}
@media (max-width: 560px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ===========================================================================
   Additions - states the authoring template could not express
   =========================================================================== */

/* The template carried these as `style-focus` attributes, which browsers do
   not implement. They only become real behaviour as CSS. */
.bd-input:focus,
.bd-select:focus {
  border: 1px solid #047857;
  box-shadow: 0 0 0 3px rgba(4,120,87,.14);
}
.bd-username-input:focus {
  box-shadow: 0 0 0 3px rgba(4,120,87,.14);
}

/* Keyboard users must be able to see where they are. The design has no
   visible focus treatment for links and buttons, so one is added here rather
   than left absent. */
a:focus-visible,
button:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Field-level validation messages (R9). Reserved space is deliberately not
   used: the form must not jump on first load, only when a message appears. */
.bd-field-error {
  display: none;
  margin: 7px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: #F87171;
}
.bd-field-error[data-shown] { display: block; }

.bd-input[aria-invalid="true"],
.bd-select[aria-invalid="true"] {
  border: 1px solid rgba(248,113,113,.55);
}

/* The honeypot (R10). Off-screen rather than display:none - some bots skip
   fields that are explicitly hidden, and none of them see this one. */
.bd-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Submit button while a request is in flight. */
.bd-btn[data-pending] {
  opacity: .55;
  cursor: progress;
}

.bd-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border: 2px solid rgba(241,245,249,.35);
  border-top-color: #F1F5F9;
  border-radius: 50%;
  animation: bd-spin .7s linear infinite;
}
@keyframes bd-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bd-spinner   { animation-duration: 2s; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The tutorial player replacing the placeholder block (U9, R30). */
.bd-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: none;
  outline: none;
  /* Poster and video are both 16:9; cover guards against any future asset
     whose aspect drifts, cropping rather than stretching it. */
  object-fit: cover;
}