/* Cinematic Storyteller – Star Wars–style opening crawl */

.d2-haiku-container {
    /* layout */
    margin-top: 0; /* align with resized FPD canvas; no extra offset */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: auto; right: auto; bottom: auto;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    /* look & feel (theme-friendly) */
    text-align: center;
    background: none !important; /* no visible container */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 99999;          /* sit above the overlay content */
    pointer-events: none;    /* never block clicks */

    /* 3D perspective for tilted plane */
    perspective: 800px;
    -webkit-perspective: 800px;

    /* typography inherits so the text matches the loading theme */
    font-family: inherit;
    font-size: inherit;
    color: inherit;

    /* custom properties to fine‑tune the crawl */
    --crawl-tilt: 25deg;         /* stronger backwards tilt for Star Wars look */
    --crawl-width: 100%;         /* use full width for corner-to-corner base */
    --crawl-max-width: none;     /* unlimited */
    --crawl-gap: 1.8em;          /* slight tighten to avoid overlap */

    /* Viewport-relative fade: keep lines fully visible across most of the
       container and fade only near the very top. Because the container
       itself is not animated, the mask remains fixed relative to the
       visible viewport, so it always affects only the currently visible
       lines. */
    -webkit-mask-image: linear-gradient(to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 70%,
        rgba(255,255,255,0.35) 88%,
        rgba(255,255,255,0.2) 100%);
    mask-image: linear-gradient(to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 70%,
        rgba(255,255,255,0.35) 88%,
        rgba(255,255,255,0.2) 100%);
}

.d2-haiku-credits-inner {
    /* position the crawl column in the center bottom */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: var(--crawl-width);
    max-width: var(--crawl-max-width);
    margin-left: 0; margin-right: 0;
    transform-origin: center bottom;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.4,0,0.2,1);

    /* no clipping; keep full text visible */
    clip-path: none;
}

.d2-haiku-line {
    opacity: 1;
    margin: 0 0 var(--crawl-gap) 0;
    min-height: 1.2em;
    font-family: inherit;
    font-size: inherit; /* inherit exact size from status text */
    color: inherit !important; /* use theme color from progress message */
    -webkit-text-fill-color: inherit !important;
    -webkit-text-stroke: inherit !important;
    -webkit-text-stroke-color: inherit !important;
    -webkit-text-stroke-width: inherit !important;
    background: none;
    border: none;
    box-shadow: none;
    font-weight: inherit; /* match exact weight */
    text-shadow: inherit; /* match shadow/glow */
    letter-spacing: inherit; /* match tracking */
}

/* Emphasize the newest line entering from the bottom region */
.d2-haiku-credits-inner { counter-reset: d2line; }
.d2-haiku-credits-inner .d2-haiku-line { counter-increment: d2line; }

/* Optional: slight scale/weight emphasis for the bottom-most visible block */
@supports (animation-timeline: scroll()) {
  /* Not all browsers support scroll-linked animations yet; CSS mask already provides dynamic fade. */
}

@media (max-width: 768px) {
    .d2-haiku-container {
        font-size: 16px;
        max-width: 100vw;
        height: 100%;
        min-height: 100%;
        margin-top: 0; /* remove offset on tablet */
        --crawl-width: 100%;
        --crawl-max-width: none;
    }
}

@media (max-width: 480px) {
    .d2-haiku-container {
        font-size: 13px;
        max-width: 100vw;
        height: 100%;
        min-height: 100%;
        margin-top: 0; /* remove offset on mobile */
        --crawl-width: 100%;
        --crawl-max-width: none;
        --crawl-gap: 1.6em;
    }
}

@media (prefers-contrast: high) {
    .d2-haiku-container {
        background: rgba(140, 0, 255, 0.1);
        border: 2px solid rgba(243, 243, 243, 0.4);
        /* Do not override text color; let it inherit from the status text */
        color: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    .d2-haiku-container,
    .d2-haiku-line,
    .d2-haiku-credits-inner {
        transition: none !important;
        animation: none !important;
    }
}

.d2-haiku-container:focus { outline: none !important; }

/* Floating animation */
@keyframes d2-haiku-float {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-5deg) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-5deg) translateY(-15px);
    }
}

.d2-haiku-container.floating {
    animation: d2-haiku-float 6s ease-in-out infinite;
}

/* High contrast mode support */
@media (prefers-color-scheme: dark) {
    .d2-haiku-container {
        background: rgba(0, 0, 0, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
        /* Preserve theme color even in dark mode */
        color: inherit !important;
    }
}

/* Print styles */
@media print {
    .d2-haiku-container {
        display: none !important;
    }
}

/* Loading state */
.d2-haiku-container.loading::before { display: none !important; content: none !important; }

@keyframes d2-loading-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Subtle vignette top/bottom so nothing overlaps outside */
/* remove any previous vignettes */
.d2-haiku-container::before, .d2-haiku-container::after { display: none !important; }

/* Tilted Star‑Wars style crawl */
@keyframes d2-credits-crawl-tilted {
    0%   { transform: rotateX(var(--crawl-tilt)) translateY(100%) translateZ(0); }
    100% { transform: rotateX(var(--crawl-tilt)) translateY(-220%) translateZ(0); }
}
.d2-haiku-credits-inner.credits-scroll { animation: d2-credits-crawl-tilted var(--credits-duration, 70s) linear forwards; }

/* Fade out the whole container at the end */
.d2-haiku-container.fading-out {
    transition: opacity 1.2s cubic-bezier(0.4,0,0.2,1);
    opacity: 0;
}

/* Remove hardcoded style overrides so the haiku fully inherits from status text */