/* ============================================================
   JW Corp Indonesia — Corporate Holding Theme
   Luxury Editorial | Offwhite base, Carbon text, Gold accents
   ============================================================ */

:root {
    --color-carbon: #0A0A0A;
    --color-rich: #151515;
    --color-gold: #D4A017;
    --color-glow: #FFCC33;
    --color-offwhite: #F5F5F5;
    --color-ash: #A3A3A3;
    --color-surface: #FFFFFF;
    --border-carbon: rgba(10, 10, 10, 0.08);
    --border-gold: rgba(212, 160, 23, 0.35);
    --radius-card: 28px;
    --radius-image: 32px;
    --radius-section: 40px;
    --shadow-luxury: 0 20px 60px rgba(10, 10, 10, 0.06);
    --shadow-hover: 0 24px 70px rgba(10, 10, 10, 0.10);
    --transition-fast: 200ms;
    --transition-base: 500ms;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    background-color: var(--color-offwhite);
    color: var(--color-carbon);
}

::selection {
    background: var(--color-gold);
    color: var(--color-carbon);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-offwhite);
}
::-webkit-scrollbar-thumb {
    background: rgba(10, 10, 10, 0.18);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

/* ---------- Typography scale ---------- */
.display-1 {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 700;
}
@media (min-width: 1024px) {
    .display-1 {
        font-size: 80px;
    }
}
.heading-1 {
    font-family: 'Sora', sans-serif;
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
}
@media (min-width: 1024px) {
    .heading-1 {
        font-size: 56px;
    }
}
.heading-2 {
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
}
@media (min-width: 1024px) {
    .heading-2 {
        font-size: 42px;
    }
}
.heading-3 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 600;
}
@media (min-width: 1024px) {
    .heading-3 {
        font-size: 30px;
    }
}
.body-lg {
    font-size: 16px;
    line-height: 1.7;
}
@media (min-width: 1024px) {
    .body-lg {
        font-size: 18px;
    }
}
.caption {
    font-size: 14px;
    line-height: 1.6;
}
.font-stat {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Section rhythm ---------- */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.section-eyebrow::before {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    background: var(--color-gold);
}
.section-eyebrow.is-center::after {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    background: var(--color-gold);
}
.section-title {
    margin-top: 1rem;
}
.section-lead {
    margin-top: 1.25rem;
    color: rgba(10, 10, 10, 0.62);
    line-height: 1.75;
}
.section-spacing {
    padding-top: 72px;
    padding-bottom: 72px;
}
@media (min-width: 768px) {
    .section-spacing {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}
@media (min-width: 1280px) {
    .section-spacing {
        padding-top: 150px;
        padding-bottom: 150px;
    }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.875rem 1.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease, transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.btn:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 3px;
}
.btn-primary {
    background: var(--color-carbon);
    color: var(--color-offwhite);
}
.btn-primary:hover {
    background: var(--color-gold);
    color: var(--color-carbon);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 160, 23, 0.30);
}
.btn-secondary {
    background: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-carbon);
}
.btn-secondary:hover {
    background: var(--color-gold);
    color: var(--color-carbon);
    transform: translateY(-2px);
}
.btn-ghost {
    background: transparent;
    color: var(--color-carbon);
    padding-left: 0;
    padding-right: 0;
}
.btn-ghost .btn-underline {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--color-carbon);
    transform-origin: left;
    transition: transform var(--transition-fast) ease;
}
.btn-ghost:hover {
    color: var(--color-gold);
}
.btn-ghost:hover .btn-underline {
    background: var(--color-gold);
    transform: scaleX(1.15);
}
.btn-lg {
    padding: 1.0625rem 2.25rem;
    font-size: 0.9375rem;
}
.btn-dark {
    background: var(--color-offwhite);
    color: var(--color-carbon);
}
.btn-dark:hover {
    background: var(--color-gold);
    color: var(--color-carbon);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 160, 23, 0.35);
}
.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(245, 245, 245, 0.35);
    color: var(--color-offwhite);
}
.btn-outline-light:hover {
    border-color: var(--color-gold);
    color: var(--color-glow);
    transform: translateY(-2px);
}

/* ---------- Cards ---------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--border-carbon);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-luxury);
}
.card-hover {
    transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-hover);
}
.card-dark {
    background: rgba(245, 245, 245, 0.04);
    border: 1px solid rgba(245, 245, 245, 0.10);
    border-radius: var(--radius-card);
}

/* ---------- Chips ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border: 1px solid var(--border-gold);
    padding: 0.375rem 0.875rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-carbon);
    background: transparent;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
a.chip:hover,
button.chip:hover {
    background: var(--color-gold);
    color: var(--color-carbon);
}

/* ---------- Navbar ---------- */
.site-nav {
    transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease;
    border-bottom: 1px solid transparent;
    background: transparent;
}
.site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--border-carbon);
    box-shadow: 0 8px 30px rgba(10, 10, 10, 0.05);
}
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 100%;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast) ease;
}
.nav-link:hover::after {
    transform: scaleX(1);
}

/* ---------- Mega menu ---------- */
.mega-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease, visibility var(--transition-fast) ease;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Dropdown sub-menu (header nav tree) ---------- */
.dropdown-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease, visibility var(--transition-fast) ease;
}
.has-dropdown:hover > .dropdown-panel,
.has-dropdown:focus-within > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Side-opened sub-sub-menus slide horizontally instead of down */
.dropdown-panel-side {
    transform: translateX(-8px);
}
.has-dropdown:hover > .dropdown-panel-side,
.has-dropdown:focus-within > .dropdown-panel-side {
    transform: translateX(0);
}
/* Chevron rotates when its dropdown is open */
.has-dropdown:hover > a .nav-chevron,
.has-dropdown:focus-within > a .nav-chevron {
    transform: rotate(90deg);
}
.dropdown-item:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: -2px;
}
.has-dropdown:hover > a,
.has-dropdown:focus-within > a {
    color: var(--color-carbon);
}

/* Mobile drawer: collapsible sub-menu tree (grid-rows accordion) */
.nav-mobile-trigger:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: -2px;
}
.nav-mobile-trigger[aria-expanded='true'] .nav-chevron {
    transform: rotate(180deg);
}

/* ---------- Abstract shape layer ----------
   Quiet geometry drawn from the group's four businesses: racetrack orbits
   (JW Racing), broadcast signals (JW Media), workshop grids (JW Garage) and
   community constellations (Makan Berkah). One motif per section, rotating
   down the page so neighbours never repeat the same silhouette.

   Requires a `relative overflow-hidden` host with the include as its first
   child. The layer sits at z-index 0 and the siblings after it are lifted
   above it — Tailwind-positioned siblings (absolute glows, fixed lightboxes)
   keep their own positioning. Decorative only: no layout impact, no targets.
--------------------------------------------------------------------------- */
.abstract-shapes {
    --asc: 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.abstract-shapes .shape {
    position: absolute;
    display: block;
}

/* Tone — light sections: gold on offwhite/white. */
.abstract-shapes-light {
    color: rgba(212, 160, 23, 0.32);
}
.abstract-shapes-light .shape-rule {
    color: rgba(10, 10, 10, 0.12);
}
.abstract-shapes-light .shape-mesh {
    color: rgba(10, 10, 10, 0.055);
}
.abstract-shapes-light .shape-glow {
    background: radial-gradient(circle, rgba(212, 160, 23, 0.12), rgba(212, 160, 23, 0) 68%);
}

/* Tone — dark sections: glow-lit gold on carbon/rich. */
.abstract-shapes-dark {
    color: rgba(255, 204, 51, 0.26);
}
.abstract-shapes-dark .shape-rule {
    color: rgba(245, 245, 245, 0.14);
}
.abstract-shapes-dark .shape-mesh {
    color: rgba(245, 245, 245, 0.05);
}
.abstract-shapes-dark .shape-glow {
    background: radial-gradient(circle, rgba(255, 204, 51, 0.12), rgba(255, 204, 51, 0) 68%);
}

/* Scale — one knob for the whole layer, set per section. */
.abstract-shapes-xl { --asc: 1.6; }
.abstract-shapes-lg { --asc: 1.3; }
.abstract-shapes-md { --asc: 1; }
.abstract-shapes-sm { --asc: 0.8; }
.abstract-shapes-xs { --asc: 0.6; }

/* Mirror the layer for sections that carry their weight on the left. */
.abstract-shapes-left {
    transform: scaleX(-1);
}

/* ---- Dominant motifs ---- */

/* Orbit — rings bleeding off one edge, marker travelling the outer line. */
.abstract-shapes-orbit .shape-orbit {
    width: calc(300px * var(--asc));
    aspect-ratio: 1;
    top: 50%;
    right: calc(-90px * var(--asc));
    margin-top: calc(-150px * var(--asc));
    animation: shape-orbit 140s linear infinite;
}

/* Wave — signal arcs rising from the lower corner. */
.abstract-shapes-wave .shape-wave {
    width: calc(240px * var(--asc));
    aspect-ratio: 1;
    bottom: calc(-24px * var(--asc));
    right: 3%;
    animation: shape-breathe 10s ease-in-out infinite;
}

/* Streak — speed lines entering from the edge. */
.abstract-shapes-streak .shape-streak {
    width: calc(300px * var(--asc));
    aspect-ratio: 7 / 3;
    top: 20%;
    right: 2%;
    animation: shape-drift 24s ease-in-out infinite;
}

/* Network — community constellation, calm and static. */
.abstract-shapes-network .shape-network {
    width: calc(150px * var(--asc));
    aspect-ratio: 1;
    top: 12%;
    right: 5%;
}

/* Mesh — technical grid fading out of one corner. */
.abstract-shapes-mesh .shape-mesh {
    inset: 0;
    background-image:
        repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 36px),
        repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 36px);
    -webkit-mask-image: radial-gradient(60% 55% at 82% 16%, #000 0%, transparent 72%);
    mask-image: radial-gradient(60% 55% at 82% 16%, #000 0%, transparent 72%);
}

/* ---- Shared accents ---- */

/* Ambient glow, opposite the dominant shape. */
.abstract-shapes .shape-glow {
    width: calc(460px * var(--asc));
    aspect-ratio: 1;
    border-radius: 50%;
    top: -8%;
    left: -6%;
    animation: shape-breathe 14s ease-in-out infinite;
}

/* Hairline rule, low in the section. */
.abstract-shapes .shape-rule {
    width: calc(190px * var(--asc));
    height: 1px;
    bottom: 12%;
    left: 4%;
    background: linear-gradient(90deg, transparent, currentColor 18%, currentColor 82%, transparent);
}

@keyframes shape-orbit {
    to {
        transform: rotate(360deg);
    }
}
@keyframes shape-drift {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(calc(22px * var(--asc)));
    }
}
@keyframes shape-breathe {
    0%,
    100% {
        opacity: 0.72;
    }
    50% {
        opacity: 1;
    }
}

/* Keep section content above the layer. Positioned siblings keep their own
   positioning; zero-specificity so Tailwind utilities still win. */
.abstract-shapes ~ *:where(:not(.absolute):not(.fixed):not(.sticky)) {
    position: relative;
    z-index: 1;
}

/* ---------- Section surfaces ---------- */
.surface-dark {
    background: var(--color-rich);
    color: var(--color-offwhite);
}

/* ---------- Image treatments ---------- */
.img-frame {
    overflow: hidden;
    border-radius: var(--radius-image);
}
/* Dashed accent frame around the hero media — byte-for-byte the live editor's
   editable outline (gold dashes, 3px air gap, follows the image radius). */
.img-frame-dashed {
    outline: 2px dashed rgba(212, 160, 23, 0.6);
    outline-offset: 3px;
}
.img-zoom img {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.img-zoom:hover img {
    transform: scale(1.05);
}
.parallax-img {
    will-change: transform;
}

/* ---------- Textures ---------- */
.gold-ring {
    box-shadow: 0 0 60px rgba(212, 160, 23, 0.15);
}
.text-glow-gold {
    text-shadow: 0 0 30px rgba(255, 204, 51, 0.45);
}

/* ---------- Hero ---------- */
.hero-eyebrow,
.hero-title,
.hero-desc,
.hero-cta {
    opacity: 0;
    transform: translateY(24px);
    animation: hero-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-title {
    animation-delay: 150ms;
}
.hero-desc {
    animation-delay: 300ms;
}
.hero-cta {
    animation-delay: 450ms;
}
@keyframes hero-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.underline-reveal {
    background-image: linear-gradient(var(--color-gold), var(--color-gold));
    background-repeat: no-repeat;
    background-size: 0% 3px;
    background-position: 0 100%;
    animation: underline-grow 700ms ease 600ms forwards;
}
@keyframes underline-grow {
    to {
        background-size: 100% 3px;
    }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Stagger (gallery) ---------- */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 120ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 180ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 300ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 360ms; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 420ms; }

/* ---------- Marquee ---------- */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
    width: max-content;
    animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- Events ---------- */
/* Filtering hides cards (and any group left without a visible card). */
.event-item.is-hidden,
[data-event-group].is-hidden {
    display: none;
}

/* ---------- Gallery ---------- */
.gallery-item {
    transition: border-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.gallery-item:hover,
.gallery-item:focus-visible {
    border-color: var(--border-gold);
}
.gallery-item:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 2px;
}
.gallery-item.is-hidden {
    display: none;
}

/* ---------- FAQ accordion (kept for reuse) ---------- */
.faq-trigger:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: -2px;
}
.faq-trigger[aria-expanded='true'] .faq-icon {
    transform: rotate(180deg);
}

/* ---------- Lightbox ---------- */
.lightbox-img:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 4px;
}

/* ---------- Forms ---------- */
.form-input {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--border-carbon);
    background: var(--color-surface);
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    color: var(--color-carbon);
    transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.form-input::placeholder {
    color: rgba(10, 10, 10, 0.35);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

/* ---------- Focus visibility (a11y) ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--color-carbon);
    color: var(--color-offwhite);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.75rem 0;
}
.skip-link:focus {
    left: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal],
    [data-stagger] > *,
    .hero-eyebrow,
    .hero-title,
    .hero-desc,
    .hero-cta {
        opacity: 1 !important;
        transform: none !important;
    }
    .marquee-track {
        animation: none !important;
    }
}