/* ===== Akses Email — v2 shared styles ===== */

body { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }

/* Gradients */
.gradient-blue-main { background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%); }
.gradient-blue-light { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%); }
.gradient-blue-vibrant { background: linear-gradient(135deg, #06b6d4 0%, #0284c7 50%, #1d4ed8 100%); }
.text-gradient { background: linear-gradient(120deg, #0ea5e9, #6366f1 60%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Glass card (no backdrop-filter — keeps long pages light) */
.card-3d {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px rgba(2, 32, 71, .05), 0 12px 28px rgba(2, 32, 71, .06), 0 30px 60px rgba(2, 32, 71, .04);
    transition: transform .3s ease, box-shadow .3s ease;
}
.dark .card-3d {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .3), 0 20px 45px rgba(0, 0, 0, .35);
}
.card-hover:hover { transform: translateY(-4px); }

/* Aurora ambient background — STATIC (painted once, no per-frame cost) */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .45; }
.dark .blob { opacity: .32; }
.blob-1 { width: 42vw; height: 42vw; background: #38bdf8; top: -8vw; left: -6vw; }
.blob-2 { width: 38vw; height: 38vw; background: #6366f1; top: 20vh; right: -10vw; }
.blob-3 { width: 34vw; height: 34vw; background: #22d3ee; bottom: -12vw; left: 25vw; }
.grid-overlay {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(2,132,199,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(2,132,199,.05) 1px, transparent 1px);
    background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
.dark .grid-overlay { background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px); }

/* Keyframe utilities */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 3s ease-in-out infinite; }
/* Gentle icon motion (transform-only = very light) */
@keyframes icon-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(4deg); } }
.icon-bob { animation: icon-bob 3.2s ease-in-out infinite; }
@keyframes icon-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.icon-pulse { animation: icon-pulse 2.4s ease-in-out infinite; }
@keyframes slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slide-up .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes bounce-in { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
.animate-bounce-in { animation: bounce-in .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.25); } 70% { transform: scale(1); } }
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes shine { to { background-position: 200% center; } }
.shimmer-text {
    background: linear-gradient(90deg,#1e293b 0%,#1e293b 40%,#38bdf8 50%,#1e293b 60%,#1e293b 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite;
}
.dark .shimmer-text { background: linear-gradient(90deg,#e2e8f0 0%,#e2e8f0 40%,#38bdf8 50%,#e2e8f0 60%,#e2e8f0 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; }

/* Stagger reveal */
.stagger > * { opacity: 0; animation: slide-up .5s cubic-bezier(.22,1,.36,1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .2s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .3s; }

/* Code (api-docs) */
.code-block { font-family: 'Fira Code', ui-monospace, monospace; }
.field-name { color: #60a5fa; }
.field-string { color: #34d399; }
.field-bool { color: #f472b6; }
.field-null { color: #94a3b8; }
.comment { color: #64748b; font-style: italic; }

/* Timeline (info-update) */
.timeline-line { position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 2px; background: linear-gradient(to bottom, #3b82f6, #06b6d4, #10b981); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); }

/* Respect reduced-motion for big entrance/scroll motion only.
   Gentle icon motion is kept so the UI still feels alive. */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-up, .animate-bounce-in, .stagger > * {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
}