/*
 * Loaded by pages/v2/head_v2.php (homepage) and main.php (all inner pages):
 *  1. "19 Years" celebration (homepage only) — fireworks/confetti canvas + popup, once per session.
 *  2. "Placement Update" toasts shown one line below the sticky header.
 * Markup is created by assets/js/isdm-celebrate.js. Colours follow isdm-theme.css tokens;
 * text on yellow is always dark teal.
 */

/* ---------- 1. Celebration overlay ---------- */
.isdm-cel {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1100px 700px at 50% 40%, rgba(8,81,110,.72), rgba(3,24,34,.9));
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  opacity: 0; transition: opacity .35s ease;
}
.isdm-cel.is-open { opacity: 1; }
.isdm-cel.is-closing { opacity: 0; }
.isdm-cel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.isdm-cel-card {
  position: relative; z-index: 1; overflow: hidden;
  width: min(100%, 500px); padding: 34px 30px 26px; border-radius: 24px;
  background: #fff; color: #13303D; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 4px rgba(240,184,17,.55), 0 0 60px rgba(240,184,17,.35);
  transform: scale(.6) translateY(30px); opacity: 0;
}
.isdm-cel.is-open .isdm-cel-card { animation: isdmCelPop .7s cubic-bezier(.2,1.4,.4,1) .15s forwards; }
.isdm-cel-card::before { /* NxT stripe */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #038C43 0 33.33%, #F0B811 33.33% 66.66%, #CB2B86 66.66% 100%);
}
.isdm-cel-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: #F2F7F9; color: #063D54;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s;
}
.isdm-cel-close:hover { background: #F0B811; transform: rotate(90deg); }
.isdm-cel-close:focus-visible { outline: 3px solid #08516E; outline-offset: 2px; }

.isdm-cel-badge { display: block; width: 170px; height: 170px; margin: 0 auto 6px; filter: drop-shadow(0 10px 18px rgba(6,61,84,.35)); }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-badge { opacity: 1; animation: isdmCelBadge 1s cubic-bezier(.2,1.3,.4,1) .35s both, isdmCelFloat 3.2s ease-in-out 1.4s infinite; }
.isdm-cel-shine { animation: isdmCelShine 2.6s ease-in-out 1.2s infinite; }

.isdm-cel-kicker {
  display: inline-block; margin: 4px 0 10px; padding: 5px 14px; border-radius: 999px;
  background: #FDF3D0; color: #063D54; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.isdm-cel-title { margin: 0 0 6px; color: #08516E; font-size: clamp(26px, 6vw, 34px); font-weight: 800; line-height: 1.15; }
.isdm-cel-title span {
  background: linear-gradient(90deg, #D9A50C, #F0B811, #D9A50C); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.isdm-cel-lead { margin: 0 0 14px; color: #063D54; font-size: clamp(16px, 4vw, 19px); font-weight: 700; }
.isdm-cel-tag {
  display: inline-block; margin: 0; padding: 9px 18px; border-radius: 12px;
  background: #F0B811; color: #063D54; font-size: 14px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(240,184,17,.35);
}
.isdm-cel-card > :not(.isdm-cel-close) { opacity: 0; }
.isdm-cel.is-open .isdm-cel-card > :is(.isdm-cel-kicker, .isdm-cel-title, .isdm-cel-lead, .isdm-cel-tag, .isdm-cel-timer) { animation: isdmCelUp .5s ease-out forwards; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-kicker { animation-delay: .7s; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-title { animation-delay: .85s; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-lead { animation-delay: 1s; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-tag { animation-delay: 1.15s; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-timer { animation-delay: 1.2s; }

.isdm-cel-timer { margin: 18px 0 0; color: #546B76; font-size: 11px; }
.isdm-cel-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #F0B811; transform-origin: left; }
.isdm-cel.is-open .isdm-cel-card > .isdm-cel-bar { animation: isdmCelBar var(--isdm-cel-duration, 10s) linear forwards; opacity: 1; }

@keyframes isdmCelPop { to { transform: none; opacity: 1; } }
@keyframes isdmCelBadge { from { transform: scale(0) rotate(-200deg); } to { transform: none; } }
@keyframes isdmCelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes isdmCelShine { 0% { transform: translateX(-160px); } 55%, 100% { transform: translateX(160px); } }
@keyframes isdmCelUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes isdmCelBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 480px) {
  .isdm-cel-card { padding: 30px 18px 22px; border-radius: 20px; }
  .isdm-cel-badge { width: 138px; height: 138px; }
  .isdm-cel-tag { font-size: 13px; }
}

/* ---------- 2. Placement Update toast ---------- */
.isdm-ptoast {
  position: fixed; z-index: 990; left: 50%; top: var(--isdm-ptoast-top, 120px);
  display: flex; align-items: center; gap: 10px;
  max-width: min(94vw, 760px); padding: 7px 18px 7px 7px; overflow: hidden;
  border: 1px solid #DCE8EE; border-radius: 999px; background: #fff; color: #13303D;
  box-shadow: 0 14px 34px rgba(6,61,84,.2);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.35;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -18px) scale(.94);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.3,.4,1), visibility 0s linear .45s;
}
.isdm-ptoast.is-in {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,1.5,.4,1), visibility 0s;
}
.isdm-ptoast-icon {
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: #F0B811; color: #063D54; font-size: 14px;
}
.isdm-ptoast.is-in .isdm-ptoast-icon { animation: isdmToastIcon .7s cubic-bezier(.2,1.6,.4,1) .1s both; }
.isdm-ptoast-icon::after { /* pulse ring */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #F0B811; opacity: 0;
}
.isdm-ptoast.is-in .isdm-ptoast-icon::after { animation: isdmToastRing 1.4s ease-out .3s 2; }
.isdm-ptoast-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.isdm-ptoast-text strong { color: #08516E; font-weight: 800; }
.isdm-ptoast-text b { color: #063D54; font-weight: 700; }
.isdm-ptoast-sep { margin: 0 6px; color: #F0B811; font-weight: 800; }
.isdm-ptoast::before { /* shimmer sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(240,184,17,.28), transparent);
  transform: translateX(-80px);
}
.isdm-ptoast.is-in::before { animation: isdmToastShine 1.1s ease-out .35s; }
.isdm-ptoast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #08516E, #F0B811); transform-origin: left; transform: scaleX(0); }
.isdm-ptoast.is-in .isdm-ptoast-bar { animation: isdmCelBar var(--isdm-ptoast-duration, 3s) linear forwards; }
.isdm-ptoast.is-held .isdm-ptoast-bar { animation-play-state: paused; }

@keyframes isdmToastIcon { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes isdmToastRing { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.6); } }
@keyframes isdmToastShine { to { transform: translateX(800px); } }

@media (max-width: 560px) {
  /* Narrow phones: allow a second line rather than cutting off the company name. */
  .isdm-ptoast { width: calc(100vw - 20px); padding-right: 12px; border-radius: 16px; font-size: 12.5px; }
  .isdm-ptoast-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (prefers-reduced-motion: reduce) {
  .isdm-cel, .isdm-cel *, .isdm-ptoast, .isdm-ptoast *, .isdm-ptoast::before { animation: none !important; transition: none !important; }
  .isdm-cel .isdm-cel-card, .isdm-cel .isdm-cel-card > :not(.isdm-cel-close) { opacity: 1; transform: none; }
  .isdm-ptoast { transform: translate(-50%, 0); }
}