/* =========================================================
   KENANGAN X.3 — STYLESHEET
   Tema: Elegan, gelap-marun, foto full-bleed nyambung
   Font: Cormorant Garamond (display) + Lato (body) + Great Vibes (script)
   ========================================================= */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  overflow-x:hidden;
  background:#130a0e;
  color:#f5d8e2;
  font-family:'Lato', sans-serif;
  font-weight:300;
}
img { display:block; width:100%; height:100%; object-fit:cover; }
button { font-family:inherit; border:none; background:none; cursor:pointer; }

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:         #130a0e;
  --bg2:        #1d0f16;
  --rose:       #c9637a;
  --rose-light: #f0a0b8;
  --rose-pale:  #fde8ef;
  --gold:       #d4a96a;
  --text:       #f5d8e2;
  --text-dim:   #b89099;

  --f-display: 'Cormorant Garamond', serif;
  --f-script:  'Great Vibes', cursive;
  --f-body:    'Lato', sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
}

/* =========================================================
   LOADING
   ========================================================= */
#loading-screen {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg);
  transition: opacity .9s ease, transform .9s ease;
}
#loading-screen.hide { opacity:0; transform:translateY(-20px); pointer-events:none; }

.ld-flower {
  font-size:3.2rem;
  animation: spin-bloom 1.5s ease-in-out infinite;
}
@keyframes spin-bloom {
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%    { transform:scale(1.35) rotate(15deg); }
}
.ld-text {
  margin-top:1.2rem;
  font-family: var(--f-script);
  font-size:2rem;
  color: var(--rose-light);
  letter-spacing:2px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position:relative;
  width:100%; height:100svh;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

#bg-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Veil: gelap bagian bawah agar blend ke konten */
.hero-veil {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(19,10,14,.1)  0%,
      rgba(19,10,14,.3) 50%,
      rgba(19,10,14,.95) 100%);
  z-index:1;
}

#particle-canvas {
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
}

#play-trigger {
  position:absolute; z-index:20;
  width:72px; height:72px; border-radius:50%;
  border:1.5px solid var(--rose-light);
  background:rgba(19,10,14,.5);
  backdrop-filter:blur(8px);
  color:var(--rose-light); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  animation:pulse-r 2s ease-in-out infinite;
}
#play-trigger.hidden { display:none; }
@keyframes pulse-r {
  0%,100%{ box-shadow:0 0 0 0 rgba(201,99,122,.5); }
  50%    { box-shadow:0 0 0 16px rgba(201,99,122,0); }
}

.hero-body {
  position:relative; z-index:10;
  text-align:center; padding:0 1.5rem; max-width:720px;
}

.hero-tag {
  font-family:var(--f-body);
  font-size:.72rem; letter-spacing:5px;
  color:var(--rose-light); text-transform:uppercase;
  margin-bottom:1.2rem;
}

.hero-title {
  font-family:var(--f-display);
  font-size:clamp(3rem,9vw,6.5rem);
  font-weight:300;
  color:#fff;
  line-height:1.05;
  min-height:1.1em;
  text-shadow: 0 2px 40px rgba(201,99,122,.35);
  letter-spacing:2px;
}

.hero-sub {
  margin-top:1rem;
  font-family:var(--f-script);
  font-size:clamp(1.2rem,3.5vw,1.9rem);
  color:var(--rose-light);
  min-height:1.5em;
}

.hero-line {
  width:48px; height:1px;
  background:linear-gradient(to right, transparent, var(--rose), transparent);
  margin:1.8rem auto 1rem;
}

.hero-year {
  font-family:var(--f-body);
  font-size:.75rem; letter-spacing:4px;
  color:var(--text-dim);
}

/* Typewriter cursor */
.tw-cursor {
  display:inline-block; color:var(--rose);
  animation:blink .85s infinite;
}
.tw-cursor.done { animation:none; opacity:0; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Scroll chevron */
.hero-scroll {
  position:absolute; bottom:1.8rem; left:50%;
  transform:translateX(-50%); z-index:10;
}
.hero-scroll span {
  display:block; width:1px; height:48px;
  background:linear-gradient(to bottom, var(--rose-light), transparent);
  animation:scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line {
  0%  { transform:scaleY(0); transform-origin:top; opacity:1; }
  50% { transform:scaleY(1); transform-origin:top; opacity:1; }
  51% { transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* =========================================================
   MEMORY ROWS — foto full-bleed nyambung bg
   ========================================================= */
.mem {
  position:relative;
  width:100%;
  min-height:75vh;
  display:grid;
  overflow:hidden;
  opacity:0; transform:translateY(36px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.mem.in-view { opacity:1; transform:translateY(0); }

/* .left → foto kiri, teks kanan */
.mem.left  { grid-template-columns: 52% 48%; }
/* .right → teks kiri, foto kanan */
.mem.right { grid-template-columns: 48% 52%; }

.mem.left  .mem-visual { order:1; }
.mem.left  .mem-copy   { order:2; }
.mem.right .mem-visual { order:2; }
.mem.right .mem-copy   { order:1; }

/* --- FOTO --- */
.mem-visual {
  position:relative; overflow:hidden;
}
.mem-visual img {
  transition:transform .9s var(--ease);
}
.mem:hover .mem-visual img { transform:scale(1.05); }

/* fade kanan (foto di kiri) */
.mem-fade-r {
  position:absolute; inset:0;
  background: linear-gradient(to right,
    transparent 35%,
    rgba(19,10,14,.7) 70%,
    var(--bg) 100%
  );
}
/* fade kiri (foto di kanan) */
.mem-fade-l {
  position:absolute; inset:0;
  background: linear-gradient(to left,
    transparent 35%,
    rgba(19,10,14,.7) 70%,
    var(--bg) 100%
  );
}

/* fade atas & bawah foto */
.mem-visual::before,
.mem-visual::after {
  content:''; position:absolute; left:0; right:0;
  height:28%; z-index:2; pointer-events:none;
}
.mem-visual::before {
  top:0;
  background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
.mem-visual::after {
  bottom:0;
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* --- TEKS --- */
.mem-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:3.5rem 3.5rem 3.5rem 2.5rem;
  background:var(--bg); position:relative; z-index:5;
}
.mem.right .mem-copy {
  padding:3.5rem 2.5rem 3.5rem 3.5rem;
}

.mem-label {
  display:inline-block;
  font-size:.68rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--rose); margin-bottom:1.4rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(201,99,122,.3);
}

.mem-text {
  font-family:var(--f-display);
  font-size:clamp(1.45rem,2.4vw,2.05rem);
  font-weight:300;
  font-style:italic;
  line-height:1.65;
  color:var(--rose-pale);
  min-height:2.5em;
}

.stw-cursor {
  display:inline-block; color:var(--rose);
  animation:blink .85s infinite;
}
.stw-cursor.done { opacity:0; animation:none; }

/* Garis tipis pemisah antar mem */
.mem + .mem::before {
  content:none;
}

/* =========================================================
   GURU SECTION — foto full width + teks di bawah
   Style: majalah/editorial
   ========================================================= */
.mem-guru {
  position:relative;
  width:100%;
  overflow:hidden;
  opacity:0; transform:translateY(36px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.mem-guru.in-view { opacity:1; transform:translateY(0); }

.guru-visual {
  position:relative;
  width:100%; height:85vh;
  overflow:hidden;
}
.guru-visual img {
  object-position:center top;
  transition:transform 1s var(--ease);
}
.mem-guru:hover .guru-visual img { transform:scale(1.04); }

/* Veil bawah foto guru — blend ke copy di bawahnya */
.guru-veil {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(19,10,14,.05) 0%,
      rgba(19,10,14,.15) 50%,
      rgba(19,10,14,.98) 100%
    );
}

/* Teks guru di bawah foto, overlap sedikit */
.guru-copy {
  position:relative;
  z-index:10;
  background:var(--bg);
  padding:3.5rem clamp(1.5rem,8vw,8rem) 5rem;
  text-align:center;
  max-width:860px;
  margin:0 auto;
}

/* Pull teks naik agar sedikit overlap foto */
.guru-copy { margin-top:-6rem; }

.guru-tag {
  display:block;
  font-size:.7rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--rose); margin-bottom:1.5rem;
}

.guru-title {
  font-family:var(--f-display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:300;
  color:var(--rose-pale);
  margin-bottom:2rem;
  line-height:1.1;
}

.guru-text {
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:300;
  font-style:italic;
  line-height:1.85;
  color:var(--text);
  min-height:3em;
  max-width:680px;
  margin:0 auto;
}

.guru-sign {
  margin-top:2.5rem;
  font-family:var(--f-script);
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--rose-light);
}

/* Dekorasi ornamen tipis di atas guru section */
.mem-guru::before {
  content:'✦ ✦ ✦';
  display:block;
  text-align:center;
  font-size:.8rem;
  letter-spacing:12px;
  color:var(--rose);
  padding:2.5rem 0 0;
  opacity:.5;
}

/* =========================================================
   CLOSING
   ========================================================= */
.closing {
  padding:7rem 1.5rem;
  background:var(--bg2);
  text-align:center;
  position:relative; overflow:hidden;
}

/* Watermark */
.closing::after {
  content:'X.3';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-display);
  font-size:22rem; font-weight:600;
  color:var(--rose);
  opacity:.04;
  pointer-events:none;
  white-space:nowrap;
}

.closing-wrap {
  position:relative; z-index:2;
  max-width:600px; margin:0 auto;
  opacity:0; transform:translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.closing-wrap.in-view { opacity:1; transform:translateY(0); }

.closing-tag {
  font-size:.7rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--rose); margin-bottom:1.5rem;
}

.closing-title {
  font-family:var(--f-display);
  font-size:clamp(2.2rem,6vw,4rem);
  font-weight:300;
  color:var(--rose-pale);
  line-height:1.15;
  margin-bottom:2rem;
}
.closing-title em {
  font-style:italic;
  color:var(--rose-light);
}

.closing-divider {
  width:40px; height:1px;
  background:linear-gradient(to right, transparent, var(--rose), transparent);
  margin:0 auto 2.5rem;
}

.closing-body {
  font-size:1.05rem;
  line-height:2;
  color:var(--text-dim);
  margin-bottom:2rem;
}

.closing-sign {
  font-family:var(--f-script);
  font-size:clamp(1.6rem,4vw,2.2rem);
  color:var(--rose-light);
  margin-bottom:2.5rem;
}

.share-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 2rem;
  border-radius:999px;
  border:1px solid var(--rose);
  background:transparent;
  color:var(--rose-light);
  font-size:.88rem; letter-spacing:1.5px;
  text-transform:uppercase;
  transition: background .3s, color .3s, box-shadow .3s;
}
.share-btn:hover {
  background:var(--rose);
  color:#fff;
  box-shadow:0 6px 24px rgba(201,99,122,.4);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  text-align:center;
  padding:2rem 1rem 2.5rem;
  background:var(--bg);
  border-top:1px solid rgba(201,99,122,.1);
  font-size:.78rem;
  color:var(--text-dim);
  letter-spacing:1px;
}

/* =========================================================
   FLOATING UI
   ========================================================= */
.badge {
  position:fixed; left:1rem; bottom:1rem; z-index:60;
  background:rgba(29,15,22,.8);
  backdrop-filter:blur(12px);
  border:1px solid rgba(201,99,122,.25);
  border-radius:999px;
  padding:.4rem 1rem;
  font-family:var(--f-script);
  font-size:1.1rem;
  color:var(--rose-light);
  animation:float-y 3.5s ease-in-out infinite;
}
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.back-top {
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  width:40px; height:40px; border-radius:50%;
  background:rgba(29,15,22,.8);
  backdrop-filter:blur(12px);
  border:1px solid rgba(201,99,122,.25);
  display:flex; align-items:center; justify-content:center;
  color:var(--rose-light); font-size:.9rem;
  opacity:0; pointer-events:none;
  transition:opacity .4s, transform .4s;
}
.back-top.show { opacity:1; pointer-events:auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:640px) {
  /* Memory rows: stack vertikal */
  .mem, .mem.left, .mem.right {
    grid-template-columns:1fr;
    min-height:auto;
  }
  .mem .mem-visual,
  .mem.right .mem-visual { order:1; height:60vw; }
  .mem .mem-copy,
  .mem.right .mem-copy   { order:2; padding:2rem 1.5rem 2.5rem; }

  /* Pada mobile, fade ke bawah */
  .mem-fade-r,
  .mem-fade-l {
    background:linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
  }
  .mem-visual::before { display:none; }
  .mem-text { font-size:1.2rem; }

  /* Guru */
  .guru-visual { height:70vw; }
  .guru-copy { padding:2.5rem 1.5rem 4rem; margin-top:-4rem; }

  .closing::after { font-size:9rem; }
}

@media (min-width:641px) and (max-width:960px) {
  .mem { min-height:60vh; }
  .mem-copy, .mem.right .mem-copy { padding:2.5rem 2rem; }
  .guru-visual { height:65vh; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   INTRO SCREEN
   ========================================================= */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #130a0e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
#intro-screen.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* Kanvas bunga intro */
#intro-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Lingkaran cahaya tengah */
.intro-glow {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,99,122,.22) 0%, transparent 70%);
  animation: pulse-glow 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-glow {
  0%,100% { transform: scale(1);   opacity: .7; }
  50%      { transform: scale(1.2); opacity: 1;  }
}

.intro-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 0 24px;
}

.intro-emoji {
  font-size: 3.8rem;
  animation: float-em 3s ease-in-out infinite;
}
@keyframes float-em {
  0%,100% { transform: translateY(0);    }
  50%      { transform: translateY(-12px); }
}

.intro-title {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2.4rem, 8vw, 3.8rem);
  color: #f0a0b8;
  line-height: 1.2;
  text-shadow: 0 0 30px rgba(240,160,184,.45);
}

.intro-sub {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: clamp(.82rem, 3vw, 1rem);
  color: #b89099;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.intro-btn {
  margin-top: 10px;
  padding: 14px 38px;
  border-radius: 50px;
  border: 1.5px solid rgba(201,99,122,.55);
  background: rgba(201,99,122,.12);
  color: #f0a0b8;
  font-family: 'Lato', sans-serif;
  font-size: .95rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s, transform .2s;
  backdrop-filter: blur(6px);
  animation: btn-breathe 2.2s ease-in-out infinite;
}
@keyframes btn-breathe {
  0%,100% { box-shadow: 0 0 12px rgba(201,99,122,.2); }
  50%      { box-shadow: 0 0 28px rgba(201,99,122,.55); }
}
.intro-btn:hover  { background: rgba(201,99,122,.28); border-color: rgba(201,99,122,.9); transform: scale(1.04); }
.intro-btn:active { transform: scale(.97); }
.intro-btn::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.intro-btn:hover::before { transform: translateX(100%); }