/* ── The admission ribbon (28 Sep 2026) ──────────────────────────────────────
   On every BayRen site until 17 October: a neon ribbon above the header and,
   behind its button, a sheet with both courses. Asaf's brief: "catchy, with
   bright colors etc. moving graphics"; then, the same day: "see the courses
   button needs to have more eye catchiness. more movement. plus the text size
   in the ribbon needs to be bigger."

   This ONE sheet is copied into every app by sync_core.sh, and pasted into the
   website's styles.css between the ADMISSION markers (the Platform test holds
   the two equal). Every rule is scoped to an adm- class and sets what it needs
   itself — the sites around it style bare buttons, links, lists, headings and
   sections in eight different ways. No url(), no data: images (strict CSPs).
   All motion stops for a student whose phone asks for less of it.
   Facts: core/admission.py. Markup: core/ui/_admission.html. */
.adm-ribbon, .adm-sheet {
  --adm-pink: #ff2d75; --adm-orange: #ff7a18; --adm-gold: #ffd200; --adm-hi: #ffe45c;
  --adm-ielts: #d81b60; --adm-ielts-tint: #fdeef2;
  --adm-foundation: #e8542b; --adm-foundation-tint: #fff1e6;
  --adm-ink: #14283c; --adm-navy: #061d33; --adm-muted: #5d6b79; --adm-ground: #fff;
  --adm-wa: #25d366;
  --adm-font: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --adm-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
.adm-ribbon *, .adm-ribbon *::before, .adm-ribbon *::after,
.adm-sheet *, .adm-sheet *::before, .adm-sheet *::after { box-sizing: border-box; }

/* ── The ribbon ─────────────────────────────────────────────────────────── */
.adm-ribbon {
  /* overflow: the button's heartbeat, ring and glow reach past its box; kept
     inside the ribbon so no page ever scrolls sideways because of them. */
  position: relative; z-index: 60; overflow: hidden; color: #fff; font-family: var(--adm-font); line-height: 1.2;
  background: linear-gradient(90deg, var(--adm-pink), var(--adm-orange), var(--adm-gold), var(--adm-pink));
  background-size: 300% 100%; animation: adm-flow 8s linear infinite;
  text-align: left;
}
@keyframes adm-flow { to { background-position: 300% 0; } }
.adm-inner {
  max-width: 1180px; margin: 0 auto; padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.adm-tag {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap; flex: none;
  font-size: 1rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.adm-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none;
  animation: adm-pulse 1.4s ease-out infinite;
}
@keyframes adm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.95); } 100% { box-shadow: 0 0 0 13px rgba(255,255,255,0); } }
.adm-marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.adm-track {
  display: flex; width: max-content; font-size: 1.12rem; font-weight: 700; letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,.16); animation: adm-scroll 30s linear infinite;
}
.adm-track span { padding-right: 2.6rem; white-space: nowrap; }
.adm-track span::after { content: "\2605"; margin-left: 2.6rem; font-size: .8em; opacity: .9; }
.adm-marquee:hover .adm-track { animation-play-state: paused; }
@keyframes adm-scroll { to { transform: translateX(-50%); } }

/* The button: navy on the bright ribbon, a gold ring rippling out of it, a
   heartbeat, a wiggle, a light sweeping across and an arrow that keeps
   pointing — "more eye catchiness, more movement". */
.adm-cta {
  position: relative; flex: none; display: inline-block; isolation: isolate;
  margin: 0; padding: 0; min-height: 0; width: auto; height: auto;
  font: 800 1.05rem/1.15 var(--adm-font); letter-spacing: .01em; text-transform: none; text-align: center;
  color: #fff; background: var(--adm-navy); border: 2px solid var(--adm-hi); border-radius: 999px;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(6,29,51,.35);
  animation: adm-beat 2.6s ease-in-out infinite, adm-glow 1.3s ease-out infinite;
}
.adm-cta::before {
  content: ""; position: absolute; inset: -4px; border-radius: 999px; z-index: -1;
  border: 3px solid #fff; opacity: 0; pointer-events: none;
  animation: adm-ring 2.6s ease-out infinite;
}
.adm-cta-in {
  position: relative; display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: 999px; overflow: hidden;
}
.adm-cta-in::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: adm-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}
.adm-cta-label { position: relative; color: #fff; }
.adm-cta-arrow {
  position: relative; display: inline-block; color: var(--adm-hi); font-size: 1.15em; line-height: 1;
  animation: adm-nudge .9s ease-in-out infinite;
}
.adm-cta:hover, .adm-cta:focus-visible { background: #0b2c4d; color: #fff; }
.adm-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes adm-beat {
  0%, 34%, 100% { transform: none; }
  7%  { transform: scale(1.1); }
  14% { transform: scale(1); }
  21% { transform: scale(1.07); }
  28% { transform: scale(1); }
  62% { transform: rotate(0); }
  66% { transform: rotate(-5deg) scale(1.04); }
  70% { transform: rotate(5deg) scale(1.04); }
  74% { transform: rotate(-4deg); }
  78% { transform: rotate(3deg); }
  82% { transform: rotate(0); }
}
@keyframes adm-glow {
  0%   { box-shadow: 0 6px 18px rgba(6,29,51,.35), 0 0 0 0 rgba(255,228,92,.85); }
  100% { box-shadow: 0 6px 18px rgba(6,29,51,.35), 0 0 0 16px rgba(255,228,92,0); }
}
@keyframes adm-ring {
  0%   { transform: scale(1); opacity: .95; }
  40%  { transform: scale(1.18, 1.45); opacity: 0; }
  100% { transform: scale(1.18, 1.45); opacity: 0; }
}
@keyframes adm-shine {
  0%, 45% { transform: translateX(-160%) skewX(-18deg); }
  100%    { transform: translateX(330%) skewX(-18deg); }
}
@keyframes adm-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Phones: two rows — the tag and the button, then the ticker. */
@media (max-width: 640px) {
  .adm-inner { flex-wrap: wrap; gap: .55rem .75rem; padding: .6rem 1rem; }
  .adm-tag { flex: 1 1 auto; min-width: 0; font-size: .9rem; letter-spacing: .08em; gap: .5rem; }
  .adm-dot { width: 10px; height: 10px; }
  .adm-marquee { order: 3; flex-basis: 100%; }
  .adm-track { font-size: 1.05rem; }
  .adm-cta { font-size: .98rem; }
  .adm-cta-in { padding: .52rem 1rem; gap: .4rem; }
}
@media (max-width: 400px) {
  .adm-inner { padding: .55rem .75rem; gap: .5rem .5rem; }
  .adm-tag { font-size: .8rem; letter-spacing: .05em; gap: .4rem; }
  .adm-dot { width: 9px; height: 9px; }
  .adm-track { font-size: 1rem; }
  .adm-cta { font-size: .9rem; }
  .adm-cta-in { padding: .48rem .8rem; gap: .35rem; }
}

/* ── The sheet that drops from the top ──────────────────────────────────── */
.adm-bg {
  position: fixed; inset: 0; z-index: 10000; background: rgba(6,29,51,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.adm-sheet {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
  max-height: 100vh; max-height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(-105%); visibility: hidden;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s .42s;
  font-family: var(--adm-font); line-height: 1.4; text-align: left; color: var(--adm-ink);
}
body.adm-open { overflow: hidden; }
body.adm-open .adm-bg { opacity: 1; pointer-events: auto; }
body.adm-open .adm-sheet { transform: none; visibility: visible; transition-delay: 0s; }
.adm-card {
  position: relative; max-width: 960px; margin: 0 auto; color: var(--adm-ink);
  background: var(--adm-ground); border-radius: 0 0 28px 28px;
  padding: 1.6rem 1.6rem 1.3rem; box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.adm-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: linear-gradient(90deg, var(--adm-pink), var(--adm-orange), var(--adm-gold));
}
.adm-x {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0;
  border-radius: 50%; border: 0; background: #f1f4f7; color: var(--adm-ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: none;
}
.adm-x svg { width: 18px; height: 18px; display: block; }
.adm-eyebrow {
  margin: 0 3rem .3rem 0; padding: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  line-height: 1.35; text-transform: uppercase; color: var(--adm-ielts);
}
.adm-title {
  font-family: var(--adm-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  letter-spacing: 0; text-transform: none; margin: 0 0 1.1rem; padding: 0; color: var(--adm-navy);
}

/* the two courses, side by side on a laptop, one under the other on a phone */
.adm-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; padding: 0; }
.adm-course {
  --adm-accent: var(--adm-ielts); --adm-tint: var(--adm-ielts-tint);
  margin: 0; border: 0; border-radius: 20px; padding: 1.2rem 1.2rem 1.1rem; background: var(--adm-tint);
  display: flex; flex-direction: column; min-width: 0;
}
.adm-course--foundation { --adm-accent: var(--adm-foundation); --adm-tint: var(--adm-foundation-tint); }
.adm-course-name {
  font-family: var(--adm-display); font-size: 1.45rem; font-weight: 700; line-height: 1.15;
  letter-spacing: 0; text-transform: none; margin: 0 0 .25rem; padding: 0; color: var(--adm-navy);
}
.adm-price { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .85rem; padding: 0; flex-wrap: wrap; }
.adm-amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--adm-accent); line-height: 1; }
.adm-for { color: var(--adm-muted); font-size: .9rem; }
.adm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .9rem; }
.adm-tile { background: var(--adm-ground); border-radius: 14px; padding: .6rem .35rem; text-align: center; }
.adm-tile b { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; color: var(--adm-accent); }
.adm-tile span { display: block; font-size: .78rem; line-height: 1.25; color: var(--adm-muted); }
.adm-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; }
.adm-list li {
  position: relative; list-style: none; margin: 0; padding: 0 0 0 1.65rem;
  font-size: .93rem; line-height: 1.4; color: var(--adm-ink);
}
.adm-list li::marker { content: none; }
/* the tick: a round badge drawn with borders, no image */
.adm-list li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--adm-accent);
}
.adm-list li::after {
  content: ""; position: absolute; left: .4rem; top: .32em; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 .14rem .14rem 0; transform: rotate(45deg);
}
.adm-fit { margin: 0 0 1rem; padding: 0; font-size: .86rem; line-height: 1.45; color: var(--adm-muted); font-style: italic; }
.adm-wa, .adm-wa:link, .adm-wa:visited {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--adm-wa); color: #fff; font-family: var(--adm-font); font-weight: 800; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 0; border-radius: 999px; padding: .85rem 1.2rem;
  box-shadow: 0 8px 22px rgba(37,211,102,.35); transition: transform .15s, box-shadow .15s;
}
.adm-wa:hover, .adm-wa:focus-visible, .adm-wa:active {
  transform: translateY(-1px); box-shadow: 0 12px 26px rgba(37,211,102,.45); color: #fff; text-decoration: none;
}
.adm-wa svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.adm-more, .adm-more:link, .adm-more:visited {
  display: block; text-align: center; margin-top: .6rem; font-size: .82rem; color: var(--adm-muted); text-decoration: underline;
}
.adm-unsure { margin: 1.1rem 0 0; padding: 0; text-align: center; font-size: .92rem; line-height: 1.45; color: var(--adm-ink); }
.adm-unsure a, .adm-unsure a:link, .adm-unsure a:visited { color: var(--adm-ielts); font-weight: 700; text-decoration: underline; }
.adm-later {
  display: block; margin: .6rem auto 0; padding: .3rem .6rem; min-height: 0; background: none; border: 0; box-shadow: none;
  cursor: pointer; color: var(--adm-muted); font-family: var(--adm-font); font-size: .9rem; font-weight: 400; text-decoration: underline;
}
@media (max-width: 760px) {
  .adm-courses { grid-template-columns: 1fr; }
  .adm-card { padding: 1.3rem 1rem 1.1rem; border-radius: 0 0 22px 22px; }
  .adm-title { font-size: 1.5rem; }
  .adm-amt { font-size: 1.9rem; }
  .adm-tile b { font-size: 1.2rem; }
}

/* A student who asked their phone for less motion gets a still ribbon: ONE
   line, the loop's second copy hidden, no edge fade over the first letters.
   (It used to wrap both copies — a twelve-line ribbon, 191px tall on a laptop,
   found live on 28 Sep 2026; test_admission_core.py pins the fix.) */
@media (prefers-reduced-motion: reduce) {
  .adm-ribbon, .adm-dot, .adm-track, .adm-cta, .adm-cta::before, .adm-cta-in::after, .adm-cta-arrow { animation: none; }
  .adm-ribbon { background: linear-gradient(90deg, var(--adm-pink), var(--adm-orange)); }
  .adm-marquee { -webkit-mask-image: none; mask-image: none; }
  .adm-dup { display: none; }
  .adm-sheet, .adm-bg, .adm-wa { transition: none; }
}