/* mistressaria.com home page only (public/ma/index.html), loaded after ma.css.

   The quote band and "My particular pleasures", given some of the depth of
   the duos pages (duos.css, the design language locked 2026-10-13) while the
   rest of the home page keeps its simpler look: film grain, the torn-edge
   paint strokes, a slow light, and a framed photograph that floats. The owner
   asked for this on 2026-10-17 as the first step of bringing that look in
   slowly, without the site trying to do too much. ma.css is shared by every
   page and is not touched; nothing here applies anywhere else. */

:root{
  --serif:Georgia,"Times New Roman",serif;
  --gold:#caa66b;
  --grain:url("/ma/duos-grain.svg");
}

/* Links inside the home page's paragraphs, in the site's own link style
   (the one ma.css gives .inline-list) rather than the browser's blue. */
.split__copy p a,.pleasures a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(92,20,32,.45);transition:color .3s ease;
}
.split__copy p a:hover,.pleasures a:hover{color:var(--wine)}

/* ───────────────────────────────────────────────── the quote band ── */
.quote-band{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(84px,13vw,180px) clamp(24px,8vw,140px);
  background:
    radial-gradient(ellipse at 14% 18%,rgba(161,44,63,.55),transparent 55%),
    radial-gradient(ellipse at 88% 100%,rgba(38,4,10,.55),transparent 60%),
    var(--band);
}
/* A soft vignette, so the edges fall away like a lit photograph. */
.quote-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(20,2,6,.5) 100%);
}
/* Film grain, the same file and movement as the duos pages. */
.quote-band::after{
  content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;
  background-image:var(--grain);opacity:.16;mix-blend-mode:overlay;
  animation:homeGrain 1.2s steps(6) infinite;
}
/* A warm light that drifts slowly across the burgundy and back. */
.quote-band__light{
  position:absolute;z-index:0;left:50%;top:50%;width:80vmax;height:80vmax;
  margin:-40vmax 0 0 -40vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(217,191,117,.17),rgba(217,191,117,0) 58%);
  animation:homeLight 16s ease-in-out infinite alternate;
}
/* The torn-edge paint strokes from duos.css, drifting on their own clock. */
.quote-band__brush{position:absolute;z-index:1;pointer-events:none}
.quote-band__brush--gold{
  width:64vw;height:7.5rem;right:-16vw;bottom:10%;
  background:linear-gradient(96deg,transparent 0,rgba(185,150,75,.05) 8%,rgba(217,191,117,.32) 42%,rgba(185,150,75,.08) 72%,transparent);
  clip-path:polygon(0 52%,18% 22%,34% 44%,53% 16%,70% 38%,100% 20%,92% 70%,74% 58%,61% 86%,43% 61%,21% 79%,0 67%);
  transform:rotate(-11deg);animation:homeDriftA 19s ease-in-out infinite alternate;
}
.quote-band__brush--cream{
  width:72vw;height:9rem;left:-18vw;top:8%;
  background:linear-gradient(92deg,transparent 0 4%,rgba(246,239,225,.04) 8%,rgba(246,239,225,.24) 38%,rgba(246,239,225,.06) 78%,transparent);
  clip-path:polygon(0 42%,10% 20%,28% 35%,42% 12%,69% 36%,100% 22%,96% 76%,68% 60%,51% 84%,30% 63%,13% 82%,0 70%);
  transform:rotate(-8deg);animation:homeDriftB 23s ease-in-out infinite alternate;
}
/* One oversized, faded quotation mark behind the words. */
.quote-band__mark{
  position:absolute;z-index:1;left:50%;top:50%;pointer-events:none;user-select:none;
  transform:translate(-92%,-.4em);
  font:400 clamp(18rem,48vw,42rem)/1 var(--serif);color:rgba(232,217,207,.11);
}
.quote-band__quote{position:relative;z-index:2;margin:0 auto}
/* Italic is allowed here and nowhere else: her own words, quoted (owner,
   2026-10-17, the one exception to the no-italics rule). */
.quote-band__quote p{
  max-width:20ch;margin:0 auto;
  font:italic 400 clamp(1.75rem,4.6vw,4.3rem)/1.12 var(--serif);
  letter-spacing:-.02em;color:var(--sand);text-shadow:0 4px 40px rgba(30,2,8,.45);
}

/* ─────────────────────────────────────────── my particular pleasures ── */
.pleasures{
  position:relative;isolation:isolate;
  overflow:hidden;overflow:clip; /* clip, not hidden, so the photograph can stay sticky */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
  background:
    radial-gradient(circle at 8% 10%,rgba(185,150,75,.18),transparent 30rem),
    radial-gradient(circle at 96% 92%,rgba(125,34,48,.08),transparent 32rem),
    linear-gradient(135deg,#fbf8f3,#f4f1ee 50%,#ece4da);
}
/* Grain on cream: the same noise, darkened, so it reads on a light ground. */
.pleasures::after{
  content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;
  background-image:var(--grain);filter:invert(1);opacity:.06;mix-blend-mode:multiply;
  animation:homeGrain 1.2s steps(6) infinite;
}
/* A faint gold stroke under the photograph. */
.pleasures::before{
  content:"";position:absolute;z-index:0;left:-14vw;bottom:12%;width:60vw;height:7.5rem;pointer-events:none;
  background:linear-gradient(96deg,transparent 0,rgba(185,150,75,.04) 8%,rgba(202,166,107,.26) 42%,rgba(185,150,75,.06) 72%,transparent);
  clip-path:polygon(0 52%,18% 22%,34% 44%,53% 16%,70% 38%,100% 20%,92% 70%,74% 58%,61% 86%,43% 61%,21% 79%,0 67%);
  transform:rotate(-9deg);
}
/* And a faint ink one behind the list. */
.pleasures__brush{
  position:absolute;z-index:0;right:-14vw;top:12%;width:58vw;height:8rem;pointer-events:none;
  background:linear-gradient(96deg,transparent,rgba(16,13,13,.04) 12%,rgba(16,13,13,.10) 45%,rgba(16,13,13,.03) 80%,transparent);
  clip-path:polygon(0 48%,13% 18%,34% 40%,59% 14%,83% 38%,100% 20%,96% 70%,79% 56%,62% 86%,42% 60%,19% 78%,0 66%);
  transform:rotate(-14deg);
}
/* The photograph floats in a frame with an offset gold border, and on a
   computer stays in view while the list scrolls past beside it. */
.pleasures__figure{
  position:sticky;top:0;z-index:1;height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,8vh,96px) clamp(40px,5vw,84px);
}
.pleasures__frame{position:relative;margin:0;width:100%;max-width:34rem}
.pleasures__frame::before{
  content:"";position:absolute;inset:1.3rem -1.3rem -1.3rem 1.3rem;z-index:-1;
  border:1px solid rgba(185,150,75,.7);
}
.pleasures__frame img{
  width:100%;height:auto;aspect-ratio:4/5;max-height:calc(100svh - 190px);
  object-fit:cover;object-position:74% 50%;
  box-shadow:0 40px 90px rgba(16,13,13,.32);
}
.pleasures__copy{
  position:relative;z-index:2;
  padding:clamp(64px,10vw,140px) clamp(28px,6vw,96px) clamp(72px,11vw,150px) clamp(20px,3vw,44px);
}
.pleasures__intro{text-align:justify;font-size:14px;line-height:1.85;color:#3a3436;max-width:38rem;margin-bottom:clamp(30px,5vh,52px)}
/* No bullets, dashes or markers: the items are separated by space alone. */
.pleasures__list{list-style:none;margin:0;padding:0;max-width:36rem}
.pleasures__list li{
  font:400 clamp(1.15rem,1.65vw,1.45rem)/1.42 var(--serif);
  letter-spacing:-.01em;color:#1d1617;
}
.pleasures__list li + li{margin-top:clamp(18px,2.6vh,26px)}
/* Her note to the reader, apart from the list. Italic for the same reason
   as the quote band: her own words, quoted. */
.pleasures__note{position:relative;max-width:36rem;margin:clamp(44px,7vh,72px) 0 0;padding-top:clamp(28px,4vh,40px)}
.pleasures__note::before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--gold)}
.pleasures__note p{font:italic 400 clamp(1rem,1.15vw,1.1rem)/1.8 var(--serif);color:#4a3236}

/* ─────────────────────────────────────────────────────────── motion ── */
/* Words rise into place as they scroll into view, driven by the scroll
   itself. A browser that cannot do that simply shows them, and nothing
   depends on a script, so the copy can never be left invisible. */
@keyframes homeRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes homeGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
@keyframes homeLight{
  0%{transform:translate(-24%,-12%) scale(.9);opacity:.65}
  50%{opacity:1}
  100%{transform:translate(24%,14%) scale(1.1);opacity:.75}
}
@keyframes homeDriftA{from{transform:translateX(0) rotate(-11deg)}to{transform:translateX(-7vw) rotate(-9deg)}}
@keyframes homeDriftB{from{transform:translateX(0) rotate(-8deg)}to{transform:translateX(8vw) rotate(-10deg)}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rise{animation:homeRise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  }
}
@media (prefers-reduced-motion:reduce){
  .quote-band::after,.quote-band__light,.quote-band__brush,.pleasures::after{animation:none}
}

/* ──────────────────────────────────────────────────────────── phone ── */
@media (max-width:820px){
  .pleasures{grid-template-columns:1fr}
  .pleasures__figure{position:relative;height:auto;padding:clamp(44px,9vw,64px) clamp(36px,10vw,64px) 8px clamp(24px,7vw,48px)}
  .pleasures__frame img{max-height:none}
  .pleasures__copy{padding:clamp(48px,11vw,72px) 24px 76px}
  .quote-band__quote p{max-width:16ch}
}