/* ==================================================================
   ABOUT page — soft grey, two columns, live clock
   ================================================================== */

/* (4) ABOUT COLORS — uses the homepage palette from css/styles.css */
.about-page {
  --about-bg:    var(--color-bg);      /* #F2F2F0 off-white          */
  --about-ink:   var(--color-text);    /* #1C1C1C main text          */
  --about-light: var(--color-muted);   /* #8A8A86 clock lead + labels */
  --about-dim:   var(--color-muted);   /* secondary text             */
  background: var(--about-bg);
  color: var(--about-ink);
}

main.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 140px);
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(80px, 10vw, 140px);
}

/* ------------------------------------------------------------------
   Left — clock + links
   ------------------------------------------------------------------ */
.about__intro {
  position: sticky;
  top: calc(var(--header-h) + clamp(32px, 5vw, 64px));
  align-self: start;
}

.about__clock {
  margin: 0;
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.about__clock > span { display: block; }
.about__light { color: var(--about-light); }
.about__time { font-variant-numeric: tabular-nums; }

/* Day / night icon next to the time — follows the hour in Los Angeles */
.about__sky {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.22em;
  vertical-align: 0.02em;
}
.about__sky svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: translateY(30%) scale(0.6);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.about__clock[data-phase="day"]   .about__sun,
.about__clock[data-phase="dawn"]  .about__dusk,
.about__clock[data-phase="dusk"]  .about__dusk,
.about__clock[data-phase="night"] .about__moon { opacity: 1; transform: none; }

/* sun — warm orange, rays turn slowly */
.about__sun circle { fill: var(--color-accent); }
.about__rays {
  stroke: var(--color-accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  transform-origin: 20px 20px;
  animation: about-spin 24s linear infinite;
}

/* dawn + dusk — half sun on the horizon, gently rising/sinking */
.about__dusk-sun {
  fill: #EE8A5A;
  animation: about-horizon 5s ease-in-out infinite alternate;
}
.about__dusk-rays {
  fill: none;
  stroke: #EE8A5A;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* moon — cool grey crescent, stars twinkle */
.about__moon path { fill: #6F7685; }
.about__star { fill: #9AA1AE; animation: about-twinkle 2.6s ease-in-out infinite; }
.about__star--2 { animation-delay: 0.9s; }
.about__star--3 { animation-delay: 1.7s; }

@keyframes about-spin { to { transform: rotate(360deg); } }
@keyframes about-horizon { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }
@keyframes about-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* "Day" / "Night" for screen readers */
.about__phase {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The story as one line — journey, rhythm, pacing, form, motion */
.about__line {
  display: block;
  width: min(100%, 460px);
  height: auto;
  margin: clamp(20px, 2.6vw, 32px) 0 clamp(16px, 2.4vw, 28px);
  overflow: visible;
}
.about__stroke {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about__pen { fill: var(--color-accent); }
.about__origin { fill: var(--color-muted); }
.about__cap {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  fill: var(--color-muted);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.about__cap.is-on { opacity: 1; }

/* "Nice to meet you." — sign-off under the line */
.about__hello {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.4;
}

/* hello: the line under "you" and the hand you can wave back with */
.about__you { position: relative; display: inline-block; }
.about__you svg { position: absolute; left: -4%; bottom: -0.32em; width: 108%; height: 0.5em; overflow: visible; }
.about__you path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;          /* drawn when it comes into view */
}
.about__hello.is-drawn .about__you path { animation: hello-draw 0.9s ease-in-out 0.2s forwards; }
@keyframes hello-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.about__wave {
  display: inline-grid;
  overflow: visible;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.3em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  vertical-align: -0.3em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.about__wave svg { width: 1.15em; height: 1.15em; overflow: visible; transform-origin: 70% 90%; }
.about__wave path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about__wave:hover,
.about__wave:focus-visible { color: var(--color-accent); }
.about__wave:hover svg { transform: rotate(10deg); transition: transform 0.2s ease; }
.about__wave.is-waving svg { animation: hello-wave 1s ease-in-out; }
@keyframes hello-wave {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(18deg); }
  30%, 60% { transform: rotate(-10deg); }
  75% { transform: rotate(8deg); }
}
.about__wave-reply {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-heading);
  letter-spacing: 0.08em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.about__wave-reply.is-on { opacity: 1; transform: none; }
.about__wave-reply a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); padding-bottom: 1px; transition: color var(--dur) var(--ease); }
.about__wave-reply a:hover { color: var(--color-accent); }
/* the pop of dots when you wave */
.about__wave { position: relative; }
.about__pop {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  animation: hello-pop 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes hello-pop {
  from { transform: translate(0, 0) scale(var(--s)); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about__you path { stroke-dashoffset: 0; }
  .about__hello.is-drawn .about__you path, .about__wave.is-waving svg { animation: none; }
}

/* my name in Bangla, signed under the hello */
.about__sign {
  display: grid;
  gap: 16px;                     /* room for the drips to hang */
  margin: 18px 0 0;
}
.about__sign-bn {
  position: relative;
  justify-self: start;
  color: var(--color-accent);
  transform-origin: 30% 60%;
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);   /* a little bounce */
}
.about__sign-bn:hover,
.about__sign-bn:focus-visible { transform: scale(1.12); }
.about__sign-word {
  display: inline-block;
  font-family: "Baloo Da 2", "Anek Bangla", "Noto Sans Bengali", sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1;
  opacity: 0;                    /* hidden until it rolls in */
}
/* rolls in like the logo letters (keyframes in css/styles.css) */
.about__sign.is-written .about__sign-word { opacity: 1; animation: dl-roll 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both; }

/* two drips that hang from the letters (no gap) and sway, like the
   logo; sized in em so they stay attached at any size */
.about__drips { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.about__drips i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(2px, 0.08em);
  font-style: normal;
  transform-origin: 50% 0;
  visibility: hidden;
}
.about__drips i:nth-of-type(1) { --x: 29%; --y: 72%; --h: 0.42em; }   /* under শু */
.about__drips i:nth-of-type(2) { --x: 77%; --y: 68%; --h: 0.26em; }   /* under ভ */
.about__drips b {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 0;
}
.about__drips u {
  position: absolute;
  left: 50%;
  top: calc(var(--h) - 0.04em);
  width: 0.26em;
  height: 0.26em;
  margin-left: -0.13em;
  border-radius: 50%;
  background: currentColor;
}
.about__sign.is-written .about__drips i {
  visibility: visible;
  animation: dl-sway 1.6s cubic-bezier(0.37, 0, 0.63, 1) calc(1.9s + var(--i) * -0.5s) infinite alternate;
}
.about__sign.is-written .about__drips b { animation: dl-grow 0.35s cubic-bezier(0.5, 0, 0.75, 0) calc(1.05s + var(--i) * 140ms) both; }
.about__sign.is-written .about__drips u { animation: dl-fall 0.8s linear calc(1.05s + var(--i) * 140ms) both; }
.about__sign-en { opacity: 0; transition: opacity 0.6s ease 0.9s; }
.about__sign.is-written .about__sign-en { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .about__sign-word { opacity: 1; }
  .about__drips i { visibility: visible; }
  .about__sign.is-written .about__sign-word,
  .about__sign.is-written .about__drips i,
  .about__sign.is-written .about__drips b,
  .about__sign.is-written .about__drips u { animation: none; }
  .about__sign-en { opacity: 1; transition: none; }
}
.about__sign-en {
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-heading);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-muted);
}

.about__links { display: grid; gap: 4px; }
.about__links a {
  position: relative;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.4;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.about__links a::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.about__links a:hover,
.about__links a:focus-visible { color: var(--color-accent); padding-left: 1.4em; }
.about__links a:hover::before,
.about__links a:focus-visible::before { opacity: 1; }

/* ------------------------------------------------------------------
   Right — story
   ------------------------------------------------------------------ */
.about__story {
  max-width: 600px;
  padding-top: 0.6em;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.about__story > p:not(.about__label) { margin: 0 0 1.2em; }
.about__story > p:first-of-type + p { margin-top: 0; }

.about__label {
  margin: clamp(48px, 6vw, 72px) 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--about-light);
}
.about__story > .about__label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.about__list { display: grid; gap: 14px; }
.about__list li { display: grid; line-height: 1.45; }
.about__list b { font-weight: 400; }
.about__list span { color: var(--about-dim); }
.about__list--plain { gap: 2px; }

/* recent work card */
.about__work { display: block; max-width: 360px; }
.about__work img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 500ms var(--ease), opacity 450ms var(--ease);
}
.about__work span {
  display: block;
  margin-top: 10px;
  transition: color var(--dur) var(--ease), opacity 450ms var(--ease);
}
.about__work i { font-style: normal; display: inline-block; transition: transform var(--dur) var(--ease); }
.about__work:hover img { filter: none; }
/* a work with a film clip shows the clip instead of the image */
.about__work video { display: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: grayscale(1) contrast(1.05); transition: filter 500ms var(--ease), opacity 450ms var(--ease); }
.about__work.has-video video { display: block; }
.about__work.has-video img { display: none; }
.about__work:hover video { filter: none; }
/* changing to the next project (js/about.js): a soft crossfade on
   hover, a swipe (out left, in from the right) when it changes on its own */
.about__work { overflow: hidden; }
.about__work img, .about__work video, .about__work span {
  transition: filter 500ms var(--ease), opacity 400ms var(--ease), transform 400ms cubic-bezier(0.5, 0, 0.2, 1), color var(--dur) var(--ease);
}
.about__work.is-swapping img,
.about__work.is-swapping video,
.about__work.is-swapping span { opacity: 0; }
.about__work.is-swipe-out img,
.about__work.is-swipe-out video,
.about__work.is-swipe-out span { opacity: 0; transform: translateX(-60px); }
.about__work.is-swipe-in img,
.about__work.is-swipe-in video,
.about__work.is-swipe-in span { opacity: 0; transform: translateX(60px); transition: none; }
.about__work:hover span { color: var(--color-accent); }
.about__work:hover i { transform: translateX(6px); }

.about-page .site-footer { color: var(--about-dim); }

/* ------------------------------------------------------------------
   Cursor dot (mouse only) — grows over links
   ------------------------------------------------------------------ */
.about__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--color-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease), width 250ms var(--ease), height 250ms var(--ease), margin 250ms var(--ease), background-color 250ms var(--ease);
  mix-blend-mode: multiply;
}
.about__cursor.is-on { opacity: 0.18; }
.about__cursor.is-link {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: var(--color-accent);
  opacity: 0.35;
}
@media (hover: none), (pointer: coarse) {
  .about__cursor { display: none; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  main.about { grid-template-columns: 1fr; }
  .about__intro { position: static; }
  .about__story { max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  /* line is shown fully drawn; js/about.js skips the animation */
  .about__rays, .about__dusk-sun, .about__star { animation: none; }
}

/* ------------------------------------------------------------------
   Typography — same as the Contact page:
   Six Caps for the big clock sentence, DM Mono for small labels.
   Story text, lists and links stay in Inter.
   ------------------------------------------------------------------ */
.about-page {
  --about-tall: "Six Caps", "Oswald", "Arial Narrow", sans-serif;
  --about-mono: "DM Mono", ui-monospace, Menlo, monospace;
}
.about__clock {
  font-family: var(--about-tall);
  font-size: clamp(4.25rem, 2rem + 7vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.about__sky { width: 0.5em; height: 0.5em; margin-left: 0.18em; vertical-align: 0.06em; }
.about__label {
  font-family: var(--about-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.about__cap { font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0; }

/* ------------------------------------------------------------------
   Same typefaces as the Work page: Inter, uppercase and spaced out,
   in place of Six Caps (layout unchanged). Labels stay DM Mono.
   ------------------------------------------------------------------ */
.about__clock {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   শুভ in the style of the SHUVO logo (AB-003): Baloo Da 2 ExtraBold in
   coral, softly rounded. A soft brush paints it in, left to right, like
   a hand writing it, then a small hop. (Replaces the roll-in + drips of
   the old drip logo.)
   ------------------------------------------------------------------ */
.about__sign-word {
  font-size: clamp(1.35rem, 2.1vw, 1.55rem); letter-spacing: -.02em; white-space: nowrap;
  text-shadow: 0.0126em 0.0000em 0 currentColor,0.0116em 0.0048em 0 currentColor,0.0089em 0.0089em 0 currentColor,0.0048em 0.0116em 0 currentColor,0.0000em 0.0126em 0 currentColor,-0.0048em 0.0116em 0 currentColor,-0.0089em 0.0089em 0 currentColor,-0.0116em 0.0048em 0 currentColor,-0.0126em 0.0000em 0 currentColor,-0.0116em -0.0048em 0 currentColor,-0.0089em -0.0089em 0 currentColor,-0.0048em -0.0116em 0 currentColor,-0.0000em -0.0126em 0 currentColor,0.0048em -0.0116em 0 currentColor,0.0089em -0.0089em 0 currentColor,0.0116em -0.0048em 0 currentColor;
}
.about__sign.is-written .about__sign-word {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 0 40%, transparent 60%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: bn-paint 1.3s cubic-bezier(.45, .05, .4, 1) both, bn-hop .5s cubic-bezier(.3, 1.6, .5, 1) 1.35s;
}
@keyframes bn-paint { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes bn-hop { 40% { transform: translateY(-6%) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .about__sign.is-written .about__sign-word { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* a click (on the hand, or on শুভ) makes the hand wave hello properly:
   it turns coral, grows and waves three times, then settles back */
.about__wave.is-hi { color: var(--color-accent); }
.about__wave.is-hi svg { animation: hello-big-wave 1.6s cubic-bezier(.4, 0, .3, 1); }
@keyframes hello-big-wave {
  0%       { transform: scale(1) rotate(0); }
  10%      { transform: scale(1.7) rotate(0); }
  20%, 50%, 80% { transform: scale(1.7) rotate(22deg); }
  35%, 65% { transform: scale(1.7) rotate(-14deg); }
  90%      { transform: scale(1.7) rotate(0); }
  100%     { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .about__wave.is-hi svg { animation: none; } }