/* Subtle motion and the portrait frame. Motion runs only when html.fx is set (not set for prefers-reduced-motion). */
html{--dir:1}
html[dir=rtl]{--dir:-1}

/* 1. Hero quote written line by line */
@keyframes fx-show{to{opacity:1}}
.fx .hero-quote blockquote:not(.fx-on){opacity:0;animation:fx-show 0s 3s forwards}
.hero-quote .ln{display:block;width:fit-content;margin-inline:auto}
@keyframes fx-wr-ltr{from{clip-path:inset(-30% 100% -30% -3%)}to{clip-path:inset(-30% -3% -30% -3%)}}
@keyframes fx-wr-rtl{from{clip-path:inset(-30% -3% -30% 100%)}to{clip-path:inset(-30% -3% -30% -3%)}}
.fx .hero-quote .ln{animation:fx-wr-ltr 1.15s cubic-bezier(.45,.05,.35,1) both}
html[dir=rtl].fx .hero-quote .ln{animation-name:fx-wr-rtl}

/* 2. Hand-drawn underline under the highlighted words */
.hero-quote em{padding-bottom:.14em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 78 11, 118 6 S 176 3, 197 7' fill='none' stroke='%23FF9E0D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .3em}
html[dir=rtl] .hero-quote em{background-position:100% 100%}
.fx .hero-quote em{background-size:0% .3em;transition:background-size .9s cubic-bezier(.5,.1,.3,1)}
.fx .hero-quote em.drawn{background-size:100% .3em}

/* 3. The two circles move toward each other */
.fx .circles i{transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .2s}
.fx .rv:not(.in) .circles i:first-child{transform:translateX(calc(var(--dir) * -18px))}
.fx .rv:not(.in) .circles i:last-child{transform:translateX(calc(var(--dir) * 18px))}

/* 4. Soft entrance while scrolling */
.fx .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.fx .rv.in{opacity:1;transform:none}

/* 5. Gentle hover */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .post-card{transition:transform .25s ease,box-shadow .25s ease}
  .post-card:hover{box-shadow:inset 0 0 0 1px var(--line-2),0 12px 28px rgba(24,9,82,.12)}
  .post-card .cover{transition:transform .6s ease;transform-origin:50% 100%}
  .post-card:hover .cover{transform:scale(1.05)}
  .card{transition:transform .25s ease,box-shadow .25s ease}
  .card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),0 12px 28px rgba(24,9,82,.10)}
  .card:hover .circles i:first-child{transform:translateX(calc(var(--dir) * 8px))}
  .card:hover .circles i:last-child{transform:translateX(calc(var(--dir) * -8px))}
  .proj .media{overflow:hidden;border-radius:var(--radius)}
  .proj .media img{transition:transform .6s ease}
  .proj:hover .media img{transform:scale(1.03)}
}

/* Portrait: hand-drawn offset frame, peach circle and a handwritten note */
.aya-frame{position:relative;isolation:isolate;margin:0 0 70px;max-width:480px}
.aya-frame img{position:relative;display:block;width:100%;border-radius:18px;box-shadow:0 14px 34px rgba(24,9,82,.14)}
.aya-frame::before,.about .pic::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--amber);border-radius:255px 20px 225px 20px/20px 225px 20px 255px;transform:translate(calc(var(--dir) * -16px),16px)}
.aya-frame::after,.about .pic::after{content:"";position:absolute;z-index:-1;width:110px;height:110px;border-radius:50%;background:var(--peach);top:-30px;inset-inline-start:-30px}
.about{isolation:isolate}
.about .pic{position:relative;margin:56px clamp(24px,4vw,56px) 96px;border-radius:18px;min-height:520px}
.doodle{position:absolute;display:flex;align-items:flex-end;gap:2px;font-family:var(--f-hand);font-size:28px;line-height:1;transform:rotate(-5deg);pointer-events:none;bottom:-62px;inset-inline-start:18px;color:var(--amber-text)}
.about .pic .doodle{color:var(--peach)}
.doodle svg{width:46px;height:52px;overflow:visible}
html[dir=rtl] .doodle svg{transform:scaleX(-1)}
.doodle path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fx .doodle path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease .5s}
.fx .in .doodle path,.fx .in.doodle path{stroke-dashoffset:0}
@media (max-width:640px){
  .about .pic{margin:28px 24px 84px;min-height:420px}
  .aya-frame::before,.about .pic::before{transform:translate(calc(var(--dir) * -10px),10px)}
  .aya-frame::after,.about .pic::after{width:80px;height:80px;top:-20px;inset-inline-start:-14px}
}

/* Video: click-to-load YouTube (privacy-enhanced mode) */
.video{margin:0 0 40px;max-width:860px}
.video-lite{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:0 14px 34px rgba(24,9,82,.14)}
.video-lite img{width:100%;height:100%;object-fit:cover;display:block}
.video-lite .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(255,207,134,.55);transition:transform .2s ease}
.video-lite .play svg{width:30px;height:30px;fill:var(--peach);margin-inline-start:5px}
html[dir=rtl] .video-lite .play svg{margin-inline-start:0;margin-inline-end:5px}
.video-lite:hover .play,.video-lite:focus-visible .play{transform:scale(1.08)}
.video-lite:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius)}
.video figcaption{margin-top:12px;font-size:16px;color:var(--text-soft)}