@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

    /* Meridian palette */
    --color-ink: #0e1b24;
    --color-ink-soft: #16303b;
    --color-ink-line: #22414d;
    --color-brand: #0f766e;
    --color-brand-strong: #115e59;
    --color-accent: #d97706;
    --color-surface: #f4f6f7;
    --color-line: #e2e8f0;
}

@layer base {
    body {
        background-color: var(--color-surface);
        color: #0f172a;
    }
    [x-cloak] {
        display: none !important;
    }
}

@layer components {
    /* Eyebrow micro-label */
    .eyebrow {
        @apply text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400;
    }

    .card {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
    }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-ghost,
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-[0.97];
    }
    .btn-primary {
        @apply bg-brand text-white hover:bg-brand-strong focus:ring-brand;
    }
    .btn-ghost {
        @apply border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 focus:ring-slate-300;
    }
    .btn-danger {
        @apply text-red-600 hover:bg-red-50 focus:ring-red-300;
    }

    /* Form field */
    .field {
        @apply block h-11 w-full rounded-xl border-slate-300 bg-white/80 px-3.5 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 hover:border-slate-400 focus:border-brand focus:ring-2 focus:ring-brand/30;
    }
    /* Field with leading icon */
    .field-wrap {
        @apply relative;
    }
    .field-wrap .field {
        @apply pl-11;
    }
    .field-wrap > svg {
        @apply pointer-events-none absolute left-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400 transition-colors;
    }
    .field-wrap:focus-within > svg {
        @apply text-brand;
    }
    .label {
        @apply block text-sm font-medium text-slate-700;
    }

    /* Badges */
    .badge,
    .badge-live,
    .badge-draft,
    .badge-done {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
    }
    .badge-live {
        @apply bg-teal-50 text-brand;
    }
    .badge-draft {
        @apply bg-slate-100 text-slate-600;
    }
    .badge-done {
        @apply bg-amber-50 text-amber-700;
    }

    /* Sidebar link */
    .side-link {
        @apply relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 transition hover:bg-ink-soft hover:text-white;
    }
    .side-link-active {
        @apply bg-ink-soft text-white;
    }
    .side-link-active::before {
        content: '';
        @apply absolute left-0 top-1.5 bottom-1.5 w-1 rounded-full bg-accent;
    }

    /* Thin scrollbar that sits in the dark sidebar instead of the white system one */
    .scroll-ink {
        scrollbar-width: thin;
        scrollbar-color: var(--color-ink-line) transparent;
    }

    .tnum {
        font-variant-numeric: tabular-nums;
    }
}

/* Login entrance choreography */
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
.anim-card { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

.reveal > * {
    opacity: 0;
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal > *:nth-child(1) { animation-delay: 0.25s; }
.reveal > *:nth-child(2) { animation-delay: 0.38s; }
.reveal > *:nth-child(3) { animation-delay: 0.50s; }

/* Dashboard entrance: staggered fade-up on direct children */
.dash > * {
    opacity: 0;
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dash > *:nth-child(1) { animation-delay: 0.05s; }
.dash > *:nth-child(2) { animation-delay: 0.16s; }
.dash > *:nth-child(3) { animation-delay: 0.27s; }
.dash > *:nth-child(4) { animation-delay: 0.38s; }

/* Progress ring sweep (animatable angle via @property) */
@property --ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes ringfill {
    from { --ring: 0deg; }
}
.ring-anim {
    animation: ringfill 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* Per-page entrance (applied to main content on every page) */
.page-in {
    animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Top navigation progress bar */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 60;
    opacity: 0;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
    box-shadow: 0 0 8px var(--color-brand);
    transition: width 0.3s ease, opacity 0.3s ease 0.15s;
}

/* Faint globe meridians for dark ink panels, bleeding off the right edge */
.bg-meridian-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='white' stroke-opacity='0.09'%3E%3Ccircle cx='100' cy='100' r='98' vector-effect='non-scaling-stroke'/%3E%3Cellipse cx='100' cy='100' rx='94.7' ry='98' vector-effect='non-scaling-stroke'/%3E%3Cellipse cx='100' cy='100' rx='84.9' ry='98' vector-effect='non-scaling-stroke'/%3E%3Cellipse cx='100' cy='100' rx='69.3' ry='98' vector-effect='non-scaling-stroke'/%3E%3Cellipse cx='100' cy='100' rx='49' ry='98' vector-effect='non-scaling-stroke'/%3E%3Cellipse cx='100' cy='100' rx='25.4' ry='98' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M100 2v196' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 960px 960px;
    background-position: right -360px center;
}

/* Landing hero: learning path draws once, nodes land in order */
@keyframes draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}
.path-draw {
    stroke-dasharray: 1;
    animation: draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}
.path-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Course cards: lift on hover, globe turns, lesson dots ripple left to right */
.card-lift {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.card-lift:hover,
.card-lift:focus-within {
    transform: translateY(-6px) scale(1.02);
    border-color: #cbd5e1;
    box-shadow: 0 22px 40px -18px rgb(14 27 36 / 0.35);
}
.card-lift .bg-meridian-grid {
    transition: background-position 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-lift:hover .bg-meridian-grid {
    background-position: right -280px center;
}
.card-lift .dot {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i, 0) * 35ms);
}
.card-lift:hover .dot {
    transform: scale(1.3);
}

.cover-img {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-lift:hover .cover-img {
    transform: scale(1.06);
}

/* Course hero: cover photo settles in once on load */
@keyframes settle {
    from { transform: scale(1.08); opacity: 0.4; }
}
.hero-zoom {
    animation: settle 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Progress line fills in once on load */
@keyframes grow {
    from { transform: scaleX(0); }
}
.bar-grow {
    transform-origin: left;
    animation: grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@media (prefers-reduced-motion: reduce) {
    .card-lift, .card-lift .bg-meridian-grid, .card-lift .dot {
        transition: none;
    }
    .card-lift:hover, .card-lift:focus-within, .card-lift:hover .dot {
        transform: none;
    }
    .bar-grow, .hero-zoom {
        animation: none;
    }
    .cover-img {
        transition: none;
    }
    .card-lift:hover .cover-img {
        transform: none;
    }
    .path-draw, .path-node {
        animation: none;
    }
    .anim-card, .reveal > *, .dash > *, .ring-anim, .page-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}