:root {
    --page-bg: #efece5;
    --frame-bg: #fbfaf7;
    --text: #2c2c2b;
    --text-dim: #7d7a75;
    --border: #e6e5e3;
    --accent: #46a171;
    --accent-dark: #35835a;
    --accent-soft: #e8f1ec;
    --radius: 26px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { min-height: 100%; }
  body {
    background: var(--page-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: 36px 24px;
  }
  /* ================= FRAME ================= */
  .frame {
    position: relative;
    width: 100%;
    max-width: 1020px;
    height: 580px;
    background: var(--frame-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60,50,30,0.06), 0 20px 50px rgba(60,50,30,0.10);
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }
  /* ---------- Illustration (right side) ---------- */
  .bg-wrap {
    position: absolute;
    inset: -2.5%;
    transform: translate(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px));
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 0;
  }
  .bg {
    position: absolute;
    inset: 0;
    background: url("{{ asset('img/beranda-hero.jpg') }}");
    background-size: cover;
    background-position: 78% 62%;
    animation: breathe 26s ease-in-out infinite alternate;
  }
  @keyframes breathe {
    from { transform: scale(1.01); }
    to   { transform: scale(1.05); }
  }
  .scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(251,250,247,0.96) 0%, rgba(251,250,247,0.86) 34%, rgba(251,250,247,0) 62%);
  }
  /* ---------- Border light trace (hijau lembut) ---------- */
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  .frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 1px;
    background: conic-gradient(from var(--angle) at 50% 50%,
      transparent 0deg, transparent 300deg,
      rgba(70,161,113,0.75) 330deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: bordertrace 10s linear infinite;
    z-index: 4;
    pointer-events: none;
  }
  @keyframes bordertrace { to { --angle: 360deg; } }
  /* ---------- Decorative SVG ---------- */
  .paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px));
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  /* Siklus: masuk dari kiri → berhenti sebentar → keluar ke kanan */
  .draw {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1600 1600;
    stroke-dashoffset: 1600;
    animation: travel 10s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  }
  .draw.d2 { animation-delay: 1.6s; animation-duration: 11s; }
  @keyframes travel {
    0%   { stroke-dashoffset: 1600; }
    36%  { stroke-dashoffset: 0; }
    52%  { stroke-dashoffset: 0; }
    88%  { stroke-dashoffset: -1600; }
    100% { stroke-dashoffset: -1600; }
  }
  .ring {
    fill: none;
    transform-origin: center;
    transform-box: fill-box;
    animation: spin 30s linear infinite;
  }
  .ring.slow { animation-duration: 46s; animation-direction: reverse; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .node {
    animation: pulse 3s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  .node.n2 { animation-delay: 1.1s; }
  @keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.5); }
  }
  .spark {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: sparkrise 8s linear infinite;
  }
  .spark.s2 { animation-delay: 2.6s; animation-duration: 9.5s; }
  .spark.s3 { animation-delay: 5s; animation-duration: 7.5s; }
  @keyframes sparkrise {
    0%   { transform: translateY(0);     opacity: 0; }
    12%  { opacity: 0.7; }
    60%  { opacity: 0.35; }
    100% { transform: translateY(-90px); opacity: 0; }
  }