/* ============================================================
   custom-SED.css  —  ECDA SED Masterclass Series 2026
   Registration + Thank-you mockup.
   Plain classes only (no CSS custom properties) so it drops
   straight into a .NET MVC project.
   Paths are relative to this file (Content/), hence ../
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Comfortaa';
  src: url('../Fonts/Comfortaa/static/Comfortaa-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('../Fonts/Comfortaa/static/Comfortaa-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Comfortaa';
  src: url('../Fonts/Comfortaa/static/Comfortaa-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../Fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../Fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../Fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../Fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Base ---------- */
html, body {
  min-height: 100%;
}

html {
  overflow-x: hidden;
}
/* stop absolute/oversized decorations from creating a horizontal scrollbar */
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #ffffff;
  background: #e8567a;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   Layered animated backdrop (mimics visual.webp)
   ============================================================ */
.sed-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* ----------------------------------------------------------
     Exact reproduction of visual.webp — a 4-corner MESH gradient
     built from layered radial-gradients (no image needed):
       pink-red  top-left      #F02E58
       orange    top-right     #F38A56
       warm tan  bottom-left   #D68B68
       cyan-blue bottom-right  #34BEE2
     The warm bottom-left and the blue bottom-right overlap at the
     bottom-centre and blend ~50/50 into the teal-green tint before
     fading to blue — exactly like the original.
     ---------------------------------------------------------- */
  background-color: #bf8a90;
  background-image: radial-gradient(60% 42% at 50% 103%, rgba(122,182,152,0.55) 0%, rgba(122,182,152,0) 62%), /* teal-green bottom-centre tint */
  radial-gradient(100% 95% at 100% 100%, rgba(52,190,226,1) 0%, rgba(52,190,226,0) 72%), /* blue  bottom-right */
  radial-gradient(85% 78% at 0% 100%, rgba(214,139,104,0.95) 0%, rgba(214,139,104,0) 66%), /* tan   bottom-left  */
  radial-gradient(90% 82% at 100% 0%, rgba(243,138,86,1) 0%, rgba(243,138,86,0) 60%), /* orange top-right   */
  radial-gradient(120% 108% at 0% 0%, rgba(240,46,88,1) 0%, rgba(240,46,88,0) 66%); /* pink  top-left     */
  opacity: 0;
  animation: sedBgFade .9s ease forwards;
}

  .sed-backdrop img {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
  }

/* Glow anchor: absolute (NOT fixed) so the glow scrolls away with
   the page. 100vh tall so the glow's top:-66% resolves exactly as
   it did inside the fixed backdrop. */
.sed-glow-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden; /* clip the oversized glow so it can't cause horizontal scroll */
  pointer-events: none;
}

/* decorative component positions echo the original poster */
.sed-d-glow {
  position: absolute;
  top: -66%;
  left: 48%;
  width: 190vw; /* max-width: 1680px; */
  opacity: 0;
  transform: translateX(-50%) scale(.6);
  animation: sedGlowIn 1.3s cubic-bezier(.22,.61,.36,1) .15s forwards;
}

.sed-d-middiag {
  top: 35%;
  right: -18%;
  width: 30vw;
  opacity: 0;
  transform: translate(70px,-40px);
  animation: sedSlideIn 1.1s cubic-bezier(.22,.61,.36,1) .45s forwards;
}

.sed-d-ring {
  top: 15%;
  right: -12%;
  width: 24vw;
  opacity: 0;
  transform: translateX(90px);
  animation: sedSlideL 1s cubic-bezier(.22,.61,.36,1) .55s forwards;
}

.sed-d-botleft {
  bottom: -4%;
  left: -2%;
  width: 75vw;
  max-width: 270px;
  opacity: 0;
  transform: translate(-80px,60px);
  animation: sedSlideIn 1.05s cubic-bezier(.22,.61,.36,1) .6s forwards;
}

.sed-d-botdiag {
  bottom: -26%;
  right: 4%;
  width: 26vw;
  opacity: 0;
  transform: translateY(90px);
  animation: sedSlideU 1.05s cubic-bezier(.22,.61,.36,1) .7s forwards;
}

.sed-d-diamond {
  bottom: -26%;
  right: -13%;
  width: 25vw;
  opacity: 0;
  transform: scale(.4) rotate(-25deg);
  animation: sedPopIn 1s cubic-bezier(.34,1.4,.5,1) .85s forwards;
}

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

@keyframes sedGlowIn {
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes sedSlideL {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sedSlideU {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sedSlideIn {
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

@keyframes sedPopIn {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ============================================================
   Content reveal-on-load (staggered, pure CSS)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: sedReveal .7s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes sedReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rd-1 {
  animation-delay: .25s;
}

.rd-2 {
  animation-delay: .45s;
}

.rd-3 {
  animation-delay: .60s;
}

.rd-4 {
  animation-delay: .72s;
}

.rd-5 {
  animation-delay: .80s;
}

.rd-6 {
  animation-delay: .88s;
}

.rd-7 {
  animation-delay: .96s;
}

.rd-8 {
  animation-delay: 1.04s;
}

.rd-9 {
  animation-delay: 1.12s;
}

.rd-10 {
  animation-delay: 1.20s;
}

.rd-11 {
  animation-delay: 1.28s;
}

.rd-12 {
  animation-delay: 1.40s;
}

/* ============================================================
   Page shell / headings
   ============================================================ */
.sed-main {
  padding-top: 48px;
  padding-bottom: 64px;
}

.sed-logo-chip {
  width: 135px;
  height: auto;
}

.sed-poster-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.26;
  text-shadow: 0 2px 5px rgba(85,18,42,.42), 0 5px 18px rgba(70,12,35,.35);
}

.sed-poster-sub {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: .13em;
  text-shadow: 0 2px 5px rgba(85,18,42,.42), 0 4px 16px rgba(70,12,35,.32);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-ecda {
  background: #DA1B60;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 24px;
  padding: 11px 40px;
  box-shadow: 0 4px 14px rgba(150,10,70,.35);
  transition: background .15s ease, transform .05s ease;
}

  .btn-ecda:hover {
    background: #c01553;
    color: #ffffff;
  }

  .btn-ecda:active {
    transform: translateY(1px);
  }

/* ============================================================
   Form (register page)
   ============================================================ */
.sed-form-label {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(120,20,50,.30);
}

.sed-form-hint {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  opacity: .92;
  margin-top: -4px;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(120,20,50,.30);
}

.sed-input {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 7px;
  background: #ffffff;
  padding: 0 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  box-shadow: 0 2px 8px rgba(90,20,40,.10);
  outline: none;
  transition: box-shadow .15s ease;
}

  .sed-input::placeholder {
    color: #b7b7b7;
  }

  .sed-input:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(90,20,40,.10);
  }

/* ============================================================
   Thank-you tick
   ============================================================ */
.sed-check {
  width: 92px;
  height: 92px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(120,20,50,.22);
  opacity: 0;
  transform: scale(.4);
  animation: sedPopIn .8s cubic-bezier(.34,1.4,.5,1) .35s forwards;
}

  .sed-check svg {
    width: 46px;
    height: 46px;
  }

  .sed-check path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: sedDraw .6s ease .95s forwards;
  }

@keyframes sedDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.sed-lead {
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.65;
  text-shadow: 0 1px 3px rgba(120,20,50,.28);
}

.sed-note {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  opacity: .92;
  text-shadow: 0 1px 3px rgba(120,20,50,.28);
}

/* ---------- Thank-you panel (faded white card, black text) ---------- */
.sed-panel {
  background: rgba(255,255,255,0.78); /* faded so the gradient still shows through */
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 35px;
  padding: 44px 38px;
  box-shadow: 0 14px 44px rgba(120,20,50,0.20);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
  /* black text inside the panel, drop the light-on-gradient shadows */
  .sed-panel .sed-poster-title,
  .sed-panel .sed-lead,
  .sed-panel .sed-note {
    color: #1c1c1c;
    text-shadow: none;
  }

  .sed-panel .sed-note {
    opacity: 1;
  }

  .sed-panel .sed-note-link {
    color: #B0154F;
    text-decoration: none;
  }

    .sed-panel .sed-note-link:hover {
      text-decoration: underline;
    }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:575.98px) {
  .sed-poster-title {
    font-size: 27px;
  }

  .sed-poster-sub {
    font-size: 20px;
  }

  /* --------------------------------------------------------
     MOBILE positions for the decorative components.
     Tune each one here for phones — these override the
     desktop values above WITHOUT affecting desktop.
     NOTE: reposition using top/right/bottom/left/width only.
     Do NOT use `transform` here — the entrance animation
     holds the final transform and would override it.
     -------------------------------------------------------- */
  .sed-d-glow {
    top: -32%;
    left: 50%;
    width: 555vw;
    max-width: none;
  }

  .sed-d-ring {
    top: 39%;
    right: -32%;
    width: 55vw;
  }

  .sed-d-middiag {
    top: 57%;
    right: -30%;
    width: 72vw;
  }

  .sed-d-botleft {
    bottom: -3%;
    left: -12%;
    width: 82vw;
    max-width: none;
  }

  .sed-d-botdiag {
    bottom: -15%;
    right: 2%;
    width: 62vw;
  }

  .sed-d-diamond {
    bottom: -12%;
    right: -26%;
    width: 60vw;
  }
}

/* ============================================================
   TABLET / iPad  (portrait ~768–834px and landscape up to 1024px).
   Anything wider than 1024px uses the desktop layout above.
   ============================================================ */
@media (min-width:576px) and (max-width:1024px) {
  .sed-poster-title {
    font-size: 30px;
  }

  .sed-poster-sub {
    font-size: 22px;
  }

  /* --------------------------------------------------------
     iPad positions for the decorative components.
     Tune each one here for tablets — overrides desktop and
     does NOT affect phones (<576px) or desktop (>1024px).
     Reposition using top/right/bottom/left/width only —
     NOT `transform` (the entrance animation holds it).
     -------------------------------------------------------- */
  .sed-d-glow {
    top: -45%;
    left: 50%;
    width: 230vw;
    max-width: none;
  }

  .sed-d-ring {
    top: 35%;
    right: -18%;
    width: 34vw;
  }

  .sed-d-middiag {
    top: 45%;
    right: -22%;
    width: 40vw;
  }

  .sed-d-botleft {
    bottom: -4%;
    left: -6%;
    width: 45vw;
    max-width: 340px;
  }

  .sed-d-botdiag {
    bottom: -15%;
    right: 3%;
    width: 48vw;
  }

  .sed-d-diamond {
    bottom: -21%;
    right: -28%;
    width: 56vw;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .sed-backdrop, .sed-backdrop img, .reveal, .sed-check, .sed-check path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .sed-d-glow {
    transform: translateX(-50%) !important;
  }
}