/* ==========================================================================
   PT. Rodarya Rador Group — Shared Stylesheet
   Used by: index.html, about.html, divisions.html, portfolio.html, contact.html
   ========================================================================== */

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

body { font-family: 'Plus Jakarta Sans', sans-serif; }

::selection { background: #064E3B; color: #fff; }

/* Scroll-reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s;   }

/* Hero */
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.hero-bg { animation: kenBurns 20s ease-in-out infinite alternate; }

@keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-fade-1 { animation: heroFadeIn 1s cubic-bezier(.16,1,.3,1) .3s both; }
.hero-fade-2 { animation: heroFadeIn 1s cubic-bezier(.16,1,.3,1) .5s both; }
.hero-fade-3 { animation: heroFadeIn 1s cubic-bezier(.16,1,.3,1) .7s both; }

/* Navbar */
.nav-scrolled { background: rgba(255,255,255,.97) !important; backdrop-filter: blur(12px); box-shadow: 0 1px 20px rgba(0,0,0,.06); }
.nav-scrolled .nav-link { color: #111827 !important; }
.nav-scrolled .nav-link:hover { color: #064E3B !important; }
.nav-scrolled .nav-logo { color: #064E3B !important; }
.nav-scrolled .nav-cta { background: #064E3B !important; color: #fff !important; border-color: #064E3B !important; }
.nav-link.current { color: #34d399 !important; }
.nav-scrolled .nav-link.current { color: #064E3B !important; }

/* Cards */
.value-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(6,78,59,.1); }
.value-card:hover .value-icon { background: #064E3B; color: #fff; }
.value-icon { transition: all .4s cubic-bezier(.16,1,.3,1); }

.division-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
.division-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.division-card:hover .division-img { transform: scale(1.05); }
.division-img { transition: transform .6s cubic-bezier(.16,1,.3,1); }

.portfolio-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.portfolio-card:hover .portfolio-img { transform: scale(1.05); }
.portfolio-img { transition: transform .6s cubic-bezier(.16,1,.3,1); }

.filter-btn { transition: all .3s ease; }
.filter-btn.active { background: #064E3B; color: #fff; }

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.mobile-menu.open { transform: translateX(0); }

/* Division detail modal (used on divisions.html) */
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-content { transform: translateY(30px) scale(.97); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.modal-overlay.open .modal-content { transform: translateY(0) scale(1); }

/* Misc */
.counter { font-variant-numeric: tabular-nums; }
.back-to-top { opacity: 0; transform: translateY(20px); transition: all .3s ease; pointer-events: none; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
img[loading="lazy"] { opacity: 0; transition: opacity .5s ease; }
img[loading="lazy"].loaded { opacity: 1; }

/* Photo / emblem placeholders — shown automatically when a local image file
   referenced in the HTML/JS hasn't been added yet under assets/img/. Once
   the real file is placed at that path, the image loads normally and this
   placeholder never appears. */
.img-fallback { position: relative; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); }
.img-fallback::after {
    content: "Photo coming soon";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #9ca3af; text-align: center; padding: 1rem;
}
.emblem-fallback { background: #064E3B; }
.emblem-fallback::after {
    content: attr(data-initials);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff;
}
.emblem-badge { position: relative; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #064E3B; outline-offset: 2px;
}