/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Variables */
:root {
    /* Colors */
    --bg-color: #f7f9fc;
    --paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
}

body {
    /* background-color moved to body::before */
    /* background-image moved to body::before for better mobile support */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Stack vertically to manage normal flow if needed, though we use fixed/absolute for sun */
    align-items: center;
    /* Center horizontally */
    padding-top: 10vh;
    /* Move lower (slightly lower than top) */
    position: relative;
    /* Context for absolute positioning if needed */
    overflow-x: hidden;
    /* Prevent horizontal scroll bar due to huge circle */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--bg-color);
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.scroll-spacer {
    /* Create a long page to allow scrolling */
    height: 500vh;
    width: 1px;
}


.site-logo {
    width: 90%;
    max-width: 600px;
    height: auto;
    z-index: 2;
    position: fixed;
    /* Keep it fixed on screen */
    top: 10vh;
    /* Maintain original visual position */
    left: 50%;
    transform: translateX(-50%);
}

/* New Rotating Sun ID */
.sun-wrapper-fixed {
    position: fixed;
    /* 
       Reverted to 60vh as requested ("better before").
       Adjusted padding in sun-content will ensure text visibility.
    */
    top: 60vh;
    left: 50%;
    transform: translateX(-50%);
    width: 200vw;
    height: 200vw;
    z-index: 1;
    pointer-events: none;
    /* Let clicks pass through if needed, but we might want text clickable */
}

.rotating-sun {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #e54d2e;

    /* 
       Vinyl Texture Refined:
       1. Stronger radial grooves (lines).
       2. Conic gradient for rotation.
       3. Noise acts as subtle grit, not dominant feature.
    */
    background-image:
        repeating-radial-gradient(circle at center,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0.1) 1.5px,
            rgba(0, 0, 0, 0) 2px),
        conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.07) 0deg,
            transparent 90deg,
            rgba(0, 0, 0, 0.07) 180deg,
            transparent 270deg,
            rgba(255, 255, 255, 0.07) 360deg),
        var(--paper-texture);

    /* 
       Blend modes:
       1. Radial Lines: Normal/Multiply to sit on top clearly.
       2. Conic: Overlay/Soft-light for lighting.
       3. Noise: Overlay.
    */
    background-blend-mode: multiply, overlay, overlay;

    position: relative;
    /* We will rotate this element via JS */
    will-change: transform;
    pointer-events: auto;
    /* Enable interaction on the sun itself */

    /* Anti-aliasing fixes for rotating edges */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    /* Forces better anti-aliasing in some browsers */
    outline: 1px solid transparent;
    /* Helps with jagged edges during rotation */
    -webkit-font-smoothing: antialiased;
}

.sun-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use flexbox to center horizontally and position from top via padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 
       12vh padding from the rim. 
       Since sun moved down (60vh), we might need less padding or more?
       If top is 60vh, visible hill is 40vh.
       Padding 12vh puts text at 60 + 12 = 72vh.
       Visible area is 0 to 100vh. Center: 50vh.
       Wait, Hill is at bottom. Top of sun is at 60vh.
       Text at 60 + 12 = 72vh.
       This is well within the screen (bottom 28%).
       "Contact us is showing" -> User liked it.
       So 12vh is likely fine.
    */
    padding-top: 12vh;
    text-align: center;
    color: white;
    /* pointer-events: none; */
    /* Optional: if we want clicks on sun but not empty space */
}

/* Typography for the sun content */
.sun-content .subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sun-content .title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* 
   Simplified Positioning:
   Container fills the sun.
   Item 1: 0 degrees. Top is Top.
   Item 2: 180 degrees. Top is Bottom.
*/

.item-1 {
    transform: rotate(0deg);
}

.item-2 {
    transform: rotate(180deg);
}