/* ==========================================================================
   ŌRIS Studio — Design System & Global Styles
   ==========================================================================
   Brand Identity: Obsidian · Ōris Gold · Pulse Blue
   Typography: Cormorant Garamond · Syncopate · DM Sans
   Version: 3.0.0

   TABLE OF CONTENTS:
   1. CSS Custom Properties (ŌRIS Design Tokens)
   2. Base / Reset
   3. Grain Overlay
   4. Hero Section Parallax
   5. Trust Bar Marquee
   6. Scroll Progress
   7. Cookie Banner
   8. WhatsApp Float
   9. FAQ Accordion
   10. Counter Animation
   11. Testimonial Cards
   12. Service Cards
   13. Form Enhancements
   14. Animations & Keyframes
   15. Accessibility
   16. iOS / Mobile Fixes
   17. Print Styles
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties — ŌRIS Design Tokens
   ========================================================================== */

:root {
    /* ── Base Backgrounds (Deep Tech) ── */
    --color-void:     #030303;     /* True Black */
    --color-obsidian: #08080A;     /* Soft Dark */
    --color-graphite: #101014;     /* Card Base */

    /* ── Primary Core — Electric Indigo ── */
    --color-primary:       #6366F1;   
    --color-primary-light: #818CF8;
    --color-primary-glow:  rgba(99, 102, 241, 0.4);

    /* ── Engagement Core — Digital Rose ── */
    --color-accent:        #F43F5E;
    --color-accent-light:  #FB7185;
    --color-accent-glow:   rgba(244, 63, 94, 0.4);

    /* ── Tech Core — Electric Cyan ── */
    --color-tech:          #06B6D4;
    --color-tech-light:    #22D3EE;
    --color-tech-glow:     rgba(6, 182, 212, 0.4);

    /* ── Text Stack ── */
    --color-white:         #FFFFFF;
    --color-silver:        #B0B0B8;
    --color-text-muted:    #6B7280;

    /* ── Legacy Aliases ── */
    --color-bg-deep:          var(--color-void);
    --color-surface:          var(--color-obsidian);
    --color-surface-high:     var(--color-graphite);
    --color-text-primary:     var(--color-white);
    --color-text-secondary:   var(--color-silver);

    /* ── Timings ── */
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   500ms;
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@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;
    }
}

body {
    background-color: var(--color-void);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 90% 80%, rgba(244, 63, 94, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 10% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center top, right bottom, left center;
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-linen);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

/* ==========================================================================
   3. Grain Overlay
   ========================================================================== */

.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.025;
    pointer-events: none;
    z-index: 9999;
}

/* ==========================================================================
   Material Symbols
   ========================================================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-glow-primary {
    text-shadow: 0 0 20px var(--color-primary-glow);
}

.text-glow-accent {
    text-shadow: 0 0 20px var(--color-accent-glow);
}

.glass-edge {
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sep-primary {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    opacity: 0.3;
}

/* ==========================================================================
   4. Fade-Up Animation System
   ========================================================================== */

.fade-up-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.fade-up-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   5. Hero Section Parallax (Performance-first with CSS variables)
   ========================================================================== */

#hero-section {
    --hero-scroll: 0;
}

#hero-content, #hero-portal, #hero-aura-1, #hero-aura-2, #scroll-indicator {
    will-change: transform, opacity;
}

#hero-content {
    transform: translateY(calc(var(--hero-scroll) * 150px)) scale(calc(1 - var(--hero-scroll) * 0.15));
    opacity: calc(1 - var(--hero-scroll) * 1.8);
}

#hero-portal {
    transform: translateY(calc(var(--hero-scroll) * 80px)) scale(calc(1 - var(--hero-scroll) * 0.05));
    opacity: calc(1 - var(--hero-scroll) * 1.5);
}

#hero-aura-1 {
    filter: blur(120px) brightness(calc(1 - var(--hero-scroll)));
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px))) translateY(calc(var(--hero-scroll) * -200px));
}

#hero-aura-2 {
    filter: blur(100px) brightness(calc(1 - var(--hero-scroll)));
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px))) translateY(calc(var(--hero-scroll) * -350px));
}

#scroll-indicator {
    opacity: calc(0.5 - var(--hero-scroll) * 4);
}

/* ==========================================================================
   6. Trust Bar Marquee
   ========================================================================== */

.trust-bar-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 2rem 0;
    border-top: 1px solid rgba(201, 168, 76, 0.08);
    border-bottom: 1px solid rgba(201, 168, 76, 0.08);
    background: rgba(17, 17, 20, 0.6);
}

.trust-bar-content {
    display: inline-flex;
    animation: marquee 30s linear infinite;
    gap: 4rem;
    padding-left: 4rem;
    align-items: center;
}

.trust-bar-container:hover .trust-bar-content {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   7. Scroll Progress Bar
   ========================================================================== */

#scroll-progress {
    transform-origin: left;
    will-change: width;
}

/* ==========================================================================
   8. FAQ Accordion
   ========================================================================== */

.faq-item {
    border: 1px solid rgba(201, 168, 76, 0.08);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.faq-item:hover,
.faq-item.active {
    border-color: rgba(201, 168, 76, 0.25);
}

.faq-item.active {
    box-shadow: 0 0 30px rgba(201, 168, 76, 0.06);
}

.faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: background var(--duration-normal) ease;
}

.faq-header:hover {
    background: rgba(201, 168, 76, 0.03);
}

.faq-header .faq-icon {
    transition: transform var(--duration-normal) ease;
    color: var(--color-gold);
}

.faq-item.active .faq-header .faq-icon {
    transform: rotate(180deg);
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-expo), padding 0.3s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-body {
    max-height: 300px;
    padding: 0 1.5rem 1.5rem;
}

/* ==========================================================================
   9. Counter Animation
   ========================================================================== */

.counter-value {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 2ch;
}

/* ==========================================================================
   10. Service Cards
   ========================================================================== */

.service-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-slow) var(--ease-out-expo),
                border-color var(--duration-normal) ease,
                box-shadow var(--duration-normal) ease;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(201, 168, 76, 0.07), transparent 60%);
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
    pointer-events: none;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   11. Testimonial Cards
   ========================================================================== */

.testimonial-card {
    position: relative;
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.testimonial-card:hover {
    transform: translateY(-4px);
}

.testimonial-card::after {
    content: '"';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 6rem;
    font-family: 'Cormorant Garamond', serif;
    color: rgba(201, 168, 76, 0.08);
    pointer-events: none;
    line-height: 1;
}

/* ==========================================================================
   12. Form Enhancements
   ========================================================================== */

.form-field-wrapper {
    position: relative;
}

.form-field-wrapper .field-status {
    position: absolute;
    right: 0;
    bottom: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--duration-normal) ease;
}

.form-field-wrapper.valid .field-status {
    opacity: 1;
    transform: scale(1);
    color: #34d399;
}

.form-field-wrapper.invalid .field-status {
    opacity: 1;
    transform: scale(1);
    color: #f87171;
}

/* Honeypot (anti-spam) */
.ohnohoney {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   13. Animations & Keyframes
   ========================================================================== */

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes primary-shimmer {
    0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.1); }
    50% { box-shadow: 0 0 35px rgba(99, 102, 241, 0.35); }
}

@keyframes accent-shimmer {
    0%, 100% { box-shadow: 0 0 15px rgba(244, 63, 94, 0.1); }
    50% { box-shadow: 0 0 35px rgba(244, 63, 94, 0.35); }
}

@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float-y {
    animation: float-y 4s ease-in-out infinite;
}

.animate-primary-shimmer {
    animation: primary-shimmer 3s ease-in-out infinite;
}

.animate-accent-shimmer {
    animation: accent-shimmer 3s ease-in-out infinite;
}

/* QR Scan Animation */
@keyframes scan-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.scan-line-animation {
    animation: scan-line 2s linear infinite;
    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.2), transparent);
    height: 50%;
    width: 100%;
}

/* ==========================================================================
   14. Fallback Colors (Readability Guarantees)
   ========================================================================== */

body,
.text-on-surface {
    color: #FFFFFF !important;
}

.text-on-surface-variant {
    color: #B0B0B8 !important;
}

.bg-surface-container-low {
    background-color: #080808 !important;
}

.bg-surface-container-high {
    background-color: #16161D !important;
}

.bg-surface-container-highest {
    background-color: #1C1C24 !important;
}

.text-primary {
    color: #FFFFFF !important;
}

.bg-surface {
    background-color: #08080A !important;
}

/* ==========================================================================
   15. Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 700;
    font-family: 'Syncopate', sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    border-radius: 0 0 2px 2px;
    transition: top var(--duration-fast) ease;
}

.skip-to-content:focus {
    top: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Section label style (matches brand identity) */
.section-label-oris {
    font-family: 'Syncopate', sans-serif;
    font-size: 9px;
    letter-spacing: 0.5em;
    color: var(--color-silver);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-label-oris::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--color-silver), transparent);
    max-width: 200px;
}

/* ==========================================================================
   16. iOS / Mobile Fixes
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

/* Prevent iOS bounce */
@media (hover: none) and (pointer: coarse) {
    .parallax-aura {
        display: none;
    }
}

/* ==========================================================================
   17. Print Styles
   ========================================================================== */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    .grain-overlay, nav, #cookie-banner, #whatsapp-float, #scroll-progress,
    .parallax-aura, footer button {
        display: none !important;
    }
    a { color: black !important; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}