/* ===========================================================
   UNAMIQ — home page ("coming soon" hero)
   Only loaded on index.html. Depends on main.css for the
   reset, cursor, and nav already being in place.
=========================================================== */

:root{

    /* Desktop parallax offset, set by JS on mousemove */
    --parallax-x: 0px;
    --parallax-y: 0px;

    /* Mobile pan + pinch-zoom, set by JS on touch */
    --pan-x: 0px;
    --pan-y: 0px;
    --pan-scale: 1;

    /* Raw (smoothed) cursor position, used by the light-shift mask */
    --mouse-x: 50vw;
    --mouse-y: 50vh;

}

html, body{
    height:100%;
    overflow:hidden;
}

body{
    height:100dvh;
    touch-action:none; /* we handle pan/zoom ourselves */
}

/* ===========================================================
   BACKGROUND SCENES
   Four renders stacked exactly on top of each other (position
   + size set by JS from real pixel dimensions). Only one is
   opacity:1 at a time; JS toggles .active on a timer, and this
   transition is what produces the crossfade.
=========================================================== */

.bg-layer{
    position:fixed;
    top:50%;
    left:50%;
    z-index:1;

    max-width:none;
    max-height:none;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;

    opacity:0;
    transition:opacity 2s ease;

    will-change:transform, opacity;
}

.bg-layer.active{
    opacity:1;
}

/* ===========================================================
   LIGHT SHIFT
   A duplicate of the background, lifted slightly in brightness
   and contrast, masked to a soft circle that follows the
   cursor. Kept in exact alignment with .bg-layer by JS.
=========================================================== */

#lightshift{
    position:fixed;
    top:50%;
    left:50%;
    z-index:2;

    background-image:url("images/scene-1.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;

    filter:brightness(1.14) contrast(1.06) saturate(1.04);

    -webkit-mask-image:
        radial-gradient(circle 280px at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);
    mask-image:
        radial-gradient(circle 280px at var(--mouse-x) var(--mouse-y), black 0%, transparent 100%);

    opacity:.55;

    pointer-events:none;
    will-change:transform;
}

/* ===========================================================
   VIGNETTE
=========================================================== */

#vignette{
    position:fixed;
    inset:0;
    z-index:3;
    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.20) 75%,
            rgba(0,0,0,.50) 100%
        );
}

/* ===========================================================
   FILM GRAIN
=========================================================== */

#grain{
    position:fixed;
    inset:-50%;
    z-index:4;
    pointer-events:none;

    opacity:.04;

    background-image: radial-gradient(circle, white 1px, transparent 1px);
    background-size:5px 5px;

    mix-blend-mode:soft-light;

    animation: grainMove 10s steps(10) infinite;
}

@keyframes grainMove{
    0%   { transform:translate(0,0); }
    10%  { transform:translate(-2%,2%); }
    20%  { transform:translate(2%,-4%); }
    30%  { transform:translate(-4%,4%); }
    40%  { transform:translate(4%,-2%); }
    50%  { transform:translate(-2%,-4%); }
    60%  { transform:translate(4%,2%); }
    70%  { transform:translate(-4%,-2%); }
    80%  { transform:translate(2%,4%); }
    90%  { transform:translate(-2%,-2%); }
    100% { transform:translate(0,0); }
}

/* ===========================================================
   OVERLAY — just enough darkening at the bottom-left for the
   text to stay readable, nothing else.
=========================================================== */

#overlay{
    position:fixed;
    inset:0;
    z-index:5;
    pointer-events:none;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,0) 45%
    );
}

/* ===========================================================
   HERO TEXT — fixed position, always on top, never moves.
   Reveals with a soft blur-to-sharp + fade-up on load.
=========================================================== */

.hero{
    position:fixed;
    left:70px;
    bottom:65px;
    z-index:10;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    user-select:none;
}

.hero h1{
    font-size:clamp(3rem, 7vw, 7rem);
    font-weight:700;
    line-height:.9;
    letter-spacing:.22em;
    text-transform:uppercase;

    opacity:0;
    animation: revealUpFull 1.4s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay:.15s;
}

.hero h2{
    margin-top:18px;
    font-size:clamp(.9rem, 1vw, 1.2rem);
    font-weight:300;
    letter-spacing:.65em;
    text-transform:uppercase;

    opacity:0;
    animation: revealUp 1.6s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay:.55s;
}

@keyframes revealUp{
    from{ opacity:0; transform:translateY(24px); filter:blur(8px); }
    to{ opacity:.82; transform:translateY(0); filter:blur(0); }
}

@keyframes revealUpFull{
    from{ opacity:0; transform:translateY(24px); filter:blur(8px); }
    to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

@media(max-width:900px){

    .hero{ left:35px; bottom:35px; }
    .hero h1{ letter-spacing:.16em; }
    .hero h2{ margin-top:14px; letter-spacing:.42em; }

}

@media(max-width:600px){

    .hero{ left:24px; bottom:28px; }
    .hero h1{ font-size:2.6rem; }
    .hero h2{ font-size:.82rem; letter-spacing:.35em; }

}

/* ===========================================================
   STATUS BAR
=========================================================== */

#statusbar{
    position:fixed;
    right:32px;
    bottom:36px;
    z-index:10;

    display:flex;
    align-items:center;
    gap:10px;

    pointer-events:none;
}

#telemetry,
#telemetry-cursor{
    font-family:"Space Mono", monospace;
    font-size:.68rem;
    letter-spacing:.08em;
    color:rgba(255,255,255,.55);
    white-space:nowrap;
}

#telemetry-cursor{
    animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink{
    0%, 49%  { opacity:1; }
    50%, 100%{ opacity:0; }
}

.status-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    flex-shrink:0;

    background:rgba(255,255,255,.55);
    box-shadow:0 0 6px rgba(255,255,255,.35);

    animation: statusPulse 3.4s ease-in-out infinite;
}

@keyframes statusPulse{
    0%, 100% { opacity:.35; transform:scale(1); }
    50%      { opacity:.9;  transform:scale(1.3); }
}

@media(max-width:600px){

    #statusbar{ right:20px; bottom:20px; }

    #telemetry,
    #telemetry-cursor{ display:none; }

}