/**
 * Night Reflection & Ink Drop – Stylesheet
 * Version: 1.0.0
 */

/* ─── Container ─────────────────────────────────────────────────────────── */

.nri-container {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 280px;
    background: #060e1f;
    cursor: crosshair;
    will-change: transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    /* Prevent iOS rubber-band scrolling inside the canvas */
    touch-action: none;
}

.nri-container canvas {
    display: block !important;
    width: 100%   !important;
    height: 100%  !important;
    outline: none;
    touch-action: none;
}

/* ─── Loading shimmer ───────────────────────────────────────────────────── */

.nri-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(10, 20, 50, 0) 0%,
        rgba(40, 80, 140, 0.3) 45%,
        rgba(80, 140, 220, 0.5) 50%,
        rgba(40, 80, 140, 0.3) 55%,
        rgba(10, 20, 50, 0) 100%
    );
    background-size: 200% 100%;
    animation: nri-shimmer 2.2s ease infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.nri-container.nri-ready::before,
.nri-container.nri-fallback::before {
    opacity: 0;
}

@keyframes nri-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Focus ring ────────────────────────────────────────────────────────── */

.nri-container:focus {
    outline: 3px solid #4fc3f7;
    outline-offset: 2px;
}
.nri-container:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Keyboard / tap hint tooltip ──────────────────────────────────────── */

.nri-container::after {
    content: 'Tap water to drop ink';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 10, 30, 0.65);
    color: #a8d8ea;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    z-index: 5;
    letter-spacing: 0.02em;
}
.nri-container.nri-ready::after {
    opacity: 0;
    animation: nri-hint 4s ease 1.5s forwards;
}
@keyframes nri-hint {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}
.nri-container:focus::after {
    content: 'Press Enter to drop ink';
    opacity: 1;
}

/* ─── Fallback ──────────────────────────────────────────────────────────── */

.nri-fallback { cursor: pointer; }
.nri-fallback img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nri-fallback-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nri-fallback:hover .nri-fallback-overlay,
.nri-fallback:focus .nri-fallback-overlay { opacity: 0 !important; }

/* ─── Error ─────────────────────────────────────────────────────────────── */

.nri-error {
    padding: 1em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 13px;
    margin: 0.5em 0;
}

/* ─── Elementor editor ──────────────────────────────────────────────────── */

.elementor-editor-active .nri-container { cursor: default; }

/* ─── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .nri-container::before { animation: none; opacity: 0; }
    .nri-container.nri-ready::after { animation: none; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .nri-container {
        cursor: pointer;
        min-height: 320px;
    }
    .nri-container::after { content: 'Tap water to drop ink'; }
}

@media screen and (max-width: 480px) {
    .nri-container { min-height: 240px; }
}

/* ─── WordPress alignment helpers ───────────────────────────────────────── */

.alignfull .nri-container {
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}