/* ==========================================================================
   CANDOOR · page-specific
   Tokens, nav, questions and footer come from site.css.

   A Yolex page about Candoor, not a copy of Candoor's own site. The painting
   carries the product's identity, which is the rule across all three product
   pages: each owns an image, the house owns the palette. Candoor's green stays
   on candoor.dev, where it belongs.

   Deliberately has no sign in and no sign up. Those are doors into a live round,
   they belong on the app, and putting them here would send someone without an
   invitation into a wall.
   ========================================================================== */
/* The living painting, ported from candoor.dev rather than flattened. It is the
   product's signature and the reason its own site feels alive, so a still here
   made this page the poorer of the two.

   Base plate plus four pieces cut out of it, each moving on its own. Every layer
   is baked to the same canvas and shares one background-position, so there is no
   per-layer alignment to drift. Durations are mutually non-harmonic, which is
   what stops the loop ever visibly repeating.

   There was a fifth, a sun glitter on the water, and it is gone deliberately.
   The generation came back as a bounded oval rather than a specular path: it
   overlapped the far headland, ended in a domed cap short of the sun, and its
   dappled high frequency sparkle sat visibly outside the flat gouache of the
   rest of the painting. The base plate paints this water mirror calm on purpose,
   so there is nothing here for a reflection to attach to. If it ever comes back
   it needs a new asset, not a new mask. */
.art--candoor {
  --art-pos: 62% 44%;
  background: #f3e7cf url("/media/cd-main.webp") var(--art-pos) / cover no-repeat;
  background-image: image-set(url("/media/cd-main.avif") type("image/avif"), url("/media/cd-main.webp") type("image/webp"));
  transform-origin: 68% 45%;
  /* Applied to the container so it lifts the base plate and all four layers as
     one composite, and sits under the veil so text contrast is unaffected. The
     left of this painting is pale sky and misty water by nature, so it needs the
     lift more than the wave or the field did. */
  filter: saturate(1.1) contrast(1.03);
}
.art__layer {
  position: absolute;
  inset: 0;
  background-position: var(--art-pos);
  background-size: cover;
  background-repeat: no-repeat;
}
.art__layer--clouds { background-image: image-set(url("/media/cd-layer-clouds.avif") type("image/avif"), url("/media/cd-layer-clouds.webp") type("image/webp")); }
.art__layer--birds  { background-image: image-set(url("/media/cd-layer-birds.avif") type("image/avif"), url("/media/cd-layer-birds.webp") type("image/webp")); }
.art__layer--leaves { background-image: image-set(url("/media/cd-layer-leaves.avif") type("image/avif"), url("/media/cd-layer-leaves.webp") type("image/webp")); }
/* Pivots at the branch root rather than the layer centre, so the bough bends
   instead of swinging sideways through the sky. */
.art__layer--canopy {
  background-image: image-set(url("/media/cd-layer-canopy.avif") type("image/avif"), url("/media/cd-layer-canopy.webp") type("image/webp"));
  transform-origin: 96% 12%;
}

@keyframes cd-clouds { from { translate: -1.8% 0; } to { translate: 2.4% 0; } }
@keyframes cd-birds  { from { translate: -3.1% 1.1%; } to { translate: 3.9% -1.6%; } }
/* Below about 0.6deg the tip creeps at under a pixel a second and the tree reads
   as painted on, so this is the floor rather than a taste call. */
@keyframes cd-canopy { from { rotate: -0.85deg; } to { rotate: 0.85deg; } }
@keyframes cd-leaves {
  0%   { translate: 6px -22px; rotate: -1.5deg; opacity: 0; }
  14%  { opacity: 0.92; }
  80%  { opacity: 0.92; }
  100% { translate: -30px 104px; rotate: 2.5deg; opacity: 0; }
}
@keyframes cd-drift { from { translate: -2.5% -0.8%; } to { translate: 2.5% 0.8%; } }

@media (prefers-reduced-motion: no-preference) {
  .art--candoor { animation: cd-drift 37s ease-in-out infinite alternate, art-breathe 53s ease-in-out infinite alternate; animation-delay: -8s, -12s; }
  .art__layer--clouds { animation: cd-clouds 43s ease-in-out infinite alternate; }
  .art__layer--canopy { animation: cd-canopy 11s ease-in-out infinite alternate; }
  .art__layer--birds  { animation: cd-birds 18s ease-in-out infinite alternate; }
  /* The fall starts at opacity 0 by design, so a page landing on frame zero would
     read as a missing layer. The negative delay starts it mid flight. */
  .art__layer--leaves { animation: cd-leaves 14s linear infinite; animation-delay: -4s; }
}

/* Anyone who asked for less motion gets the flattened composite: the same scene,
   everything in place, standing still. */
@media (prefers-reduced-motion: reduce) {
  .art__layer { display: none; }
  .art--candoor {
    background-image: image-set(url("/candoor-scene.avif") type("image/avif"), url("/candoor-scene.webp") type("image/webp"));
  }
}

.cd-hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: center;
  padding-block: 9rem 6rem;
}
/* Lighter than Storm's. This painting has a genuinely quiet left half, so the
   veil only has to seat the type rather than rescue it. */
.cd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Same treatment the ARM field got: clears entirely by 64% rather than
       trailing a haze to the far edge, because a cream wash does not dim a
       picture, it pulls every colour toward the paper. Anywhere it is not
       strictly needed it should be gone rather than merely thin. */
    linear-gradient(100deg,
      rgba(250, 245, 234, 0.72) 0%,
      rgba(250, 245, 234, 0.6) 30%,
      rgba(250, 245, 234, 0.24) 48%,
      rgba(250, 245, 234, 0.04) 58%,
      rgba(250, 245, 234, 0) 64%),
    linear-gradient(to bottom, rgba(250, 245, 234, 0.36) 0%, rgba(250, 245, 234, 0) 20%);
}
.cd-hero .wrap { position: relative; z-index: 1; }
.cd-mark { font-family: var(--serif); font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -0.032em; margin-block-end: 0.6rem; }
.cd-mark small {
  font-family: var(--mono); font-size: 0.17em; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  vertical-align: 0.95em; margin-inline-start: 0.3em;
}
.cd-hero .label { display: block; margin-block-end: 2rem; }
.cd-hero h1 {
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.1; letter-spacing: -0.022em;
  max-inline-size: 22ch; margin-block-end: 1.5rem;
}
.cd-hero h1 em { font-style: italic; color: var(--accent); }
.cd-hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink); max-inline-size: 37rem; margin-block-end: 2rem; }
.cd-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.page { background: linear-gradient(to bottom, rgba(250,245,234,0) 0, rgba(250,245,234,0.78) 12vh, rgba(250,245,234,0.9) 40vh); }

/* ---- The two fronts. Described, not linked: these are experiences, not doors. ---- */
.fronts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); list-style: none; margin: 0; padding: 0; }
.fronts li { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.fronts .label { display: block; margin-block-end: 1.1rem; }
.fronts h3 { font-size: 1.35rem; margin-block-end: 0.8rem; }
.fronts p { color: var(--ink-2); font-size: 0.975rem; }
.fronts p + p { margin-block-start: 0.8rem; }

/* ---- The mechanism ---- */
.mech { list-style: none; margin: 0; padding: 0; }
.mech > li { padding-block: 2rem; border-block-start: 1px solid var(--line); }
.mech > li:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 900px) { .mech > li { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 3rem; } }
.mech h3 { font-size: 1.1rem; }
.mech p { color: var(--ink-2); max-inline-size: 44rem; }

/* ---- The two anonymities. The sharpest thing anyone has written about this
   product, so it gets the weight of a pull quote rather than a bullet. ---- */
.two-anon {
  margin-block-start: 3rem;
  padding: 2.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  max-inline-size: 46rem;
}
.two-anon p { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.35; }
.two-anon p + p { margin-block-start: 1.1rem; }
.two-anon strong { font-weight: 400; color: var(--accent-deep); font-style: italic; }
.two-anon .label { display: block; margin-block-end: 1.25rem; }

/* ---- Limits ---- */
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.limits li { border-block-start: 2px solid var(--ink); padding-block-start: 1.15rem; }
.limits h3 { font-size: 1.1rem; margin-block-end: 0.5rem; }
.limits p { color: var(--ink-2); font-size: 0.95rem; }

/* ---- Where it fits ---- */
.fits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.fits li { border-block-start: 2px solid var(--sea); padding-block-start: 1.15rem; }
.fits h3 { font-size: 1.05rem; margin-block-end: 0.5rem; }
.fits p { color: var(--ink-2); font-size: 0.93rem; }