/* ==========================================================================
   LESESOMMER 2026
   LAYOUT.CSS
   ========================================================================== */

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

body{
    font-family:var(--font-base);
    font-size:var(--font-size-base);
    line-height:var(--line-height-base);
    color:var(--color-text);
    background:var(--color-sky);
}

#lesesommer{
    position:relative;
    width:100%;
    height:100svh;
    overflow:hidden;
    background:var(--color-sky);
}

/* Header */

#header{
    position:absolute;
    top:0;
    left:0;
    z-index:var(--z-header);
    width:100%;
    height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--header-padding-x);
    pointer-events:none;
}

.logo,
#navigation{
    pointer-events:auto;
}

.logo img,
#logo{
    width:var(--logo-width);
    height:auto;
}

/* Navigation */

#navigation{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}

#navigation a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 var(--space-4);
    border-radius:var(--radius-round);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-bold);
    color:var(--color-text);
    background:rgba(255,255,255,.72);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px);
}

/* Hero */

#hero{
    position:absolute;
    top:calc(var(--header-height) + var(--space-8));
    left:var(--section-padding-x);
    z-index:20;
    width:min(520px,calc(100% - (var(--section-padding-x) * 2)));
    pointer-events:none;
}

#hero-headline{
    font-family:var(--font-heading);
    font-size:clamp(2.25rem,5vw,var(--font-size-xxl));
    line-height:var(--line-height-tight);
    font-weight:var(--font-weight-black);
    color:var(--color-text);
    margin-bottom:var(--space-4);
}

#hero-text{
    max-width:440px;
    font-size:var(--font-size-md);
    line-height:var(--line-height-base);
    color:var(--color-white);
    margin-bottom:var(--space-6);

    text-shadow:
        0 1px 2px rgba(0,0,0,.45),
        0 2px 10px rgba(0,0,0,.18);
}

#hero-button{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--button-height);
    padding:0 var(--button-padding-x);
    border-radius:var(--button-radius);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-light);
    background:var(--color-primary);
    box-shadow:var(--shadow-medium);
    transition:
        transform var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

#hero-button:hover{
    background:var(--color-primary-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    pointer-events:auto;
}

#hint-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    flex:0 0 48px;

    border-radius:50%;
    color:var(--color-text-light);
    background:rgba(255,255,255,.24);

    border:2px solid rgba(255,255,255,.8);

    box-shadow:
        0 8px 24px rgba(35,45,55,.18),
        0 0 18px rgba(255,190,70,.35);

    backdrop-filter:blur(10px);

    font-size:1.5rem;
    line-height:1;

    transition:
        transform var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

#hint-toggle:hover{
    transform:translateY(-2px) scale(1.04);
    background:rgba(255,255,255,.38);

    box-shadow:
        0 12px 28px rgba(35,45,55,.22),
        0 0 24px rgba(255,190,70,.6);
}

#hint-toggle[aria-pressed="true"]{
    color:var(--color-text);
    background:var(--color-sun);

    box-shadow:
        0 10px 28px rgba(35,45,55,.22),
        0 0 20px rgba(255,190,70,.85),
        0 0 42px rgba(255,170,40,.45);
}

.audio-controls{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.45);
    padding:0 0.75rem;
    border-radius:999px;
    min-height:48px;
}

.audio-controls button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:var(--color-text);
    font-size:1rem;
    cursor:pointer;
    transition:transform var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.audio-controls button:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,1);
}

.audio-controls label{
    color:var(--color-text);
    font-size:0.85rem;
    white-space:nowrap;
}

@media (max-width: 768px) {
    .audio-controls label {
        display: none;
    }

    #hero-button {
        line-height: 1.15;
        padding: 0.9rem 1rem;
        min-height: auto;
    }

    .hero-actions {
        gap: var(--space-2);
    }
}

.audio-controls input[type="range"]{
    width:120px;
    accent-color:var(--color-primary);
}

/* Scene */

#scene{
    position:relative;
    z-index:var(--z-scene);
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
}

#background{
    position:absolute;
    left:0;
    top:0;
    z-index:var(--z-background);
    width:1920px;
    height:1080px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;
    pointer-events:none;
    will-change:left,top,width,height;
}

#background::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 20% 22%, rgba(255,235,155,0.24) 0%, transparent 24%),
        radial-gradient(circle at 80% 15%, rgba(255,220,120,0.18) 0%, transparent 18%),
        radial-gradient(circle at 52% 85%, rgba(255,240,210,0.16) 0%, transparent 22%);
    background-repeat:no-repeat;
    mix-blend-mode:screen;
    opacity:.96;
}

#background::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 34%),
        radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 24%);
    background-size:12px 12px, 22px 22px;
    background-position:14% 12%, 68% 28%;
    opacity:.18;
    animation:summerDustFloat 16s linear infinite;
}

@keyframes summerDustFloat{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(5%, -8%);
    }
    100%{
        transform:translate(0,0);
    }
}

#objects{
    position:absolute;
    inset:0;
    z-index:var(--z-object);
    width:100%;
    height:100%;
    pointer-events:none;
}

.scene-object{
    position:absolute;
    display:block;
    width:auto;
    height:auto;
    pointer-events:auto;
    user-select:none;
    -webkit-user-drag:none;
    transform-origin:center center;
    will-change:transform;
}

.scene-object img{
    width:100%;
    height:auto;
    filter:drop-shadow(var(--shadow-object));
}

.scene-object button{
    position:relative;
    display:block;
    width:100%;
    min-width:var(--hotspot-min-size);
    min-height:var(--hotspot-min-size);
    cursor:pointer;
}

.scene-object button:focus-visible{
    outline:3px solid var(--color-primary);
    outline-offset:6px;
    border-radius:var(--radius-md);
}

/* Footer */

#footer{
    position:absolute;
    left:0;
    bottom:0;
    z-index:40;
    width:100%;
    padding:.70rem var(--section-padding-x);
    text-align:center;
    background:rgba(255,255,255,.45);
    backdrop-filter:blur(10px);
}

#footer-text{
    font-size:var(--font-size-sm);
    line-height:1.2;
    color:var(--color-muted);
}

/* Utility */

.is-hidden{
    display:none !important;
}

.is-visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}