/* ============================================
   Custom Properties
   ============================================ */
:root {
    --accent-h: 200;
    --accent-s: 35;
    --accent-l: 45;
    --bg: #f5f5f5;
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; user-select: none; }

/* ============================================
   Scroll Container
   ============================================ */
.scroll-container {
    position: relative;
}

/* ============================================
   Page – sticky full viewport
   ============================================ */
.page {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: hsl(var(--accent-h), calc(var(--accent-s)*1%), calc(var(--accent-l)*1%));
    transition: background-color .35s;
}
.pixel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   White Area – white circle from below
   ============================================ */
.white-area {
    position: absolute;
    top: 48vh;
    left: 0;
    width: 100%;
    bottom: 0;
    background: #ffffff;
    z-index: 2;
    text-align: center;
    padding: 0.5vh 20px 0;
}
/* SVG dome — clean symmetric cubic Bezier, stretches to any aspect ratio */
.dome-svg {
    position: absolute;
    left: 0;
    top: -18vh;
    width: 100%;
    height: calc(18vh + 1px);
    display: block;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

/* ============================================
   Navbar – on top of arc
   ============================================ */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 18px 24px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo-academy {
    height: 64px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* ============================================
   Hero Title – light italic serif
   ============================================ */
.hero-title {
    position: absolute;
    top: 2vh;
    left: 0;
    right: 0;
    /* margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content; */
    z-index: 30;
    text-align: center;
    font-family: 'Instrument Serif', 'Georgia', serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
    color: #fff;
    padding: 0 20px;
    margin: 0;
}

/* ============================================
   White Area – content below arc
   ============================================ */
/* (white-area is now defined above with .page) */
/*
.white-area {
    position: absolute;
    top: 36vh;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}
*/

.processo {
    margin: 0 auto 20px auto;
    width: -moz-fit-content;
    width: fit-content;
}
.processo h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.turma {
    font-size: clamp(1.275rem, 2.85vw, 2.075rem);
    color: #666;
    margin-bottom: 16px;
}
.btn-edital {
    display: inline-block;
    padding: 10px 40px;
    border: 2px solid #1a1a1a;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 500;
    color: #1a1a1a;
    transition: all .25s;
    background: transparent;
}
.btn-edital:hover {
    background: #1a1a1a;
    color: #fff;
    transform: translateY(-1px);
}

.inscricoes {
    margin: 8px auto 0 auto;
    width: -moz-fit-content;
    width: fit-content;
}
.inscricoes-label {
    font-size: .8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}
.inscricoes-date {
    font-size: clamp(.95rem, 1.8vw, 1.3rem);
    font-weight: 700;
    color: #1a1a1a;
}

/* ============================================
   Stickers – scattered across the page
   ============================================ */
.sticker {
    position: absolute;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: grab;
    transition: transform 0.1s linear; /* Smooth visual updates */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.sticker.dragging {
    cursor: grabbing;
    z-index: 100;
    transition: none; /* No delay while dragging */
}
.sticker img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter:
        drop-shadow(2px 0 0 #fff)
        drop-shadow(-2px 0 0 #fff)
        drop-shadow(0 2px 0 #fff)
        drop-shadow(0 -2px 0 #fff)
        drop-shadow(2px 2px 0 #fff)
        drop-shadow(-2px -2px 0 #fff)
        drop-shadow(2px -2px 0 #fff)
        drop-shadow(-2px 2px 0 #fff)
        drop-shadow(4px 6px 6px rgba(0,0,0,.28));
}
.sticker span {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: .8rem;
    color: #999;
    margin-top: 10px;
    white-space: nowrap;
}

/* Animação CSS removida em favor da simulação física via p5.js */

/* Sticker positions & rotations – desktop first
   Placed to match prototype: spread around edges */
/* All stickers positioned only inside the white arc (below dome peak) */
.s1  { --rot: -8deg;  width: 95px; top: 48%; left: 4%;   animation-delay: 0s; }
.s2  { --rot: 12deg;  width: 75px; top: 44%; right: 6%;  animation-delay: -0.7s; }
.s3  { --rot: -5deg;  width: 70px; top: 70%; left: 3%;   animation-delay: -1.4s; }
.s4  { --rot: 6deg;   width: 60px; top: 64%; left: 18%;  animation-delay: -2.1s; }
.s5  { --rot: -10deg; width: 80px; top: 58%; right: 5%;  animation-delay: -2.8s; }
.s6  { --rot: 5deg;   width: 85px; top: 82%; left: 42%;  animation-delay: -3.5s; }
.s7  { --rot: -3deg;  width: 58px; top: 84%; left: 12%;  animation-delay: -0.3s; }
.s8  { --rot: 15deg;  width: 55px; top: 84%; right: 4%;  animation-delay: -1s; }
.s9  { --rot: -12deg; width: 50px; top: 86%; right: 22%; animation-delay: -1.8s; }
.s10 { --rot: 8deg;   width: 68px; top: 76%; left: 22%;  animation-delay: -2.5s; }
.s11 { --rot: -6deg;  width: 78px; top: 56%; right: 16%; animation-delay: -3.2s; }
.s12 { --rot: 10deg;  width: 50px; top: 72%; right: 30%; animation-delay: -4s; }
.s13 { --rot: -4deg;  width: 62px; top: 74%; left: 38%;  animation-delay: -0.5s; }
.s14 { --rot: 7deg;   width: 55px; top: 52%; left: 32%;  animation-delay: -1.2s; }

/* ============================================
   MOBILE ≤ 768px – adjust sticker sizes + positions
   ============================================ */
@media (max-width: 768px) {
    .hero-title {
        top: 80px;
        font-size: clamp(1.6rem, 7vw, 2.6rem);
    }
    .white-area {
        top: 36vh;
        padding-top: 1vh;
    }
    .dome-svg {
        top: -14vh;
        height: 14vh;
    }
    .navbar { padding: 14px 16px; }
    .logo-academy { height: 42px; }

    /* Mobile — spread across arc, avoiding central text column (roughly 25%-75%) */
    .s1  { width: 60px; top: 36%; left: -2%;  }
    .s2  { width: 54px; top: 34%; right: -2%; }
    .s3  { width: 48px; top: 50%; left: -3%;  }
    .s4  { width: 44px; top: 84%; left: 28%;  }
    .s5  { width: 52px; top: 48%; right: -2%; }
    .s6  { width: 56px; top: 68%; left: 34%;  }
    .s7  { width: 42px; top: 68%; left: -2%;  }
    .s8  { width: 42px; top: 66%; right: -2%; }
    .s9  { width: 38px; top: 84%; right: 28%; }
    .s10 { width: 46px; top: 82%; left: 2%;   }
    .s11 { width: 48px; top: 82%; right: 2%;  }
    .s12 { width: 36px; top: 90%; left: 14%;  }
    .s13 { width: 40px; top: 90%; right: 14%; }
    .s14 { width: 38px; top: 41%; left: 12%;  }
}

/* ============================================
   SMALL MOBILE ≤ 400px
   ============================================ */
@media (max-width: 400px) {
    .hero-title { top: 76px; }
    .white-area { top: 36vh; }
    .processo h2 { font-size: 1.25rem; }
    .turma { font-size: 1.125rem; margin-bottom: 12px; }
    .btn-edital { padding: 8px 30px; font-size: .82rem; }
    .sticker span { font-size: .55rem; }
}

/* ============================================
   SHORT SCREENS
   ============================================ */
@media (max-height: 600px) {
    .hero-title { top: 2vh; font-size: 1.5rem; }
    .white-area { top: 32vh; padding-top: 2vh; }
    .dome-svg { top: -12vh; height: 12vh; }
    .processo h2 { font-size: 1.15rem; }
    .turma { font-size: 1rem; margin-bottom: 10px; }
}

/* ============================================
   LARGE DESKTOP ≥ 1200px
   ============================================ */
/* ============================================
   INTERMEDIATE 769px – 1199px (tablets / squarish)
   ============================================ */
@media (min-width: 769px) and (max-width: 1199px) {
    .hero-title {
        top: 100px;
        font-size: clamp(2.2rem, 5vw, 3rem);
    }
}

@media (min-width: 1200px) {
    .hero-title { top: 2vh; font-size: 3.8rem; }
    .white-area { top: 40vh; }
    .dome-svg { top: -18vh; height: 18vh; }
    .s1  { width: 120px; }
    .s2  { width: 95px; }
    .s3  { width: 88px; }
    .s5  { width: 100px; }
    .s6  { width: 110px; }
    .s11 { width: 100px; }
}