/* Голографическая руна дня. Только CSS: holo.js передаёт положение
   указателя в переменные --holo-*, остальное рисуют два слоя поверх
   плитки — фольга (::before) и блик (::after). Цвета — золото и
   приглушённые оттенки бренда, без неона. Тот же приём, что у карты
   дня в Таро. */

.rune-day {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin: 0 0 30px;
}
.rune-day h2 { margin-bottom: 8px; }
.rune-day .small { max-width: 620px; }
.rune-day .actions { margin-top: 14px; }

.holo-rune {
    --holo-x: 50%;
    --holo-y: 50%;
    --holo-rx: 0deg;
    --holo-ry: 0deg;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 7 / 10;
    padding: 18px 12px 20px;
    border: 1px solid rgba(215, 174, 112, .45);
    border-radius: 20px;
    background: radial-gradient(120% 90% at 50% 20%, var(--sr-night-2), var(--sr-night));
    color: var(--sr-night-ink);
    text-decoration: none;
    box-shadow: var(--sr-shadow);
    transform: perspective(900px) rotateX(var(--holo-rx)) rotateY(var(--holo-ry));
    transition: transform .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.holo-rune.holo-active { transition-duration: .12s; }
.holo-rune .glyph { color: var(--sr-gold-soft); font-size: 88px; line-height: 1; }
.holo-rune-system { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sr-night-muted); }
.holo-rune-name { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }

.holo-rune::before,
.holo-rune::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Фольга: радужные полосы сдвигаются вслед за указателем. */
.holo-rune::before {
    background: repeating-linear-gradient(115deg,
        rgba(215, 174, 112, 0) 0%,
        rgba(215, 174, 112, .9) 3%,
        rgba(120, 186, 176, .85) 6%,
        rgba(206, 132, 156, .85) 9%,
        rgba(243, 230, 211, .9) 12%,
        rgba(215, 174, 112, 0) 15%);
    background-size: 240% 240%;
    background-position: var(--holo-x) var(--holo-y);
    mix-blend-mode: color-dodge;
    opacity: .05;
}

/* Блик: мягкое пятно света там, где указатель. */
.holo-rune::after {
    background: radial-gradient(circle at var(--holo-x) var(--holo-y),
        rgba(255, 250, 244, .35) 0%,
        rgba(255, 250, 244, .1) 26%,
        rgba(255, 250, 244, 0) 52%);
    opacity: 0;
}

.holo-rune.holo-active::before { opacity: .16; }
.holo-rune.holo-active::after { opacity: 1; }
.holo-rune:focus-visible { outline-offset: 5px; }

/* Пальцем плитку не наклоняем — палец листает страницу. Фольга
   переливается сама, медленно. */
@media (hover: none) {
    .holo-rune::before {
        opacity: .1;
        animation: holo-drift 7s ease-in-out infinite alternate;
    }
}
@keyframes holo-drift {
    from { background-position: 10% 20%; }
    to { background-position: 90% 80%; }
}

@media (max-width: 760px) {
    .rune-day { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
    .holo-rune { padding: 12px 8px 14px; border-radius: 16px; }
    .holo-rune .glyph { font-size: 60px; }
    .holo-rune-name { font-size: 16px; }
    .holo-rune-system { font-size: 9px; letter-spacing: 1px; }
    .rune-day .actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 390px) {
    .rune-day { grid-template-columns: 1fr; }
    .holo-rune { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .holo-rune { transform: none; transition: none; }
    .holo-rune::before { animation: none; opacity: .05; }
    .holo-rune::after { display: none; }
}