/* ============================================================
   hourigan.ie — TRANSMISSION IDENT
   a landing page disguised as a live TV broadcast
   ============================================================ */

:root {
    --black: #050505;
    --phosphor: #e8e6df;
    --dim: #9a978d;
    --faint: #57554d;
    --red: #ff2a2a;
    --amber: #ffb000;
    --cyan: #00e5ff;
    --green: #33ff99;
    --magenta: #ff3fa4;
    --accent: var(--green);
    --font-osd: "VT323", "Courier New", monospace;
    --font-name: "Archivo Black", Impact, sans-serif;
}

body[data-channel="1"] { --accent: var(--amber); }
body[data-channel="2"] { --accent: var(--cyan); }
body[data-channel="3"] { --accent: var(--green); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    min-height: 100dvh;
    background: var(--black);
    color: var(--phosphor);
    font-family: var(--font-osd);
    overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--black); }

button { font-family: inherit; cursor: pointer; }

/* ============ CRT layers ============ */

#noise {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1;
    opacity: 0.055;
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.12s linear;
}

.crt { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.22) 3px,
        rgba(0, 0, 0, 0.22) 4px
    );
}

.scanband {
    position: absolute;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.045), transparent);
    animation: scan 7s linear infinite;
}

@keyframes scan {
    from { top: -12%; }
    to   { top: 112%; }
}

.vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 105% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}

/* channel-switch judder */

body.switching .screen {
    animation: judder 0.28s steps(2) 1;
}

@keyframes judder {
    0%   { transform: translateY(0) skewX(0); filter: none; }
    30%  { transform: translateY(-7px) skewX(0.6deg); filter: hue-rotate(35deg) saturate(2); }
    60%  { transform: translateY(5px) skewX(-0.8deg); filter: hue-rotate(-30deg); }
    100% { transform: translateY(0) skewX(0); filter: none; }
}

/* ============ screen layout ============ */

.screen {
    position: relative;
    z-index: 3;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 30px 0;
}

/* ---- top OSD bar ---- */

.osd-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--dim);
    text-shadow: 0 0 8px rgba(232, 230, 223, 0.25);
}

.on-air {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--red);
    text-shadow: 0 0 10px rgba(255, 42, 42, 0.6);
}

.rec-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px rgba(255, 42, 42, 0.9);
    animation: blink 1.4s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0.15; } }

.ident { text-align: center; flex: 1; }

.osd-right { display: inline-flex; gap: 18px; }

.ch-osd {
    color: var(--accent);
    text-shadow: 0 0 10px currentColor;
}

.ch-osd.flash { animation: osdflash 0.9s steps(2) 1; }

@keyframes osdflash {
    0%, 40% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

.timecode {
    color: var(--phosphor);
    font-variant-numeric: tabular-nums;
}

/* ---- stage ---- */

.stage {
    flex: 1;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 44px;
    padding: 34px 0 26px;
}

.standby {
    font-size: 1.1rem;
    letter-spacing: 0.35em;
    color: var(--accent);
    text-shadow: 0 0 10px currentColor;
    animation: blink 2.2s steps(1) infinite;
    margin-bottom: 18px;
}

.name {
    font-family: var(--font-name);
    font-size: clamp(2.9rem, 8.2vw, 6.4rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: var(--phosphor);
    text-shadow:
        2.5px 0 rgba(255, 42, 92, 0.55),
        -2.5px 0 rgba(0, 229, 255, 0.55),
        0 0 26px rgba(232, 230, 223, 0.18);
    margin-bottom: 18px;
}

.name span { display: block; }

/* glitch slices */

.glitch { position: relative; }

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0.75;
    pointer-events: none;
}

.glitch::before {
    color: var(--cyan);
    transform: translate(-3px, 0);
    clip-path: inset(0 0 100% 0);
    animation: slice-a 3.4s steps(1) infinite;
}

.glitch::after {
    color: var(--magenta);
    transform: translate(3px, 0);
    clip-path: inset(100% 0 0 0);
    animation: slice-b 2.9s steps(1) infinite;
}

@keyframes slice-a {
    0%, 88%, 100% { clip-path: inset(0 0 100% 0); }
    89%  { clip-path: inset(12% 0 60% 0); }
    92%  { clip-path: inset(48% 0 30% 0); }
    95%  { clip-path: inset(75% 0 8% 0); }
}

@keyframes slice-b {
    0%, 90%, 100% { clip-path: inset(100% 0 0 0); }
    91%  { clip-path: inset(55% 0 20% 0); }
    94%  { clip-path: inset(20% 0 65% 0); }
    97%  { clip-path: inset(4% 0 82% 0); }
}

.tagline {
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    text-shadow: 0 0 12px currentColor;
    margin-bottom: 30px;
}

/* ---- channel panel ---- */

.channel-panel {
    min-height: 172px;
    max-width: 34em;
    border-left: 3px solid var(--accent);
    padding: 6px 0 6px 20px;
    transition: border-color 0.3s ease;
}

.channel-panel h2 {
    font-family: var(--font-osd);
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-shadow: 0 0 12px currentColor;
    margin-bottom: 8px;
}

.ch-era {
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--faint);
    text-shadow: none;
    margin-left: 12px;
}

.channel-panel p {
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--dim);
    text-shadow: 0 0 6px rgba(232, 230, 223, 0.12);
}

.buffer {
    margin-top: 16px;
    width: min(300px, 100%);
    height: 14px;
    border: 1px solid var(--faint);
    padding: 2px;
}

.buffer-fill {
    height: 100%;
    width: 87%;
    background: repeating-linear-gradient(
        90deg,
        var(--accent) 0 8px,
        transparent 8px 12px
    );
    animation: buffering 2.4s ease-out both;
}

@keyframes buffering {
    from { width: 0; }
    to   { width: 87%; }
}

.buffer-label {
    margin-top: 6px;
    font-size: 1rem !important;
    letter-spacing: 0.18em;
    color: var(--accent) !important;
}

/* ---- remote ---- */

.remote {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

.ch-btn {
    background: transparent;
    border: 1px solid var(--faint);
    color: var(--dim);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    padding: 6px 16px;
    transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.ch-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-shadow: 0 0 10px currentColor;
}

.ch-pips { display: flex; gap: 10px; }

.pip-btn {
    background: transparent;
    border: none;
    color: var(--faint);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    padding: 4px 6px;
    transition: color 0.2s, text-shadow 0.2s;
}

.pip-btn:hover { color: var(--dim); }

.pip-btn.active {
    color: var(--accent);
    text-shadow: 0 0 10px currentColor;
}

.pip-btn.active::before { content: "["; }
.pip-btn.active::after { content: "]"; }

/* ---- picture-in-picture portrait ---- */

.pip { justify-self: center; text-align: center; }

.pip-frame {
    position: relative;
    width: min(330px, 72vw);
    aspect-ratio: 4 / 3.4;
    border: 2px solid #2c2b27;
    border-radius: 14px;
    overflow: hidden;
    background: #101010;
    box-shadow:
        0 0 0 6px #0c0c0c,
        0 0 45px rgba(0, 0, 0, 0.8),
        inset 0 0 60px rgba(0, 0, 0, 0.55);
}

.pip-frame img {
    position: absolute;
    width: 178%;
    left: -39%;
    top: -12%;
    transition: filter 0.4s ease;
}

body[data-channel="1"] .pip-frame img { filter: sepia(0.75) contrast(1.05) brightness(0.95); }
body[data-channel="2"] .pip-frame img { filter: saturate(0.2) contrast(1.2) brightness(1.05); }
body[data-channel="3"] .pip-frame img { filter: none; }

.pip-static {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.16) 0 2px,
        transparent 2px 4px
    );
    mix-blend-mode: multiply;
    animation: pipflicker 4s steps(1) infinite;
}

@keyframes pipflicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.55; }
    95% { opacity: 1; }
    97% { opacity: 0.7; }
}

.pip-live {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: var(--red);
    text-shadow: 0 0 10px rgba(255, 42, 42, 0.8);
    animation: blink 1.4s steps(1) infinite;
}

.pip-caption {
    margin-top: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    color: var(--faint);
}

/* ---- SMPTE bars ---- */

.bars {
    display: flex;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0.85;
}

.bars span { flex: 1; }
.bars span:nth-child(1) { background: #c8c8c8; }
.bars span:nth-child(2) { background: #c8c832; }
.bars span:nth-child(3) { background: #32c8c8; }
.bars span:nth-child(4) { background: #32c832; }
.bars span:nth-child(5) { background: #c832c8; }
.bars span:nth-child(6) { background: #c83232; }
.bars span:nth-child(7) { background: #3232c8; }

/* ---- teletext footer ---- */

.teletext {
    text-align: center;
    padding: 20px 0 26px;
}

.tt-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 34px;
    margin-bottom: 16px;
}

.tt-links a {
    color: var(--phosphor);
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(232, 230, 223, 0.2);
    transition: color 0.2s, text-shadow 0.2s;
}

.tt-links a:hover {
    color: var(--accent);
    text-shadow: 0 0 12px currentColor;
}

.tt-p {
    font-weight: 400;
    padding: 1px 7px;
    margin-right: 8px;
    color: var(--black);
}

.tt-red { background: #ff4c4c; }
.tt-grn { background: #4cff88; }
.tt-yel { background: #ffe14c; }

.tt-line {
    font-size: 1.05rem;
    letter-spacing: 0.13em;
    color: var(--dim);
    margin-bottom: 6px;
}

.tt-meta {
    font-size: 0.95rem;
    letter-spacing: 0.13em;
    color: var(--faint);
}

/* ============ responsive ============ */

@media (max-width: 860px) {
    .screen { padding: 16px 20px 0; }

    .osd-top { font-size: 1rem; flex-wrap: wrap; }
    .ident { order: 3; flex-basis: 100%; text-align: left; margin-top: 4px; }

    .stage {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-top: 30px;
        text-align: left;
    }

    .pip { justify-self: start; }
    .channel-panel { min-height: 205px; }
}

@media (max-width: 480px) {
    .osd-right { gap: 12px; }
    .ch-era { display: block; margin: 2px 0 0; }
    .tagline { font-size: 1.05rem; letter-spacing: 0.16em; }
    .channel-panel p { font-size: 1.15rem; }
    .channel-panel { min-height: 240px; }
    .tt-links { gap: 10px 18px; }
    .tt-links a { font-size: 1.05rem; }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
    .scanband, .rec-dot, .standby, .pip-live, .pip-static,
    .glitch::before, .glitch::after, .buffer-fill {
        animation: none !important;
    }

    .glitch::before, .glitch::after { display: none; }

    body.switching .screen { animation: none; }
}