/* ============================================================
   KOWEB — Page 1  ("Panggung reveal")
   Font display : Bricolage Grotesque  |  Body : Plus Jakarta Sans
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
    --ink:      #26182b;   /* deep plum, bukan hitam kaku */
    --ink-soft: #7a6270;
    --red:      #f5333f;   /* scarlet KOWEB */
    --gold:     #ffb43c;   /* sorot lampu */
    --paper:    #fdeede;   /* peach hangat */

    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Panggung ---------- */
.page-1 {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(72% 52% at 50% 112%, rgba(255,180,60,.60) 0%, rgba(255,180,60,0) 62%),
        radial-gradient(60% 42% at 50% 122%, rgba(245,51,63,.20) 0%, rgba(245,51,63,0) 58%),
        linear-gradient(180deg, #fff5ea 0%, #fde9d6 56%, #fbe1cb 100%);
}

/* ---------- Judul ---------- */
.copy {
    position: relative;
    z-index: 3;
    margin-top: 11vh;
    padding: 0 5vw;
    text-align: center;
    pointer-events: none;
}

.kicker {
    margin: 0 0 0.35em;
    font-family: var(--font-body);
    font-size: clamp(16px, 2.8vw, 28px);
    font-weight: 700;
    color: var(--ink-soft);
}

.title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
.title-line { display: block; font-size: clamp(42px, 8.4vw, 104px); }

/* Coretan garis bawah di kata brand */
.title-brand { position: relative; display: inline-block; }
.swoosh {
    position: absolute;
    left: -2%;
    bottom: -0.24em;
    width: 104%;
    height: 0.32em;
    overflow: visible;
}
.swoosh path {
    fill: none;
    stroke: var(--red);
    stroke-width: 8;
    stroke-linecap: round;
}

/* ---------- Sorot lampu + lantai ---------- */
.decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.stage-glow {
    position: absolute;
    bottom: -8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(72vw, 680px);
    height: 66vh;
    background: radial-gradient(50% 56% at 50% 62%, rgba(255,206,122,.85) 0%, rgba(255,206,122,0) 70%);
    filter: blur(6px);
    animation: breath 5s ease-in-out infinite;
}

.stage-floor {
    position: absolute;
    bottom: 3.5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(46vw, 360px);
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(38,24,43,.22) 0%, rgba(38,24,43,0) 72%);
    filter: blur(3px);
}

/* ---------- Sparkle ---------- */
.spark {
    position: absolute;
    fill: var(--gold);
    filter: drop-shadow(0 3px 6px rgba(245,51,63,.18));
    animation: twinkle 3.2s ease-in-out infinite;
}
.spark-1 { width: 34px; top: 24%; left: 16%; fill: var(--red); animation-delay: 0s; }
.spark-2 { width: 22px; top: 15%; right: 20%; animation-delay: .5s; }
.spark-3 { width: 46px; top: 44%; right: 11%; animation-delay: 1.1s; }
.spark-4 { width: 18px; top: 56%; left: 11%; fill: var(--red); animation-delay: .3s; }
.spark-5 { width: 27px; top: 33%; left: 7%; animation-delay: 1.6s; }

/* ============================================================
   ANIMASI ORANG  (tidak diubah — tetap seperti sebelumnya)
   Total 4 detik, loop terus:
     0s-1.5s  agung-01 di tengah, 3x normal<->mirror (patah)
     1.5s-3s  agung-02 kiri-kanan dekat center, 3x (patah)
     3s-4s    agung-01 muncul lalu membesar mulus 1 detik
   ============================================================ */
.hero-person {
    position: absolute;
    z-index: 5;              /* paling tinggi: orang menimpa tulisan saat zoom */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(60vw, 420px);
    height: 45vh;
}

.hero-person img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    opacity: 0;
    transform-origin: bottom center;
    animation-duration: 4s;
    animation-timing-function: step-end;   /* patah, tanpa easing */
    animation-iteration-count: infinite;
}

.hero-image-1 { animation-name: agung1; }
.hero-image-2 { animation-name: agung2; }

/* Selektor sengaja lebih spesifik supaya easing-nya menang dari step-end */
.hero-person .hero-image-final {
    animation-name: agungFinal;
    animation-timing-function: ease-out;   /* membesar mulus */
}

@keyframes agung1 {
    0%      { opacity: 1; transform: scaleX(1); }
    6.25%   { opacity: 1; transform: scaleX(-1); }
    12.5%   { opacity: 1; transform: scaleX(1); }
    18.75%  { opacity: 1; transform: scaleX(-1); }
    25%     { opacity: 1; transform: scaleX(1); }
    31.25%  { opacity: 1; transform: scaleX(-1); }
    37.5%   { opacity: 0; transform: scaleX(1); }
    100%    { opacity: 0; transform: scaleX(1); }
}

@keyframes agung2 {
    0%      { opacity: 0; transform: translateX(0) scaleX(-1); }
    37.5%   { opacity: 1; transform: translateX(30%) scaleX(-1); }
    43.75%  { opacity: 1; transform: translateX(-30%) scaleX(1); }
    50%     { opacity: 1; transform: translateX(30%) scaleX(-1); }
    56.25%  { opacity: 1; transform: translateX(-30%) scaleX(1); }
    62.5%   { opacity: 1; transform: translateX(30%) scaleX(-1); }
    68.75%  { opacity: 1; transform: translateX(-30%) scaleX(1); }
    75%     { opacity: 0; transform: translateX(0) scaleX(-1); }
    100%    { opacity: 0; transform: translateX(0) scaleX(-1); }
}

@keyframes agungFinal {
    0%      { opacity: 0; transform: scale(1); }
    74.99%  { opacity: 0; transform: scale(1); }
    75%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 1; transform: scale(1.65); }
}

/* ---------- Motion ambient ---------- */
@keyframes twinkle {
    0%, 100% { opacity: .3;  transform: scale(.8) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.1) rotate(18deg); }
}
@keyframes breath {
    0%, 100% { opacity: .82; }
    50%      { opacity: 1; }
}

/* ---------- Responsif ---------- */
@media (max-width: 640px) {
    .copy { margin-top: 13vh; }
    .title-line { font-size: clamp(38px, 13vw, 72px); }
    .hero-person { width: 74vw; height: 42vh; }
}

/* ---------- Hormati preferensi kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    .spark, .stage-glow { animation: none; }
}