/*
   OODA TRADER - Brand CSS Stylesheet
   Dark photographic backdrop, single glass panel, gradient accents.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Color Palette */
  --bg-color: #050505;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #767676;

  --accent: #f2402c;
  --accent-grad: linear-gradient(90deg, #f5164e 0%, #fb6a00 62%, #ff9e00 100%);
  --accent-grad-hover: linear-gradient(90deg, #ff2e60 0%, #ff7d0f 62%, #ffb01c 100%);

  /* Glass surfaces */
  --panel-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0.055) 100%);
  --panel-edge: inset 0 1px 0 rgba(255, 255, 255, 0.36),
                inset 0 -1px 0 rgba(255, 255, 255, 0.30),
                inset 1px 0 0 rgba(255, 255, 255, 0.10),
                inset -1px 0 0 rgba(255, 255, 255, 0.10);

  --glass-bg: rgba(15, 15, 15, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-focus: rgba(251, 133, 0, 0.4);

  /* Font Stacks */
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --gutter: clamp(20px, 3vw, 44px);
  --panel-pad-x: clamp(24px, 2.8vw, 42px);
  /* Where the coil's centre lands across the viewport. The mockup sits it at
     ~43% to counterweight the device render; squared up to the page instead.
     The asset is centred on the ring, so this is the only knob. */
  --coil-center: 50%;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

/* Photographic backdrop -----------------------------------------------------
   The coil sits slightly left of centre and runs off the bottom of the frame,
   exactly as in the mockup. Alpha-feathered in the asset itself, so no mask. */
.backdrop {
  position: fixed;
  z-index: 0;
  top: clamp(220px, 36vh, 450px);
  left: var(--coil-center);
  width: clamp(500px, 58vw, 1040px);
  aspect-ratio: 1400 / 1501;
  transform: translateX(-50%);
  background: url('assets/img/backdrop.webp') center top / 100% auto no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: backdropIn 1.4s ease 0.1s forwards;
}

@keyframes backdropIn {
  to { opacity: 1; }
}

/* Base App Layout */
.shell {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
}

/* Header & Logo */
header {
  padding: clamp(26px, 5.3vh, 44px) 0 clamp(30px, 8.1vh, 68px);
}

.logo {
  display: inline-block;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.logo img {
  height: clamp(40px, 6.7vh, 56px);
  width: auto;
}

.logo:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Main region — panel sits high, coil fills the space beneath it */
main {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
}

/* Glass panel --------------------------------------------------------------- */
.panel {
  position: relative;
  width: 100%;
  min-width: 0; /* flex item: keep the device render from setting min-content */
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-fill);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  padding: clamp(32px, 4.6vh, 46px) var(--panel-pad-x);
  opacity: 0;
  transform: translateY(22px);
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

/* The lit glass edge, drawn as an overlay rather than an inset shadow on the
   panel itself. An inset shadow paints under child content, so the device
   render used to slice through the frame; this keeps the rim unbroken across
   the image while the image still sits above the glass fill. */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--panel-edge);
}

.panel-copy {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.panel h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: clamp(20px, 3.4vh, 34px);
}

.lede {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 34em;
  margin-bottom: clamp(24px, 4.6vh, 46px);
}

.status {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(18px, 3.6vh, 32px);
}

/* Call to Action Button */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent-grad);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(251, 90, 0, 0.22);
  transition: var(--transition-smooth);
}

.cta-button:hover {
  background: var(--accent-grad-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(251, 90, 0, 0.34);
}

.cta-button:active {
  transform: translateY(0);
}

/* Device render, clipped by the panel's right edge */
.panel-device {
  position: absolute;
  z-index: 1;
  top: -8%;
  right: -2%;
  width: 32%;
  min-width: 250px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
}

/* Footer Section */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(28px, 5vh, 48px) 0;
  font-size: 12px;
  color: var(--text-muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.footer-email {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: var(--transition-smooth);
}

.footer-email:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

/* Contact Dialog Modal Styles */
.contact-dialog {
  border: none;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8),
              inset 0 1px 1px rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  max-width: 540px;
  width: calc(100% - 32px);
  margin: auto;
  padding: 40px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dialog Backdrop styling */
.contact-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* State when Dialog is Open */
.contact-dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact-dialog[open]::backdrop {
  opacity: 1;
}

/* Dialog Header elements */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dialog-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.close-btn {
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition-smooth);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.close-btn svg {
  stroke: var(--text-primary);
  width: 18px;
  height: 18px;
}

.dialog-subheader {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* Contact Form controls */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  font-family: var(--font-sans);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: var(--transition-smooth);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--glass-border-focus);
  box-shadow: 0 0 16px rgba(251, 133, 0, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit Button & States */
.submit-btn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent-grad);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.submit-btn:hover {
  background: var(--accent-grad-hover);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Loader Animation inside submit */
.loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.submitting .loader {
  display: inline-block;
}

/* Success and Error messages styles */
.form-status {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  animation: fadeIn 0.4s ease forwards;
}

.status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.status-icon.success {
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.status-icon.success svg {
  stroke: #2ecc71;
  width: 32px;
  height: 32px;
}

.status-icon.error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.status-icon.error svg {
  stroke: #e74c3c;
  width: 32px;
  height: 32px;
}

.form-status h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 12px;
}

.form-status p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
  max-width: 320px;
}

.status-btn {
  padding: 12px 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: var(--transition-smooth);
}

.status-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes backdropInDim {
  to { opacity: 0.6; }
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  /* Coil drops to the foot of the viewport and dims — the panel now sits on
     top of it, so it has to stay behind the copy rather than compete with it. */
  .backdrop {
    top: auto;
    bottom: -22vh;
    left: 50%;
    width: clamp(420px, 112vw, 760px);
    animation-name: backdropInDim;
  }

  .shell {
    min-height: auto;
  }

  .panel {
    padding-bottom: 0;
    /* Opaque enough to stay legible where the coil passes behind it. */
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.80) 0%, rgba(14, 14, 14, 0.84) 100%);
  }

  .panel-copy {
    max-width: none;
  }

  .panel h1 {
    font-size: clamp(28px, 6.4vw, 40px);
  }

  .lede,
  .status {
    font-size: 15px;
  }

  .status {
    font-size: 12px;
  }

  /* Device drops below the copy. It stays bled to the panel edges so the
     render's own hard crop is hidden by the panel's overflow, as on desktop. */
  .panel-device {
    position: relative;
    top: auto;
    right: auto;
    min-width: 0;
    width: calc(100% + var(--panel-pad-x) * 2);
    max-width: 520px; /* keeps the panel from growing absurdly tall on tablets */
    margin: clamp(28px, 6vw, 48px) calc(var(--panel-pad-x) * -1) 0 auto;
  }

  main {
    padding-bottom: clamp(200px, 46vw, 420px);
  }

  footer {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .cta-button {
    width: 100%;
  }

  .contact-dialog {
    padding: 28px 20px;
  }

  .dialog-header h2 {
    font-size: 22px;
  }
}

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

  .backdrop,
  .panel {
    opacity: 1;
    transform: translateX(-50%);
  }

  .panel {
    transform: none;
  }
}