/* ===================================================================
 * Kosic homepage entry stylesheet.
 *
 * The template CSS is imported into Tailwind's `base` layer so Tailwind
 * utilities (used by the More info panel) win over its element rules,
 * the same way they win over Tailwind's own preflight.
 * ------------------------------------------------------------------- */
@import url("base.css") layer(base);
@import url("vendor.css") layer(base);
@import url("main.css") layer(base);
@import url("kosic-app.css") layer(base);

@layer base {
  /* More info overlay: toggled by main.js via body.info-is-visible. */
  .kosic-info {
    position: fixed;
    inset: 0;
    z-index: 500;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b0f10;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-4%);
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.6s;

    /* The template sets html to 10px; pin Tailwind's rem-based scale to px here. */
    --spacing: 4px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --container-md: 448px;
    --container-6xl: 1152px;
    --radius: 16px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: normal;
  }

  .info-is-visible .kosic-info {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0s;
  }

  /* Undo the template's element styles inside the panel. */
  .kosic-info :where(h1, h2, h3, h4, p, a, ul, li, nav, section, article, span) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-rendering: auto;
  }

  .kosic-info :where(ul, ol, li) {
    list-style: none;
  }

  .kosic-info :where(button) {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    cursor: pointer;
  }

  .kosic-info :where(input, textarea) {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
  }

  .kosic-info :where(a) {
    text-decoration: none;
    border: 0;
  }

  /* The template greys buttons and turns links blue on hover/focus; these
     selectors outrank its rules (Tailwind hover utilities still win). */
  .kosic-info button:is(:hover, :focus, :active),
  .kosic-info a:is(:hover, :focus, :active) {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
    outline: 0;
  }

  /* Contact form: Next button ring drawing from 0% to 100%. */
  @keyframes kosic-stroke-draw {
    from {
      stroke-dashoffset: 100;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  .kosic-stroke-draw {
    animation: kosic-stroke-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }

  /* Gentle entrances for swapped content. */
  @keyframes kosic-rise-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes kosic-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .kosic-rise-in {
    animation: kosic-rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .kosic-fade-in {
    animation: kosic-fade-in 0.5s ease both;
  }

  @media (prefers-reduced-motion: reduce) {
    .kosic-info *,
    .kosic-info *::before {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
    }
  }

  /* Landing page uses the More info backdrop (rendered in markup) instead of
     the template's photo and black gradient. */
  .s-home.s-home--static {
    background: #0d0f11;
  }

  .s-home.s-home--static::before {
    display: none;
  }
}