/* RNomics Platform - Custom Styles */

/* Hide Alpine-controlled elements until Alpine initializes (prevents FOUC flash) */
[x-cloak] { display: none !important; }

/* === Scroll Reveal Animations === */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger each card's reveal 0.08s after the previous. nth-child counts a
   card's position among its siblings, so this only affects grids/lists of
   .reveal-on-scroll cards (team, committee, service card grids). Explicit
   steps through the 8th card; beyond that, hold at the 0.64s cap so any
   extra cards still stagger instead of falling back to 0 and popping in
   with the first. */
.reveal-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.reveal-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.reveal-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.reveal-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.reveal-on-scroll:nth-child(6) { transition-delay: 0.40s; }
.reveal-on-scroll:nth-child(7) { transition-delay: 0.48s; }
.reveal-on-scroll:nth-child(8) { transition-delay: 0.56s; }
.reveal-on-scroll:nth-child(n+9) { transition-delay: 0.64s; }

/* === Hero Text Animation === */
.hero-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Navigation === */
.nav-link {
    @apply text-gray-600 hover:text-sky-600 font-medium transition-colors duration-200 relative;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-sky-500 transition-all duration-300;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    @apply w-full;
}

/* === Buttons === */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-sky-500 text-white rounded-lg font-semibold
           hover:bg-sky-600 active:bg-sky-700 transition-all duration-200 shadow-sm hover:shadow-md;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white text-sky-600 border-2 border-sky-500
           rounded-lg font-semibold hover:bg-sky-50 active:bg-sky-100 transition-all duration-200;
}

.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-ghost-light {
    @apply inline-flex items-center justify-center px-6 py-3 bg-transparent text-white border-2 border-white/30
           rounded-lg font-semibold hover:bg-white/10 hover:border-white/50 active:bg-white/20
           transition-all duration-200;
}

/* === Service Cards === */
.service-card {
    @apply bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-lg
           transition-all duration-300 transform hover:-translate-y-1;
}

.service-card .card-icon {
    @apply text-sky-500 transition-transform duration-300;
}

.service-card:hover .card-icon {
    @apply scale-110;
}

/* === Team Cards === */
.team-card {
    @apply bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300;
}

/* === Construction Banner === */
.construction-banner {
    @apply bg-amber-50 border-b border-amber-200 text-amber-800 text-sm;
}

.construction-banner .dismiss-btn {
    @apply text-amber-500 hover:text-amber-700 transition-colors;
}

/* === DNA Helix Decorative Element === */
.dna-accent {
    position: relative;
    overflow: hidden;
}

.dna-accent::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 300px;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* === Section Dividers === */
.section-divider {
    @apply w-16 h-1 bg-gradient-to-r from-sky-500 to-indigo-500 rounded-full;
}

/* === Focus Styles (Accessibility) === */
*:focus-visible {
    @apply outline-2 outline-offset-2 outline-sky-500;
}

/* === Skip to Content (Accessibility) === */
.skip-to-content {
    @apply absolute -top-full left-4 bg-sky-600 text-white px-4 py-2 rounded-b-lg z-[100]
           focus:top-0 transition-all;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .hero-text {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .service-card {
        transform: none;
    }

    .service-card:hover {
        transform: none;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .pipeline-stage,
    .pipeline-dot {
        opacity: 1;
    }

    .pipeline-connector {
        stroke-dashoffset: 0 !important;
    }

    .flip-card-inner {
        transition: none;
    }

    .flip-card:hover .flip-card-inner,
    .flip-card.is-flipped .flip-card-inner {
        transform: none;
    }

    .flip-card-back {
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}

/* === Pipeline Scroll Animation === */
.pipeline-stage {
    opacity: 0;
    will-change: opacity;
}

.pipeline-connector {
    will-change: stroke-dashoffset;
}

.pipeline-dot {
    opacity: 0;
    will-change: opacity;
}

/* Fallback: show pipeline if JS never runs */
.pipeline-container:not(.pipeline-initialized) .pipeline-stage,
.pipeline-container:not(.pipeline-initialized) .pipeline-dot {
    animation: pipeline-fallback 0.5s ease 2s forwards;
}

.pipeline-container:not(.pipeline-initialized) .pipeline-connector {
    animation: pipeline-fallback-draw 0.5s ease 2s forwards;
}

@keyframes pipeline-fallback {
    to { opacity: 1; }
}

@keyframes pipeline-fallback-draw {
    to { stroke-dashoffset: 0; }
}

/* === Image Carousel (Alpine.js) === */
.carousel-dots button.active {
    background: rgba(255, 255, 255, 0.9);
}

/* === Print Styles === */
@media print {
    .construction-banner,
    .language-switcher,
    nav { display: none !important; }

    body { font-size: 12pt; }
}

/* === Service Detail Rich Content === */

/* Modern table styling */
.service-table {
    @apply my-6 overflow-x-auto rounded-xl border border-gray-200;
}

.service-table table {
    @apply w-full text-sm text-left;
}

.service-table thead {
    @apply bg-sky-50;
}

.service-table th {
    @apply px-4 py-3 font-semibold text-sky-900 text-sm uppercase tracking-wider border-b border-gray-200;
}

.service-table td {
    @apply px-4 py-3 text-gray-700 border-b border-gray-100;
}

.service-table tbody tr:last-child td {
    @apply border-b-0;
}

.service-table tbody tr:hover {
    @apply bg-gray-50;
}

/* Responsive images within service content */
.service-image {
    @apply rounded-xl shadow-sm max-w-full h-auto my-6;
}

/* Prose customization for service pages */
.service-content {
    --tw-prose-headings: #111827;
    --tw-prose-body: #4b5563;
    --tw-prose-links: #0284c7;
    --tw-prose-bold: #111827;
    --tw-prose-lead: #6b7280;
    --tw-prose-bullets: #0ea5e9;
    --tw-prose-counters: #6b7280;
    --tw-prose-hr: #e5e7eb;
    --tw-prose-quotes: #111827;
    --tw-prose-quote-borders: #e5e7eb;
    --tw-prose-captions: #6b7280;
    --tw-prose-code: #111827;
    --tw-prose-th-borders: #e5e7eb;
    --tw-prose-td-borders: #f3f4f6;
}

.service-content h3 {
    @apply text-xl font-bold text-gray-900 mt-8 mb-3;
}

.service-content h4 {
    @apply text-lg font-semibold text-gray-800 mt-6 mb-2;
}

.service-content ul {
    @apply list-disc pl-6 space-y-1;
}

.service-content ol {
    @apply list-decimal pl-6 space-y-1;
}

.service-content li {
    @apply text-gray-600;
}

.service-content p {
    @apply text-gray-600 leading-relaxed;
}

.service-content strong {
    @apply text-gray-900 font-semibold;
}

.service-content em {
    @apply text-gray-600 italic;
}

/* Service section cards */
.service-section {
    @apply rounded-xl p-6 mb-8;
}

.service-section-tech {
    @apply bg-gray-50 border border-gray-100;
}

.service-section-pricing {
    @apply bg-sky-50 border border-sky-100;
}

.service-section h2 {
    @apply text-xl font-bold text-gray-900 mb-4 flex items-center gap-2;
}

/* === Bioinformatics Flip Cards === */

.flip-card {
    perspective: 1000px;
    cursor: pointer;
    position: relative;            /* needed so z-index can lift the hovered card */
    z-index: 1;
    transition: z-index 0s 0.6s;   /* delay the z-index drop until after the shrink */
}

/* Flip cards that also reveal-on-scroll: opacity/transform reveal transition
   (staggered via the Alpine-set --reveal-delay custom property) combined with the
   flip z-index transition. Using a custom property for the stagger delay — rather
   than an inline transition-delay — keeps the hover z-index lift instant (an inline
   transition-delay would otherwise lag every transitioned property, including the
   hover z-index). Specificity (0,2,0) also beats .reveal-on-scroll and .flip-card
   (0,1,0), whose transition shorthands would otherwise clobber the opacity/transform
   transition and kill the fade-up. */
.reveal-on-scroll.flip-card {
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
                z-index 0s 0.6s;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

/* Desktop hover — scoped to devices that support true hover */
@media (hover: hover) {
    .flip-card:hover {
        z-index: 50;               /* hovered card paints above its siblings */
        transition: z-index 0s;    /* raise instantly on hover */
    }

    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg) scale(1.1);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    }
}

/* Mobile tap toggle — Alpine.js toggles .is-flipped on click */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.flip-card-front {
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
}

.flip-card-back {
    transform: rotateY(180deg);
    color: white;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(155deg, rgba(0,0,0,0.18), rgba(0,0,0,0.45));  /* scrim over the inline per-card color */
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.flip-card-back h4 {
    opacity: 0.95;  /* overrides the inline .opacity-80 utility so the label stays crisp */
}

.flip-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flip-card-back li {
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 600;
}

.flip-card-back li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
}

/* === RNA Sequence Ribbon (start-codon signature) ===
   A monospace run of RNA bases opening with AUG — the universal start codon —
   used as the "how we started" eyebrow on the About page. The ribbon carries
   .reveal-on-scroll so the existing IntersectionObserver flips it to
   .is-visible; the container itself is held static (opacity 1, no transform)
   so only the individual letters cascade in, ~70ms apart. */
.seq-ribbon.reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
}

.seq-ribbon .seq-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.seq-ribbon.is-visible .seq-letter {
    opacity: 1;
    transform: none;
}

.seq-ribbon.is-visible .seq-letter:nth-child(1)  { transition-delay: 0.05s; }
.seq-ribbon.is-visible .seq-letter:nth-child(2)  { transition-delay: 0.12s; }
.seq-ribbon.is-visible .seq-letter:nth-child(3)  { transition-delay: 0.19s; }
.seq-ribbon.is-visible .seq-letter:nth-child(4)  { transition-delay: 0.26s; }
.seq-ribbon.is-visible .seq-letter:nth-child(5)  { transition-delay: 0.33s; }
.seq-ribbon.is-visible .seq-letter:nth-child(6)  { transition-delay: 0.40s; }
.seq-ribbon.is-visible .seq-letter:nth-child(7)  { transition-delay: 0.47s; }
.seq-ribbon.is-visible .seq-letter:nth-child(8)  { transition-delay: 0.54s; }
.seq-ribbon.is-visible .seq-letter:nth-child(9)  { transition-delay: 0.61s; }
.seq-ribbon.is-visible .seq-letter:nth-child(10) { transition-delay: 0.68s; }
.seq-ribbon.is-visible .seq-letter:nth-child(11) { transition-delay: 0.75s; }
.seq-ribbon.is-visible .seq-letter:nth-child(12) { transition-delay: 0.82s; }
.seq-ribbon.is-visible .seq-letter:nth-child(13) { transition-delay: 0.89s; }
.seq-ribbon.is-visible .seq-letter:nth-child(14) { transition-delay: 0.96s; }
.seq-ribbon.is-visible .seq-letter:nth-child(15) { transition-delay: 1.03s; }
.seq-ribbon.is-visible .seq-letter:nth-child(n+16) { transition-delay: 1.10s; }
/* Reduced motion: main.js adds .is-visible up front and the global rule zeros
   transition-duration, so letters resolve to visible with no movement. If JS
   is disabled entirely, the About template ships a <noscript> override. */