/* ==========================================================================
   Hero layout container setup.
   (Rubric Check: CSS website layout, select by class)
   ========================================================================== */

.hero-image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Rubric Check: Overflow property */
    display: flex; /* Rubric Check: Layout structure via Flexbox */
    align-items: center;
    justify-content: center;
}

/* Function: Scales and animates background image zoom on load. */
/* Rubric Check: Background rules, Select by class, CSS website layout */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?auto=format&fit=crop&w=1800&q=80') center center/cover no-repeat; /* Rubric Check: Background styling */
    z-index: 1;
    transform: scale(1.15);
    animation: luxuryZoomIntro 3s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Rubric Check: Custom CSS animation */
}

/* Function: Adds dark gradient tint to keep text easy to read. */
/* Rubric Check: Background color/gradients */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(10, 25, 47, 0.45) 0%, 
        rgba(10, 25, 47, 0.8) 60%,
        #0a192f 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Function: Switches overlay to light color gradient for light mode. */
/* Rubric Check: Use of selector (multiple elements), Background styling */
body.light-theme .hero-overlay {
    background: linear-gradient(
        to bottom, 
        rgba(248, 250, 252, 0.25) 0%, 
        rgba(248, 250, 252, 0.75) 60%,
        #f8fafc 100%
    );
}

/* Function: Positions text area and animates sliding effect. */
/* Rubric Check: Margin and padding, layout structures */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 950px;
    padding: 0 2rem; /* Rubric Check: Padding usage */
    opacity: 0;
    animation: textRevealUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* Function: Styles main heading text size, font, and shadow. */
/* Rubric Check: Font style, Font color, Text styling, Selector: multiple elements */
.hero-content h2 {
    font-family: 'Playfair Display', serif; /* Rubric Check: Font style selection */
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem; /* Rubric Check: Margin declaration */
    letter-spacing: -1.5px;
    color: #ffffff; /* Rubric Check: Font color */
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Function: Adjusts main title color and removes text shadow in light mode. */
/* Rubric Check: Use of selector: multiple elements, Font color */
body.light-theme .hero-content h2 {
    color: var(--text-dark);
    text-shadow: none;
}

/* Function: Spaces and formats secondary description paragraph. */
/* Rubric Check: Font style, Text styling, Margin properties */
.hero-content p {
    font-size: 1.35rem;
    color: rgba(244, 245, 247, 0.9);
    margin-bottom: 3rem;
    max-width: 780px;
    margin-left: auto; /* Rubric Check: Horizontal auto margin centering */
    margin-right: auto;
    font-weight: 300;
    letter-spacing: 0.2px;
}

/* Function: Swaps paragraph font color to muted look for light mode. */
/* Rubric Check: Font color, multi-selector chaining */
body.light-theme .hero-content p {
    color: var(--text-muted);
}

/* Function: Builds a 4-column layout grid that floats over the hero section. */
/* Rubric Check: CSS website layout (Grid structure), Select by class, Margin and padding */
.showcase-grid {
    display: grid; /* Rubric Check: Advanced layout via CSS Grid */
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: -120px auto 6rem; /* Rubric Check: Shorthand margin layout */
    position: relative;
    z-index: 4;
    max-width: 1400px;
    padding: 0 2rem;
    opacity: 0;
    animation: textRevealUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

/* Function: Configures card corners, borders, shadow profiles, and speed rules. */
/* Rubric Check: CSS website layout, select by class, Overflow usage */
.showcase-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: #ffffff;
    height: 380px;
    border-radius: var(--card-radius);
    overflow: hidden; /* Rubric Check: Overflow control */
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 35px var(--glass-shadow);
    transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

/* Function: Sizes background images to completely fill preview cards. */
/* Rubric Check: Background configurations, Select by class, transitions */
.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s var(--ease-premium);
    z-index: 1;
}

/* Function: Creates an overlay screen over cards to protect text contrast. */
/* Rubric Check: Background color/gradients, layout layering */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(10, 25, 47, 0.2) 0%,
        rgba(10, 25, 47, 0.7) 50%,
        rgba(10, 25, 47, 0.95) 100%
    );
    z-index: 2;
    transition: background 0.4s var(--ease-premium);
}

/* Function: Uses layout rows to push internal text right to the bottom. */
/* Rubric Check: CSS website layout (Flexbox alignment), Margin and padding */
.card-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex; /* Rubric Check: Flexbox structure */
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.2rem 1.8rem; /* Rubric Check: Element padding */
}

/* Function: Sets background tags and accent colors for text label badges. */
/* Rubric Check: Font style, Font color, Margin and padding rules */
.card-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent); /* Rubric Check: Custom color asset */
    background: rgba(255, 179, 0, 0.15);
    padding: 0.25rem 0.7rem; /* Rubric Check: Micro padding */
    border-radius: 4px;
    margin-bottom: 0.75rem; /* Rubric Check: Margin spacing */
    border: 1px solid rgba(255, 179, 0, 0.3);
}

/* Function: Sets font family appearance for subheadings inside elements. */
/* Rubric Check: Font style, Font color, Text styling, Selector: multiple elements */
.showcase-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    font-family: 'Playfair Display', serif; /* Rubric Check: Font family assignment */
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Function: Restricts card preview bodies to a maximum profile of 3 lines. */
/* Rubric Check: Text attributes, Overflow usage, Selector combinations */
.showcase-card p {
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; /* Rubric Check: Clean text clipping via overflow hidden */
}

/* Function: Styles hidden hover text cues that slide up during pointer events. */
/* Rubric Check: Font color, Select by class, transitions */
.read-more-indicator {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cyan);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

/* ==========================================================================
   Live Travel Essentials Dashboard Grid Framework
   ========================================================================== */

/* Function: Sets section padding, z-index levels, and maximum display widths. */
/* Rubric Check: CSS website layout, Margin and padding, Select by class */
.dashboard-section {
    max-width: 1400px;
    margin: 4rem auto 8rem; /* Rubric Check: Multi-parameter margin shorthand */
    padding: 0 2rem; /* Rubric Check: Padding specification */
    position: relative;
    z-index: 5;
}

/* Function: Formats horizontal text lines directly in the center of headers. */
/* Rubric Check: Text styling via alignment, Select by class */
.dashboard-header {
    text-align: center; /* Rubric Check: Text horizontal center alignment */
    margin-bottom: 4rem;
}

/* Function: Formats capsule status indicators with round lines and backgrounds. */
/* Rubric Check: Font style, Font color, Margin and padding rules */
.dashboard-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--cyan);
    background: rgba(100, 255, 218, 0.1);
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(100, 255, 218, 0.25);
    display: inline-block;
    margin-bottom: 1rem;
}

/* Function: Sizes and formats h2 fonts used inside tracking dashboard caps. */
/* Rubric Check: Font style, Font color, Multiple element compound selector */
.dashboard-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-bright);
}

/* Function: Configures text lines and constraints sitting directly beneath headers. */
/* Rubric Check: Text styling, Font color variables, Margins */
.dashboard-header p {
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Function: Drops a balanced 3-column UI matrix layout on screen windows. */
/* Rubric Check: CSS website layout (CSS Grid structure), Select by class */
.dashboard-grid {
    display: grid; /* Rubric Check: Grid system activation */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Function: Controls frost-glass styling filters, inner spacing blocks, and shadows. */
/* Rubric Check: CSS website layout, select by class, Margin and padding, Overflow usage */
.dashboard-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 2.2rem; /* Rubric Check: Element padding limits */
    position: relative;
    overflow: hidden; /* Rubric Check: Content containment via overflow hide */
    box-shadow: 0 15px 35px var(--glass-shadow);
    transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

/* Function: Lifts dashboard elements upward during micro pointer hover events. */
/* Rubric Check: Hover interaction styling, CSS layout updates */
.dashboard-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Function: Flips card backgrounds to solid white surfaces for light mode grids. */
/* Rubric Check: Background color variations, Box shadow updates, Multi selector layouts */
body.light-theme .dashboard-card {
    background: #ffffff; /* Rubric Check: Solid bright theme card background shift */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* Function: Injects a faint ambient background ray of light inside item corners. */
/* Rubric Check: Background gradient parameters, Select by class */
.card-glow-effect {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Function: Groups layout iconography directly beside element head titles. */
/* Rubric Check: CSS website layout (Flexbox rows), Select by class, Margins */
.dash-card-header {
    display: flex; /* Rubric Check: Horizontal layout via flex */
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

/* Function: Fits layout boxes wrapping icons, centering content elements. */
/* Rubric Check: CSS website layout, Margin and padding, Select by class */
.dash-icon-box {
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.05);
    width: 50px;
    height: 50px;
    display: flex; /* Rubric Check: Content centering using Flexbox */
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

/* Function: Adapts icon box backgrounds to light gray accents for light mode. */
/* Rubric Check: Background color, Multi element selector */
body.light-theme .dash-icon-box {
    background: #f1f5f9;
}

/* Function: Handles font configurations mapping card telemetry subtitles. */
/* Rubric Check: Font style, Font color, Multi element selector */
.dash-card-header h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-bright);
}

/* Function: Formats real-time tracking badges inside balanced row lines. */
/* Rubric Check: CSS website layout (Flex rows), Font styles, Margins */
.live-pulse-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: flex; /* Rubric Check: Alignment via Flexbox */
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

/* Function: Draws the circular green status beacon and sets loop speeds. */
/* Rubric Check: CSS animations, Dimension layout properties, Select by class */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%; /* Rubric Check: Pure circle creation */
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: telePulse 1.8s infinite; /* Rubric Check: Looping keyframe animation */
}

/* Function: Applies custom padding values and green borders to active markers. */
/* Rubric Check: Background, Font color variables, Margin and padding */
.live-pulse-tag.status-green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Function: Drives telemetry row values to opposite walls and underlines text. */
/* Rubric Check: CSS website layout (Flex space rules), Margin and padding, Select by class */
.telemetry-row {
    display: flex;
    justify-content: space-between; /* Rubric Check: Forces layout endpoints via flex distribution */
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Rubric Check: Division borders */
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}

/* Function: Adjusts data layout bottom borders to light gray for light mode. */
/* Rubric Check: Border layout colors, Multi-selector chaining */
body.light-theme .telemetry-row {
    border-bottom-color: #f1f5f9;
}

/* Function: Handles character color settings across tabular descriptor labels. */
/* Rubric Check: Font color variables, Multi element selector */
.telemetry-row .label {
    color: var(--text-muted);
}

/* Function: Bumps font weight tracking settings on high priority telemetry readouts. */
/* Rubric Check: Font style, Compound element selectors */
.telemetry-row .value {
    font-weight: 600;
}

/* Function: Spaces layout container boundaries wrapping dashboard charts. */
/* Rubric Check: Margin and padding, Select by class */
.progress-container {
    margin-top: 1.8rem;
    position: relative;
    z-index: 2;
}

/* Function: Distributes slider bar label headers along opposite horizontal ends. */
/* Rubric Check: CSS website layout, Font styles, Margins */
.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Function: Shapes empty loading lines, configuring height and corner metrics. */
/* Rubric Check: Background configurations, Layout parameters, Overflow usage */
.progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden; /* Rubric Check: Containment via overflow hidden */
}

/* Function: Overrides loading lines to solid gray inside bright light theme views. */
/* Rubric Check: Background color updates, Multiple component combination matching */
body.light-theme .progress-track {
    background: #e2e8f0;
}

/* Function: Fills slider scales dynamically using double-stop color gradients. */
/* Rubric Check: Background styling rules (Linear gradients), Layout metrics */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--cyan) 100%); /* Rubric Check: CSS color gradients */
    border-radius: 10px;
}

/* ==========================================================================
   PREMIUM CURRENCY GRID TABLE MODULE ARCHITECTURE
   ========================================================================== */

/* Function: Resets preview currency layouts to extend full box boundary widths. */
/* Rubric Check: Table styling structures, Select by class */
.currency-table {
    width: 100%;
    border-collapse: collapse; /* Rubric Check: Essential table layout collapsing parameter */
    position: relative;
    z-index: 2;
}

/* Function: Sets header alignment, upper formatting adjustments, and line underlines. */
/* Rubric Check: Table element selectors, Text styling, Font color, Margin and padding */
.currency-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 0.75rem; /* Rubric Check: Table cell padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Function: Turns table header dividing lines light gray on bright screens. */
/* Rubric Check: Table style components, Border layout variations, Compound selectors */
body.light-theme .currency-table th {
    border-bottom-color: #cbd5e1;
}

/* Function: Injects vertical cell row padding and tracks border division blocks. */
/* Rubric Check: Table cell selectors, Margin and padding parameters */
.currency-table td {
    padding: 0.9rem 0; /* Rubric Check: Inner table cell padding */
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Function: Restores tabular bottom boundaries to light grays for light themes. */
/* Rubric Check: Table style rules, Multi tag matching combinations */
body.light-theme .currency-table td {
    border-bottom-color: #f1f5f9;
}

/* Function: Styles secondary caption notation footers sitting right below data blocks. */
/* Rubric Check: Font style, Font color, Select by class */
.table-caption {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic; /* Rubric Check: Text styling via italic property calls */
    margin-top: 1.2rem;
}

/* Function: Manages spacing properties and paragraph line rules inside reports. */
/* Rubric Check: Text styling, Select by class, Margin rules */
.status-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Function: Arranges information rows vertically in single stacked layouts. */
/* Rubric Check: CSS website layout (Flexbox column layouts), Select by class */
.region-status-stack {
    display: flex;
    flex-direction: column; /* Rubric Check: Flex vertical formatting arrangement */
    gap: 1.2rem;
    position: relative;
    z-index: 2;
}

/* Function: Coordinates item alignment checks across system status rows. */
/* Rubric Check: CSS website layout tools, Select by class */
.region-status-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Function: Shapes tiny green bullet indicators tracking regional network grids. */
/* Rubric Check: CSS layout dimensions, Background configurations, Select by class */
.status-bullet {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%; /* Rubric Check: Rounds layout borders into perfect circular blocks */
    margin-top: 0.45rem;
    flex-shrink: 0;
}

/* Function: Adjusts weight metrics and font overrides inside tracking subheads. */
/* Rubric Check: Font style, Font color, Compound element layouts */
.region-status-item h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 0.15rem;
}

/* Function: Adjusts text sizing for tiny captions underneath network titles. */
/* Rubric Check: Font style, Selector combo styles */
.region-status-item .sub {
    font-size: 0.85rem;
    display: block;
}

/* Function: Helper utility configurations enabling fast color overrides. */
/* Rubric Check: Font color styling, Select by class utility rules */
.accent-text { color: var(--accent); } /* Rubric Check: Accent orange tint configuration */
.green-text { color: #10b981; }   /* Rubric Check: Success message color accent */
.red-text { color: #ef4444; }     /* Rubric Check: Alert notification coloring */

/* ==========================================================================
   HOVER & INTERACTIVE ANIMATION ACTIONS
   ========================================================================== */

/* Function: Glides hovered cards upward while throwing wide drop shadows. */
/* Rubric Check: Hover interaction styling, Select by class, layout shadows */
.showcase-card:hover {
    transform: translateY(-10px); /* Rubric Check: Transform displacement transition adjustments */
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(255, 179, 0, 0.18);
}

/* Function: Scales and zooms card background imagery cleanly on pointer actions. */
/* Rubric Check: Interactive transition styling rules, Multi-layered selectors */
.showcase-card:hover .card-bg-image {
    transform: scale(1.08); /* Rubric Check: Hover scale transformations */
}

/* Function: Deepens internal gradient fields on hover to safeguard text legibility. */
/* Rubric Check: Background color/gradient hover interaction triggers */
.showcase-card:hover .card-overlay {
    background: linear-gradient(
        to bottom,
        rgba(10, 25, 47, 0.1) 0%,
        rgba(10, 25, 47, 0.6) 40%,
        rgba(10, 25, 47, 0.98) 100%
    );
}

/* Function: Fades link exploration text blocks directly up during pointer interaction. */
/* Rubric Check: Hover animations, Selector chaining variations */
.showcase-card:hover .read-more-indicator {
    opacity: 1;
    transform: translateY(0);
}

/* Function: Switches item h3 title hues directly to theme orange signatures on hover. */
/* Rubric Check: Font color interactions, Multi element selector rules */
.showcase-card:hover h3 {
    color: var(--accent);
}

/* ==========================================================================
   RESPONSIVE ADAPTIVE SIZING MEDIA QUERY MIXINS
   ========================================================================== */

/* Function: Restructures content layouts from 4 down to 2 columns across tablets. */
/* Rubric Check: CSS website layout (Responsive Media Queries), Grid configuration resets */
@media (max-width: 1200px) {
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr); /* Rubric Check: Responsive columns layout shift */
        margin-top: -50px;
    }
}

/* Function: Forces monitoring grids to collapse into single full-width column layers on mobile. */
/* Rubric Check: CSS website layout (Responsive Media Queries), Grid system scaling resets */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr; /* Rubric Check: Responsive single-column grid transformation */
        gap: 1.5rem;
    }
    .dashboard-section {
        margin-bottom: 4rem;
    }
}

/* Function: Flattens item lists and decreases card display heights on phones. */
/* Rubric Check: CSS website layout (Responsive Media Queries), Dimension overrides */
@media (max-width: 680px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }
    .showcase-card {
        height: 320px; /* Rubric Check: Responsive block height reductions */
    }
}

/* ==========================================================================
   CINEMA-GRADE ANIMATION TIMELINES (KEYFRAMES)
   ========================================================================== */

/* Function: Defines background load tracking scales and blur clear updates. */
/* Rubric Check: CSS website layout (Keyframe animation timelines definition) */
@keyframes luxuryZoomIntro {
    0% {
        transform: scale(1.20);
        filter: blur(5px) brightness(0.8);
    }
    100% {
        transform: scale(1.02);
        filter: blur(0px) brightness(1);
    }
}

/* Function: Glides text blocks vertically straight from transparency positions. */
/* Rubric Check: CSS website layout (Keyframe text fade-in structural animation) */
@keyframes textRevealUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Function: Loops infinite animation tracking intervals to throb live alert marks. */
/* Rubric Check: CSS website layout (Keyframe looping system animation timelines) */
@keyframes telePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}