/* ============================================================
   WKE — custom styles (what Tailwind can't give us)
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; background: #0A0E0B; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0E0B; }
::-webkit-scrollbar-thumb { background: #1C3022; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #C9A24B; }

/* Reveal animation (used by main.js via data-reveal) */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Hero line mask animation */
[data-hero-line] { transform: translateY(110%); display: block; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
body.is-loaded [data-hero-line] { transform: translateY(0); }
body.is-loaded [data-hero-line]:nth-child(1) { transition-delay: 0.2s; }
body.is-loaded [data-hero-line]:nth-child(2) { transition-delay: 0.45s; }
body.is-loaded [data-hero-line]:nth-child(3) { transition-delay: 0.7s; }

/* Header scrolled state */
[data-nav].is-scrolled { background: rgba(10,14,11,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(237,234,227,0.06); }

/* Program tabs */
.program-tab { cursor: pointer; border: 0; background: transparent; }
.program-tab:focus-visible { outline: 2px solid #C9A24B; outline-offset: 2px; }

/* Panel scroll-margin so scrollIntoView lands below fixed header + sticky tabs */
.program-panel { scroll-margin-top: 175px; }
@media (min-width: 768px) { .program-panel { scroll-margin-top: 190px; } }

/* Mobile-only swipe affordance: gradient fade on right edge + animated arrow */
@media (max-width: 767px) {
    .wke-tabs-bar { position: sticky; }
    .wke-tabs-bar::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 60px;
        background: linear-gradient(to left, rgba(10,14,11,0.95) 20%, rgba(10,14,11,0));
        pointer-events: none;
        z-index: 5;
        opacity: 1;
        transition: opacity .3s ease;
    }
    .wke-tabs-bar.is-end-reached::after { opacity: 0; }
    .wke-tabs-bar::before {
        content: '';
        position: absolute;
        top: 50%; right: 12px;
        width: 18px; height: 18px;
        margin-top: -9px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 4l6 6-6 6' stroke='%23C9A24B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        z-index: 6;
        pointer-events: none;
        animation: wke-arrow-pulse 1.4s ease-in-out infinite;
        opacity: 1;
        transition: opacity .3s ease;
    }
    .wke-tabs-bar.is-end-reached::before { opacity: 0; animation: none; }
}
@keyframes wke-arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: .6; }
    50%      { transform: translateX(5px); opacity: 1; }
}

/* One-shot hint nudge when section enters view (mobile only) */
@media (max-width: 767px) {
    .wke-tabs-inner.is-hint { animation: wke-tabs-hint 1.1s cubic-bezier(.4,0,.2,1) 1; }
}
@keyframes wke-tabs-hint {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-26px); }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* Manifesto prose */
.prose-manifesto p { margin-bottom: 1.2em; }
.prose-manifesto p:last-child { margin-bottom: 0; }

/* ============================================================
   Contact Form 7 — luxury dark styling
   ============================================================ */
.wke-form .wpcf7-form p { margin-bottom: 1.1rem; color: #EDEAE3; }
.wke-form label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(237,234,227,0.5); margin-bottom: 0.5rem; font-weight: 500; }
.wke-form input[type="text"],
.wke-form input[type="email"],
.wke-form input[type="tel"],
.wke-form input[type="url"],
.wke-form input[type="number"],
.wke-form input[type="date"],
.wke-form select,
.wke-form textarea {
    width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(237,234,227,0.2);
    color: #EDEAE3; padding: 0.65rem 0; font-size: 15px; font-family: inherit;
    transition: border-color .3s ease, background-color .3s ease;
}
.wke-form input:focus,
.wke-form select:focus,
.wke-form textarea:focus { outline: none; border-bottom-color: #C9A24B; }
.wke-form textarea { min-height: 100px; resize: vertical; }
.wke-form ::placeholder { color: rgba(237,234,227,0.35); }
.wke-form select { background-color: #0A0E0B; }
.wke-form select option { background: #0A0E0B; color: #EDEAE3; }
.wke-form input[type="submit"],
.wke-form button[type="submit"] {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
    background: #C9A24B; color: #0A0E0B; border: 0; padding: 1rem 2rem;
    font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
    cursor: pointer; transition: background .3s ease, transform .3s ease;
}
.wke-form input[type="submit"]:hover,
.wke-form button[type="submit"]:hover { background: #E0C27A; transform: translateY(-2px); }
.wke-form .wpcf7-checkbox, .wke-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.wke-form .wpcf7-list-item { margin: 0; }
.wke-form .wpcf7-list-item-label { color: #EDEAE3; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 300; }
.wke-form .wpcf7-acceptance .wpcf7-list-item-label { font-size: 12px; color: rgba(237,234,227,0.6); }
.wke-form .wpcf7-not-valid-tip { color: #E0C27A; font-size: 12px; margin-top: .25rem; }
.wke-form .wpcf7-response-output { margin: 1rem 0 0; padding: 1rem; border: 1px solid rgba(237,234,227,0.2); color: #EDEAE3; font-size: 14px; }
.wke-form .wpcf7-mail-sent-ok { border-color: #C9A24B; background: rgba(201,162,75,0.08); }
.wke-form .wpcf7 form .wpcf7-spinner { background-color: #C9A24B; }

/* Radial gradient util (not in Tailwind by default) */
.bg-gradient-radial { background-image: radial-gradient(var(--tw-gradient-stops)); }

/* Nav active link */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: #C9A24B; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.nav-link.is-current { color: #EDEAE3; }
.nav-link.is-current::after { transform: scaleX(1); }

/* Hero scroll indicator — traveling gold dot */
@keyframes wke-scroll-dot {
    0%   { top: -20%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.wke-scroll-dot { top: 0; animation: wke-scroll-dot 2.2s cubic-bezier(.55,.05,.55,.95) infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-hero-line] { transition: none; transform: none; opacity: 1; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
