/* "You're reading it here first" -- a story the paper believes it is first to
   report (App\Views\Components\FirstReport, news_story_firstReport). Loaded
   only on those stories.

   Breaking-news red and a gold "First at OSC", meant to be a big deal: a
   banner over the headline, a red-to-gold rule drawn under it, a red drop
   cap, and an alert opening the story with a pulsing live dot and a sheen.

   Nothing is ever hidden waiting for an animation -- every entrance moves an
   element that is already visible, so a browser that never plays it still
   shows everything (see the animation-must-not-gate-state rule). A reader who
   has asked their system for less motion gets the same page, still. */

.osc-first-report-article {
    --first-red: #c8102e;
    --first-red-deep: #5c0d1c;
    --first-ink: #1c0609;
    --first-gold: #f5c542;
    --first-gold-light: #ffe08a;
    --first-cream: #fff7ea;
}

/* ------------------------------------------------------------ the banner -- */
.osc-first-ribbon {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 12px;
    font: 900 0.74rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.osc-first-ribbon-kicker { color: var(--first-red); }
.osc-first-ribbon-badge,
.osc-first-alert-badge {
    padding: 5px 11px; border-radius: 999px;
    color: #2a1205;
    background: linear-gradient(90deg, var(--first-gold) 0%, var(--first-gold-light) 50%, var(--first-gold) 100%);
    background-size: 200% 100%;
    animation: osc-first-shimmer 3.2s linear infinite;
}

/* The live dot: solid, with a ring that keeps going out from it. */
.osc-first-dot {
    position: relative; display: inline-block; flex: 0 0 auto;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff3b3b;
}
.osc-first-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
    animation: osc-first-pulse 1.6s ease-out infinite;
}

/* -------------------------------------------------- the headline's rule -- */
.osc-first-report-article > h2 { position: relative; padding-bottom: 12px; }
.osc-first-report-article > h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 140px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--first-red), var(--first-gold));
    transform-origin: left center;
    animation: osc-first-rule 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

/* The story's drop cap, in the same red. */
.osc-first-report-article .drop-cap:first-letter { color: var(--first-red); }

/* --------------------------------------------------------------- the alert -- */
.osc-first-alert {
    position: relative; overflow: hidden; isolation: isolate;
    margin: 6px 0 26px; padding: 22px 24px 20px 30px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--first-ink) 0%, #3a0a13 55%, var(--first-red-deep) 100%);
    color: var(--first-cream);
    box-shadow: 0 14px 34px rgba(122, 10, 28, 0.32), inset 0 0 0 1px rgba(245, 197, 66, 0.35);
    animation: osc-first-arrive 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* The gold-to-red edge down the side. */
.osc-first-alert::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px;
    background: linear-gradient(180deg, var(--first-gold), var(--first-red));
}
/* The sheen that crosses it every few seconds, under the words. */
.osc-first-alert::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%;
    z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
    transform: skewX(-18deg);
    animation: osc-first-sheen 5.5s ease-in-out 0.8s infinite;
}
.osc-first-alert p { margin: 0; }
.osc-first-alert-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font: 900 0.74rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0.14em; text-transform: uppercase; color: #ffb3b3;
}
.osc-first-alert-headline {
    margin-top: 12px !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; line-height: 1.12;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(245, 197, 66, 0.22);
}
.osc-first-alert-body {
    margin-top: 8px !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.06rem; line-height: 1.55; color: #f6e3d9;
}
.osc-first-alert-stamp {
    margin-top: 12px !important;
    font: 700 0.8rem/1.4 Arial, Helvetica, sans-serif;
    color: var(--first-gold);
}
.osc-first-alert-stamp time { color: inherit; }

@media (max-width: 640px) {
    .osc-first-alert { padding: 18px 18px 16px 24px; }
    .osc-first-alert-body { font-size: 1rem; }
}

/* ----------------------------------------------------------------- motion -- */
@keyframes osc-first-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes osc-first-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7); }
    80%  { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
@keyframes osc-first-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes osc-first-arrive { from { transform: translateY(12px) scale(0.985); } to { transform: none; } }
@keyframes osc-first-sheen {
    0%, 55% { left: -45%; }
    100%    { left: 120%; }
}

@media (prefers-reduced-motion: reduce) {
    .osc-first-ribbon-badge,
    .osc-first-alert-badge,
    .osc-first-dot::after,
    .osc-first-report-article > h2::after,
    .osc-first-alert,
    .osc-first-alert::after { animation: none; }
    .osc-first-alert::after { display: none; }
}