/* Hero part 2 ear photo (11-09), ported from the naomi-hero-photo prototype (:5220). */

/* the photo card: top right of the 28-day view, where the numbers were */
.ear-card{margin:0;border-radius:18px;overflow:hidden;opacity:0;pointer-events:none;
  clip-path:inset(100% 0 0 0 round 18px);will-change:clip-path,transform}
.ear-media{position:absolute;inset:0;transform-origin:62% 60%;will-change:transform}
.ear-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.ear-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(20,16,14,.18) 0%,rgba(20,16,14,0) 30%,rgba(20,16,14,0) 70%,rgba(20,16,14,.22) 100%)}
.ear-card .ear-ring{z-index:2}
.ear-card .ear-tag{color:#fff}
.ear-cap{position:absolute;left:18px;top:16px;z-index:2;color:#fff;font-size:9.5px;letter-spacing:.2em;text-shadow:0 1px 10px rgba(0,0,0,.35);
  display:flex;align-items:center;gap:8px}
.ear-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--naomi-pink);animation:bpm .88s infinite}

/* the thread: white over the photo, ink on Cream; a pink pulse runs down it into the line */
.ear-thread{left:0;top:0;pointer-events:none;overflow:visible}
.ear-thread path{fill:none;stroke-linecap:round}
.ear-thread .th-base{stroke-dasharray:1;stroke-dashoffset:1}
#threadIn .th-base{stroke:rgba(255,255,255,.85);stroke-width:1}
#threadOut .th-base{stroke:rgba(0,0,0,.38);stroke-width:1}
.ear-thread .th-flow{stroke:#F06A93;stroke-width:2;stroke-dasharray:.035 .965;opacity:0;transition:opacity .6s var(--ease-out);animation:thFlow 1.76s linear infinite}
#threadIn .th-flow{stroke:#fff}
.ear-thread.is-live .th-flow{opacity:1}
@keyframes thFlow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.th-end{fill:#F06A93;opacity:0;transition:opacity .5s var(--ease-out);transform-box:fill-box;transform-origin:center}
.ear-thread.is-live .th-end{opacity:1;animation:thBeat .88s ease-out infinite}
@keyframes thBeat{0%{transform:scale(1)}15%{transform:scale(1.5)}100%{transform:scale(1)}}

/* phones */
.m-ear{position:relative;margin:18px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:16/10;max-height:27svh;width:100%;
  clip-path:inset(100% 0 0 0 round 16px)}
.m-ear .ear-media img{object-position:50% 55%}
.m-ear .ear-tag{color:#fff;font-size:10px;letter-spacing:.14em}

@media (prefers-reduced-motion:reduce){.ear-thread .th-flow,.ear-thread.is-live .th-end,.ear-cap::before{animation:none}}
.m-ear .ear-tag{left:auto;right:calc(100% + 12px);translate:6px -50%}
.m-ear .ear-ring.is-on .ear-tag{translate:0 -50%}
/* the reading sits LEFT of the ring, over the hair, so it never runs off the card */
.ear-card .ear-tag{left:auto;right:calc(100% + 12px);translate:6px -50%}
.ear-card .ear-ring.is-on .ear-tag{translate:0 -50%}

/* 11-09: "What is Naomi?" block beside the ear card (same top + height as the card) */
.what-is{display:flex;flex-direction:column}
.what-is h2{font-size:56px;font-weight:500;letter-spacing:-.045em;line-height:1;margin:18px 0 0;text-wrap:balance}
.what-is p{font-size:16px;line-height:1.55;color:#333;margin:auto 0 0;width:430px;text-wrap:pretty}
.what-q{display:flex;align-items:center;gap:10px;color:var(--ink)}
.what-q i{width:6px;height:6px;border-radius:50%;background:var(--naomi-pink);animation:bpm .88s infinite}
@media (prefers-reduced-motion:reduce){.what-q i{animation:none}}