/* =========================================================================
   L'Atelier de MIA — Action Primitives (Phase 0)
   The only action styles in the system. See Master Playbook §8.

   Adaptation note: the playbook plan names React components
   (PrimaryLink.tsx, QuietLink.tsx). This repo is static HTML, so the
   primitives are expressed as CSS classes with the same contract:
     <a class="primary-link" href="…">Discover the collection</a>
     <a class="quiet-link"   href="…">Meet the house</a>

   No other action class is permitted.
   ========================================================================= */

/* ------------------------- PRIMARY LINK -----------------------------------
   12px Inter Medium, uppercase, 0.12em tracking, persistent underline,
   trailing →. Hover: underline retracts right-to-left, then redraws
   left-to-right over 800ms total, using --ease.
   Reduced-motion: instant toggle (durations collapse to 0ms via tokens).
--------------------------------------------------------------------------- */

.primary-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;

    font-family: var(--type-link-caps-font);
    font-size: var(--type-link-caps-size);
    font-weight: var(--type-link-caps-weight);
    letter-spacing: var(--type-link-caps-tracking);
    text-transform: var(--type-link-caps-case);

    color: var(--fg);
    text-decoration: none;                         /* underline is drawn manually */
    position: relative;
    padding-bottom: 2px;                           /* space for the underline */
    cursor: pointer;
    background: transparent;
    border: 0;
}

.primary-link::after {
    /* the trailing arrow glyph — Unicode only (§8) */
    content: '\2192';                              /* → */
    display: inline-block;
    transition: transform var(--dur-medium) var(--ease);
}

.primary-link:hover::after,
.primary-link:focus-visible::after {
    transform: translateX(4px);
}

/* --- underline --- */
/* Persistent underline rendered as a 1px hairline via ::before. The hover
   animation is a single continuous 800ms: 0–50% the underline scales 1→0
   from the LEFT edge (retracts right-to-left); 50–100% it scales 0→1 from
   the RIGHT edge (redraws left-to-right). */

.primary-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform-origin: left center;
    transform: scaleX(1);
}

.primary-link:hover::before,
.primary-link:focus-visible::before {
    animation: primary-link-underline var(--dur-slow) var(--ease) forwards;
}

@keyframes primary-link-underline {
    0%   { transform-origin: right center; transform: scaleX(1); }
    50%  { transform-origin: right center; transform: scaleX(0); }
    50.01% { transform-origin: left center;  transform: scaleX(0); }
    100% { transform-origin: left center;  transform: scaleX(1); }
}

/* Focus ring — visible only on keyboard focus. */
.primary-link:focus { outline: none; }
.primary-link:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
}

/* ------------------------- QUIET LINK -------------------------------------
   11px, 0.14em tracking, muted color, underline on hover only.
--------------------------------------------------------------------------- */

.quiet-link {
    display: inline-block;

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);

    color: var(--muted);
    text-decoration: none;
    padding-bottom: 2px;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: color var(--dur-fast) var(--ease);
}

.quiet-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-medium) var(--ease);
}

.quiet-link:hover,
.quiet-link:focus-visible {
    color: var(--fg);
}

.quiet-link:hover::before,
.quiet-link:focus-visible::before {
    transform: scaleX(1);
}

.quiet-link:focus { outline: none; }
.quiet-link:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
}

/* ------------------------- PHOTO PLACEHOLDER ---------------------------------
   Placeholder box for images that have not been provided yet.
   Use with aspect-ratio modifiers: --landscape (3/2), --portrait (2/3),
   --square (1/1). Default is 3/2.
--------------------------------------------------------------------------- */

.photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--canvas-deep);
    border: 1px solid var(--hairline);
}

.photo-placeholder--portrait {
    aspect-ratio: 2 / 3;
}

.photo-placeholder--square {
    aspect-ratio: 1 / 1;
}

.photo-placeholder--wide {
    aspect-ratio: 16 / 9;
}

.photo-placeholder--thumb {
    width: 72px;
    height: 90px;
    aspect-ratio: auto;
    flex-shrink: 0;
}