/* ForteProject.ID — gaya tambahan di luar utilitas Tailwind */
:root {
  --brand: #ff9045;
  --ink: #000000;
  --mist: #f2f2f3;
  --paper: #ffffff;
  color-scheme: light;
}
html.dark { color-scheme: dark; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand); color: #000; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(127,127,127,.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(127,127,127,.35); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.96); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal-scale.in { opacity: 1; transform: none; }

/* Hero headline word animation */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.word > span { display: inline-block; transform: translateY(110%); animation: wordUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes wordUp { to { transform: none; } }

.scribble path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.2s .9s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Marquee */
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Floating */
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 9s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(12px) rotate(var(--r,0deg)); } }

/* Pulse ring untuk tombol WhatsApp */
.pulse-ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ring 2.2s cubic-bezier(.2,.6,.4,1) infinite; z-index: -1; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: rgba(127,127,127,.12); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shimmer 1.4s infinite; }
html.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Grid background halus */
.bg-grid { background-image: linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px); background-size: 56px 56px; }
html.dark .bg-grid { background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); }
.mask-fade { -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }

/* Kartu portofolio */
.pf-card img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.pf-card:hover img { transform: scale(1.06); }
.pf-enter { animation: pfIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes pfIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Modal */
.modal { transition: opacity .3s ease, visibility .3s; }
.modal:not(.open) { opacity: 0; visibility: hidden; pointer-events: none; }
.modal .modal-panel { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.modal:not(.open) .modal-panel { transform: translateY(24px) scale(.98); opacity: 0; }

/* Accordion */
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
.acc-body > div { overflow: hidden; }
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc.open .acc-icon { transform: rotate(45deg); background: var(--brand); color: #000; border-color: var(--brand); }

/* Tombol dengan panah bergeser */
.btn-arrow .arr { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.btn-arrow:hover .arr { transform: translateX(4px); }

/* Toast */
.toast { animation: toastIn .35s cubic-bezier(.2,.8,.2,1); }
.toast-out { opacity: 0; transform: translateY(10px); transition: all .3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Checkmark sukses */
.check-draw path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s .2s ease forwards; }

/* Input dasar */
.field { width: 100%; border-radius: .9rem; border: 1px solid rgba(0,0,0,.12); background: #fff; padding: .78rem 1rem; font-size: .95rem; transition: border-color .2s, box-shadow .2s; color: inherit; }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255,144,69,.2); }
.field::placeholder { color: rgba(0,0,0,.38); }
html.dark .field { background: #131315; border-color: rgba(255,255,255,.12); }
html.dark .field::placeholder { color: rgba(255,255,255,.35); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.5rem; }
.label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; letter-spacing: .01em; }

/* Stepper status pesanan */
.step-line { position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale, .word > span { opacity: 1; transform: none; }
}