/* K-RAMEN STUDIO · site-extra.css
   Small additions on top of the live compiled stylesheet (site.css, kept verbatim).
   Loaded after site.css on index.html / locations.html. */

/* The founder modal is rendered in the DOM and toggled with the hidden attribute.
   .profile-modal is display:flex in site.css, so [hidden] needs an explicit override. */
.profile-modal[hidden] { display: none !important; }

/* In focus mode (view-profile) the live CSS hides every direct child of main except the
   topbar and the three sections, which would also hide the modal opened from the profile
   section. Keep the open modal visible there (id selector outranks the live :not() chain). */
.home-page.focus-mode > #founder-modal:not([hidden]) { display: flex !important; }

/* Upcoming events strip under the header: tag + Oct 5 delivery bar + Oct 18 Go! An Lạc bar */
.upcoming-events { background: #080808; position: relative; z-index: 19; }
.main-delivery-announcement-anlac > div > small { display: block; font-size: .85rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 600px) { .main-delivery-announcement-anlac > div { display: grid; grid-area: 2 / 1 / 3 / 3; } .main-delivery-announcement-anlac > a { grid-area: 3 / 1 / 4 / 3; justify-self: start; } .main-delivery-announcement-anlac strong { grid-area: auto; } }

/* Hero headline: three fixed lines (English) */
.home-hero h1 .h1-line { display: block; white-space: nowrap; }

/* Upcoming Events ticker: same look and motion as the .ticker on the Go! An Lạc page */
.upcoming-events .ticker { overflow: hidden; background: #dfff58; color: #111; border-top: 1px solid #343434; border-bottom: 1px solid #343434; padding: 18px 0; white-space: nowrap; letter-spacing: .12em; font-size: .86rem; font-weight: 950; text-transform: uppercase; }
.upcoming-events .ticker span { display: inline-block; padding-right: 48px; animation: upcomingTicker 28s linear infinite; }
@keyframes upcomingTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .upcoming-events .ticker span { animation: none; } }

/* Landing page sub-headers (eyebrows): bright yellow-lime. On light sections they sit on a dark chip so they stay readable. */
.home-page .eyebrow { color: #dfff58; }
.home-page .eyebrow.eyebrow-chip { background: #101719; border-radius: 999px; padding: 7px 14px; width: fit-content; display: block; }

/* Oct 5 / Oct 18 news bars: dark, matching the rest of the landing page (the lime stays on the scrolling banner only) */
.upcoming-events .main-delivery-announcement { color: #f5f2ea; background: #0d0d0d; border: 0; border-bottom: 1px solid #323232; box-shadow: none; }
.upcoming-events .main-delivery-announcement span { color: #101719; background: #dfff58; }
.upcoming-events .main-delivery-announcement strong { color: #f5f2ea; }
.upcoming-events .main-delivery-announcement small { color: #c9c7c2; }
.upcoming-events .main-delivery-announcement > a { color: #dfff58; border: 1.5px solid #dfff58; background: transparent; }
.upcoming-events .main-delivery-announcement > a:hover, .upcoming-events .main-delivery-announcement > a:focus-visible { color: #101719; background: #dfff58; }
.upcoming-events .main-delivery-announcement + .main-delivery-announcement { border-top: 1px solid #323232; }

/* Hero headline: middle line in the accent red, like the other location pages */
.home-hero h1 .h1-accent { color: #df3329; }
.home-hero h1:first-line { color: inherit; }

/* Accent word/line in page headlines (same red as the location pages) */
.hot { color: #df3329; font-style: normal; }

/* Hero social icons: white logo in a brand-colored circle, in a row under the hero buttons */
.hero-cta-stack { width: fit-content; max-width: 100%; display: grid; justify-items: start; }
.hero-social { margin-top: 22px; text-align: left; display: grid; justify-items: start; gap: 12px; }
.hero-social .eyebrow { margin: 0; }
.hero-social-icons { gap: 12px; display: flex; justify-content: flex-start; }
.social-circle { color: #fff; border-radius: 50%; place-items: center; flex: none; width: 54px; height: 54px; transition: transform .2s, filter .2s; display: inline-grid; }
.social-circle:hover, .social-circle:focus-visible { filter: brightness(1.15); transform: translateY(-2px); outline: 3px solid #ffffff40; outline-offset: 2px; }
.social-facebook { background: #1877f2; }
.social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-tiktok { background: #000; border: 1.5px solid #ffffff59; box-sizing: border-box; }

/* Company Profile: "Our Goal" feature is the hero of the section (text left, photos right), directly under the section title */
.profile-section .global-vision { margin-top: 28px; margin-bottom: 18px; }
.profile-section .global-vision > div:first-child { order: 2; }
.profile-section .global-vision > div:last-child { order: 1; }
@media (min-width: 901px) { .profile-section .global-vision { grid-template-columns: 0.72fr 1.28fr; } .profile-section .global-vision > div:last-child { padding: 48px 40px; } .profile-section .global-vision h3 { font-size: clamp(2.1rem, 3.4vw, 4rem); } .profile-section .global-vision > div:first-child img { object-position: center; } }
@media (max-width: 900px) { .profile-section .global-vision > div:first-child { order: 0; } .profile-section .global-vision > div:last-child { order: -1; } }
/* Company Profile: 3D rotating carousel for cards 01-06 (driven by assets/js/profile-carousel.js) */
.profile-scroll-window.pc3d { position: relative; overflow: hidden; perspective: 1600px; height: 520px; outline: none; }
.pc3d .profile-scroll-track { position: absolute; inset: 0; display: block; padding: 0; transform-style: preserve-3d; }
.pc3d .profile-scroll-track .catalog-card { position: absolute; left: 50%; top: 46%; width: min(760px, 70vw); height: 380px; min-height: 0; margin: 0;
  transition: transform .7s cubic-bezier(.2,.75,.2,1), opacity .7s ease, filter .7s ease; cursor: pointer; backface-visibility: hidden;
  box-shadow: 0 30px 70px #000a; will-change: transform; }
.pc3d .profile-scroll-track .catalog-card.is-active { cursor: default; border-color: #8a5a3a; }
.pc3d .profile-scroll-track .catalog-card > img { min-height: 0; height: 100%; }
.pc3d .profile-scroll-track .catalog-card > div { min-height: 0; overflow: hidden; }
.pc3d-nav { position: absolute; top: 46%; transform: translateY(-50%); z-index: 20; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #dfff58; background: #0d0d0dcc; color: #dfff58; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.pc3d-nav:hover, .pc3d-nav:focus-visible { background: #dfff58; color: #111; }
.pc3d-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc3d-prev { left: max(8px, calc(50% - min(380px, 35vw) - 76px)); }
.pc3d-next { right: max(8px, calc(50% - min(380px, 35vw) - 76px)); }
.pc3d-dots { position: absolute; left: 0; right: 0; bottom: 22px; pointer-events: none; display: flex; justify-content: center; gap: 10px; z-index: 20; }
.pc3d-dots button { pointer-events: auto; width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: #ffffff40; cursor: pointer; transition: width .3s, background .3s; }
.pc3d-dots button.is-active { width: 28px; background: #dfff58; }
@media (max-width: 700px) {
  .profile-scroll-window.pc3d { height: 640px; perspective: 1100px; }
  .pc3d .profile-scroll-track .catalog-card { width: 80vw; height: 540px; top: 47%; grid-template-columns: 1fr; grid-template-rows: 230px 1fr; }
  .pc3d .profile-scroll-track .catalog-card > div { padding: 20px; }
  .pc3d .profile-scroll-track .catalog-card h3 { margin-top: 14px; }
  .pc3d-nav { width: 42px; height: 42px; top: auto; bottom: 8px; transform: none; }
  .pc3d-prev { left: 16px; } .pc3d-next { right: 16px; }
  .pc3d-dots { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .pc3d .profile-scroll-track .catalog-card { transition: none; } }
/* Company Profile: lift the eyebrow, heading and intro paragraph together; paragraph's last line sits level with "PROFILE" */
.profile-section .profile-intro > .eyebrow, .profile-section .profile-intro > h2, .profile-section .profile-intro > p:last-child { position: relative; top: -44px; }
@media (max-width: 700px) { .profile-section .profile-intro > .eyebrow, .profile-section .profile-intro > h2 { top: -24px; } .profile-section .profile-intro > p:last-child { top: 0; margin-top: -24px; } }
/* Slide 06 photo: keep the students and the cap toss in frame */
.profile-scroll-track .catalog-card > img[src$="profile-graduation.jpg"] { object-position: 50% 62%; }
/* Slideshow cards: titles in the bright lime accent, centred (number centred above to match) */
.profile-scroll-track .catalog-card h3 { color: #dfff58; text-align: center; }
.profile-scroll-track .catalog-card > div > span { text-align: center; }
/* Landing page delivery story: single "Order Now" button styled like the floating "Your order" button */
.order-now-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 26px; min-height: 52px; padding: 10px 28px; border-radius: 999px;
  background: #dfff58; color: #101719; border: 1px solid #101719; font-weight: 950; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 10px 30px #00000088; transition: transform .2s ease, box-shadow .2s ease; }
.order-now-btn:hover, .order-now-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px #000000aa; color: #101719; }
@media (min-width: 701px) { .order-now-btn { align-self: flex-start; width: fit-content; min-width: 220px; } }
/* Landing page delivery story: staff photo -> arrow -> delivery hand-off photo, two equal tiles within the same section height */
.delivery-story-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: clamp(20px, 2.4vw, 36px); min-height: 0; }
.delivery-story-pair img { width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 0; object-fit: cover; border-radius: 18px; border: 1px solid #71442d; box-shadow: 0 16px 40px #0008; }
.delivery-story-pair img:first-child { object-position: 50% 50%; }
.delivery-story-pair .delivery-story-handoff { object-position: 50% 72%; }
.delivery-story-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #dfff58; color: #101719; border: 1px solid #101719; display: grid; place-items: center; box-shadow: 0 8px 22px #0009; z-index: 1; }
.delivery-story-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .delivery-story-pair { height: auto; max-height: none; gap: 44px; padding: 16px 20px; }
  .delivery-story-pair img { aspect-ratio: 4 / 5; }
  .delivery-story-arrow { width: 38px; height: 38px; }
  .delivery-story-arrow svg { width: 20px; height: 20px; }
}
.social-youtube { background: #ff0000; }
/* Top nav with 5 links: phones get a tidy 3 + 2 grid; tablets keep each label on one line */
@media (max-width: 900px) {
  .home-page .topbar nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-page .topbar nav a { grid-column: span 2; }
  .home-page .topbar nav a:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 901px) and (max-width: 1200px) { .topbar nav { gap: 18px; white-space: nowrap; } }
/* Delivery story title: small service-area note after "your door" */
.delivery-area-note { font-size: clamp(.95rem, 1.25vw, 1.25rem); font-weight: 600; letter-spacing: .01em; color: #dfff58; white-space: nowrap; vertical-align: middle; }
.delivery-area-note { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.delivery-area-note { text-decoration-skip-ink: none; }
/* Founder & CEO: two travel photos side by side (Annapurna + Great Wall) at a fixed height */
.compact-founder .founder-images { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 560px; min-height: 0; }
.compact-founder .founder-images img.founder-travel-2 { display: block; grid-row: auto; object-fit: cover; padding: 0; object-position: 50% 35%; }
.compact-founder .founder-images img:first-child { object-position: 70% 50%; }
@media (max-width: 900px) {
  .compact-founder .founder-images { height: 360px; }
}
/* Founder & CEO: show the second (vision) paragraph in the compact layout */
.compact-founder .founder-copy > p.founder-vision { display: block; margin-bottom: 0; }
@media (min-width: 901px) { .compact-founder .founder-images { height: auto; min-height: 560px; align-self: stretch; } }
/* Careers page (#careers focus view) — GO! An Lạc recruitment block, styled as on k-ramenstudio.com/#careers.
   The landing page's own careers strip keeps its old heading; the new heading + roles show only on the Careers page. */
.careers-page-only { display: none; }
.home-page.view-careers .careers-page-only { display: block; }
.home-page.view-careers .career-heading.careers-page-only { display: grid; }
.home-page.view-careers .careers-home-only { display: none; }
.anlac-recruitment { background: rgba(17, 14, 13, 0.9); border: 1px solid #6b332b; border-radius: 22px; margin: 26px 0 22px; padding: 24px; }
.anlac-recruitment-head { justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; display: flex; }
.anlac-recruitment-head span { color: #ffd21f; letter-spacing: .14em; font-size: .7rem; font-weight: 900; }
.anlac-recruitment-head h3 { margin: 6px 0 0; font-size: 1.55rem; }
.anlac-recruitment-head > b { color: #ffd21f; white-space: nowrap; font-size: .9rem; }
.anlac-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; display: grid; }
.anlac-job-grid article { background: #15100f; border: 1px solid #49302c; border-radius: 13px; justify-content: space-between; align-items: center; gap: 18px; min-height: 76px; padding: 13px 15px; display: flex; }
.anlac-job-grid article > div { gap: 4px; display: grid; }
.anlac-job-grid strong { font-size: .92rem; }
.anlac-job-grid span { color: #bdb1ac; font-size: .78rem; }
.anlac-job-grid article > b { color: #ffd21f; text-align: right; white-space: nowrap; font-size: .85rem; }
.anlac-recruitment-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 12px; display: grid; }
.anlac-recruitment-meta p { color: #c9bbb5; margin: 8px 0; font-size: .83rem; line-height: 1.6; }
.anlac-recruitment-meta p:last-child { grid-column: 1 / -1; }
.anlac-recruitment-meta a { color: #ffd21f; font-weight: 800; }
.anlac-apply-link { color: #fff; background: #ef2b20; border-radius: 999px; align-items: center; gap: 8px; margin-top: 4px; padding: 11px 15px; font-size: .82rem; font-weight: 900; text-decoration: none; display: inline-flex; }
.anlac-apply-link:hover, .anlac-apply-link:focus-visible { background: #c82017; }
@media (max-width: 700px) {
  .anlac-recruitment { padding: 16px; }
  .anlac-recruitment-head { align-items: start; }
  .anlac-recruitment-head h3 { font-size: 1.2rem; }
  .anlac-job-grid, .anlac-recruitment-meta { grid-template-columns: 1fr; }
  .anlac-recruitment-meta p:last-child { grid-column: auto; }
  .anlac-job-grid article { flex-direction: column; align-items: start; gap: 6px; }
  .anlac-job-grid article > b { text-align: left; }
}
/* Landing page (home view only): stop after the K-Food Truck update. The story-finish block, culture ticker and the
   Company Profile / Food / Careers sections are still in the file because the top-menu pages (#profile, #food, #careers)
   are views of these same sections — they are only hidden on the landing page. */
.home-page:not(.focus-mode) > .home-story-finish,
.home-page:not(.focus-mode) > .culture-ticker,
.home-page:not(.focus-mode) > .profile-section,
.home-page:not(.focus-mode) > .food-section,
.home-page:not(.focus-mode) > .careers-section { display: none !important; }
/* Landing page · K-Food Truck update: copy + buttons on the left (top-aligned), truck photo on the right */
.foodtruck-update { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 56px); min-height: 0; padding-top: 72px; padding-bottom: 72px; }
.foodtruck-update h2 { font-size: clamp(2rem, 3.4vw, 3.8rem); }
.foodtruck-update > div:first-child > p:not(.eyebrow) { color: #c8c8c8; max-width: 620px; margin: 0; font-size: 1.03rem; line-height: 1.65; }
.foodtruck-update .foodtruck-update-actions { justify-content: flex-start; margin-top: 28px; }
.foodtruck-update-media { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid #5b302a; box-shadow: 0 24px 60px #000a; aspect-ratio: 16 / 9; }
.foodtruck-update-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; display: block; }
@media (max-width: 900px) {
  .foodtruck-update { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
}
/* Truck exterior design board (3:2) — show the whole board uncropped */
.foodtruck-update-media { aspect-ratio: 3 / 2; }
.foodtruck-update-media img { object-position: center; }
/* Landing hero CTAs: all caps + effects in the site's red/lime language.
   FIND YOUR LOCATION — red pill with a soft glow and a light "shine" that sweeps across every few seconds; arrow nudges on hover.
   COMPANY PROFILE — lime outline pill that fills lime from left to right on hover. */
.home-hero .hero-actions .primary,
.home-hero .hero-actions .secondary { text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; }
.home-hero .hero-actions .locations-cta { position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px #ff6a5e55, 0 10px 28px #df332966; transition: transform .2s ease, box-shadow .2s ease; }
.home-hero .hero-actions .locations-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, #ffffff55 50%, transparent 100%); transform: skewX(-20deg);
  animation: ctaShine 3.6s ease-in-out infinite; }
@keyframes ctaShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.home-hero .hero-actions .locations-cta svg { transition: transform .2s ease; }
.home-hero .hero-actions .locations-cta:hover, .home-hero .hero-actions .locations-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px #ff8a80, 0 14px 34px #df3329aa; }
.home-hero .hero-actions .locations-cta:hover svg, .home-hero .hero-actions .locations-cta:focus-visible svg { transform: translateX(4px); }
.home-hero .hero-actions .secondary { position: relative; overflow: hidden; isolation: isolate; color: #dfff58; border: 1.5px solid #dfff58;
  background: #0006; transition: color .25s ease, transform .2s ease; }
.home-hero .hero-actions .secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #dfff58; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.home-hero .hero-actions .secondary:hover, .home-hero .hero-actions .secondary:focus-visible { color: #111; transform: translateY(-2px); }
.home-hero .hero-actions .secondary:hover::before, .home-hero .hero-actions .secondary:focus-visible::before { transform: scaleX(1); }
@media (max-width: 520px) { .home-hero .hero-actions .primary, .home-hero .hero-actions .secondary { font-size: .74rem; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .home-hero .hero-actions .locations-cta::after { animation: none; display: none; } }
/* Landing hero headline: soft neon-sign glow around the letters, breathing slowly (cream lines glow warm white, the red line glows red) */
.home-hero h1 .h1-line { text-shadow: 0 10px 45px #000, 0 0 10px #fff4dc33, 0 0 26px #fff4dc22; animation: heroGlowWhite 4.5s ease-in-out infinite; }
.home-hero h1 .h1-accent { text-shadow: 0 10px 45px #000, 0 0 10px #ff4a3d55, 0 0 30px #df332955; animation-name: heroGlowRed; }
@keyframes heroGlowWhite {
  0%, 100% { text-shadow: 0 10px 45px #000, 0 0 8px #fff4dc26, 0 0 22px #fff4dc14; }
  50%      { text-shadow: 0 10px 45px #000, 0 0 14px #fff4dc80, 0 0 40px #fff4dc4d; } }
@keyframes heroGlowRed {
  0%, 100% { text-shadow: 0 10px 45px #000, 0 0 8px #ff4a3d40, 0 0 24px #df332938; }
  50%      { text-shadow: 0 10px 45px #000, 0 0 16px #ff4a3dbf, 0 0 46px #df3329a6; } }
@media (prefers-reduced-motion: reduce) { .home-hero h1 .h1-line { animation: none; } }
/* Landing page: larger neon-yellow sub headers for readability (12.5px -> 15px desktop, 14px phone) */
.home-page:not(.focus-mode) .eyebrow { font-size: .95rem; letter-spacing: .18em; }
@media (max-width: 700px) { .home-page:not(.focus-mode) .eyebrow { font-size: .88rem; letter-spacing: .14em; } }

/* Announcement ticker (no pause control: scrolls continuously): copy of the k-ramenstudio.com service-announcement banner (replaces the yellow UPCOMING EVENTS strip) */
.announcement-ticker{z-index:19;color:rgb(245,242,234);background:rgb(17,23,25);border-bottom:1px solid rgb(52,52,52);align-items:center;gap:14px;min-height:46px;padding:5px 4vw;display:flex;position:relative}
.announcement-ticker-viewport{border-radius:4px;flex:1 1 auto;min-width:0;overflow:hidden}
.announcement-ticker-viewport:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.announcement-ticker-track{will-change:transform;width:max-content;animation:27.75s linear infinite announcement-ticker-motion;display:flex}
.announcement-ticker-group{white-space:nowrap;flex:0 0 auto;align-items:center;gap:32px;margin:0;padding:0 40px 0 0;list-style:none;display:flex}
.announcement-ticker-group li{font-size:.875rem;font-weight:750;line-height:1.35}
.announcement-ticker-group li::before{content:"•";color:var(--lime);margin-right:9px;font-weight:950}
.announcement-ticker-toggle{min-height:34px;color:var(--lime);white-space:nowrap;cursor:pointer;background:rgb(27,36,39);border:1px solid rgb(89,100,102);border-radius:999px;flex:0 0 auto;padding:6px 11px;font-size:.8125rem;font-weight:850}
.announcement-ticker-toggle:hover,.announcement-ticker-toggle:focus-visible{border-color:var(--lime);color:#fff;outline:2px solid var(--lime);outline-offset:2px;background:rgb(38,50,53)}
@media (max-width:900px){.announcement-ticker{gap:8px;padding-inline:12px}.announcement-ticker-group{gap:24px;padding-right:28px}.announcement-ticker-group li{font-size:.875rem}.announcement-ticker-toggle{padding:6px 9px;font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.announcement-ticker{align-items:flex-start;padding-block:10px}.announcement-ticker-viewport{overflow:visible}.announcement-ticker-track{will-change:auto;width:100%;animation:none;display:block;transform:none}.announcement-ticker-group{white-space:normal;gap:7px;padding:0;display:grid}.announcement-ticker-group li{white-space:normal}.announcement-ticker-duplicate{display:none}.announcement-ticker-toggle{align-self:flex-start}}
@keyframes announcement-ticker-motion{0%{transform:translate(0)}100%{transform:translate(-50%)}}