/* =====================================================================
   farzadrajabi.com — v6 homepage styles (requires site.css first)
   ===================================================================== */
@keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes miniBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes shipBob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-9px) rotate(.9deg)}}
@keyframes flagWave{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-9deg) scaleX(.84)}}
@keyframes puff{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}100%{transform:translate(-30px,-64px) scale(1.6);opacity:0}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-16px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(24px,5vw,64px) var(--gutter) 0}
.hero-eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--teal-dark)}
.h1{margin:0;font-size:clamp(52px,8.6vw,132px);line-height:.98;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em}
.line>span{display:block;animation:rise .9s var(--ease-out) both}
.line:nth-child(1)>span{animation-delay:.05s}
.line:nth-child(2)>span{animation-delay:.18s}
.line:nth-child(3)>span{animation-delay:.31s;color:var(--teal)}
.uword{position:relative;display:inline-block}
.uword svg{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.2em;overflow:visible}
.uword path{stroke-dasharray:520;animation:draw 1.1s var(--ease-io) .9s both}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:32px}
.hero-lead{margin:0;max-width:560px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-2)}

/* On desktop, use the open half of the hero for the ship. */
@media (min-width:1100px){
  .hero{min-height:650px;padding-top:42px}
  .hero>.wrap{position:relative;z-index:4;pointer-events:none}
  .hero-eyebrow,.hero .h1,.hero-row{max-width:53%}
  .hero-eyebrow,.hero .h1,.hero-row{pointer-events:auto}
  .hero .h1{font-size:clamp(68px,6.3vw,96px)}
  .hero-row{display:block;margin-top:26px}
  .hero-lead{max-width:540px;font-size:18px}
  .hero-row .ctas{margin-top:24px}
  .hero-row .btn{padding:0 19px;font-size:15px}
  .hero .scene{position:absolute;inset:0;height:auto;margin:0}
  .hero .wave-1{height:34%}
  .hero .wave-2{height:28%}
  .hero .wave-3{height:18%}
  .hero .shipbox{left:78%;bottom:12px;transform:translateX(-50%) scale(.84)}
}

.scene{position:relative;height:500px;margin:24px calc(var(--gutter) * -1) 0;overflow:hidden}
.wave{position:absolute;left:0;bottom:0;width:200%}
.wave-1{height:60%;z-index:1;animation:waveSlide 46s linear infinite}
.wave-2{height:44%;z-index:1;animation:waveSlide 30s linear infinite reverse}
.wave-3{height:24%;z-index:3;animation:waveSlide 18s linear infinite}
.shipbox{position:absolute;left:50%;bottom:20px;width:640px;height:420px;transform:translateX(-50%);transform-origin:50% 100%;z-index:2}

/* Ship (pure CSS, 640x420 stage) */
.ship{position:absolute;inset:0;transform-origin:50% 85%;animation:shipBob 5.5s ease-in-out infinite}
.ship .p{position:absolute}
.puff{width:18px;height:18px;border-radius:50%;background:#fff;animation:puff 3.3s ease-out infinite}
.funnel{left:386px;top:38px;width:42px;height:36px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#FFDB55,#E8B21C);box-shadow:inset 0 -6px 10px rgba(120,80,0,.22),inset 0 5px 8px rgba(255,255,255,.55)}
.funnel-band{left:386px;top:48px;width:42px;height:8px;background:var(--teal)}
.roof{left:262px;top:68px;width:188px;height:12px;border-radius:6px;background:linear-gradient(180deg,#3593A8,#1F6E80)}
.bridge{left:272px;top:78px;width:168px;height:32px;border-radius:8px;background:linear-gradient(180deg,#FFFFFF,#E3EAED);box-shadow:inset 0 -6px 10px rgba(19,33,43,.10)}
.window{position:absolute;top:8px;width:22px;height:16px;border-radius:6px;background:var(--ink)}
.cabin{left:236px;top:108px;width:240px;height:56px;border-radius:18px 18px 6px 6px;background:linear-gradient(180deg,#FFFFFF,#E2E9EC);box-shadow:inset 0 -8px 12px rgba(19,33,43,.10),inset 0 6px 10px rgba(255,255,255,.9)}
.cabin-band{left:236px;top:108px;width:240px;height:14px;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#3593A8,#1F6E80)}
.ball{left:84px;top:184px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#F2F5F6 45%,#CBD6DA 100%);box-shadow:0 6px 10px rgba(19,33,43,.12)}
.bow-box{left:74px;top:232px;width:74px;height:36px;border-radius:12px;background:linear-gradient(180deg,#FFFFFF,#E2E9EC);box-shadow:inset 0 -6px 10px rgba(19,33,43,.10)}
.bollard{left:48px;top:242px;width:20px;height:26px;border-radius:7px;background:linear-gradient(180deg,#FFDB55,#E8B21C)}
.bollard-cap{left:46px;top:236px;width:24px;height:9px;border-radius:5px;background:#fff}
.mast{left:592px;top:104px;width:4px;height:58px;border-radius:2px;background:#fff}
.flag{left:596px;top:104px;width:40px;height:26px;background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:left center;animation:flagWave 2.4s ease-in-out infinite}
.deck{left:40px;top:264px;width:578px;height:10px;border-radius:5px;background:#fff;box-shadow:0 2px 0 rgba(19,33,43,.06)}
.hull{left:26px;top:272px;width:600px;height:118px;border-radius:24px 32px 110px 70px / 24px 32px 100% 100%;background:linear-gradient(180deg,#FFDB55 0%,#F6C531 55%,#E3AE17 100%);box-shadow:inset 0 -16px 28px rgba(120,80,0,.25),inset 0 12px 18px rgba(255,255,255,.55),0 18px 30px rgba(10,40,50,.22)}
.hull-v{position:absolute;left:64px;top:22px;font-size:54px;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.blk{position:absolute;top:162px;height:104px;border:0;padding:0;border-radius:18px;font-weight:800;cursor:pointer;transition:filter .25s ease}
.blk:hover{filter:brightness(1.05)}
.clay-w{background:linear-gradient(180deg,#FFFFFF 0%,#E4EBEE 100%);box-shadow:inset 0 -12px 18px rgba(19,33,43,.10),inset 0 9px 14px rgba(255,255,255,.95),0 6px 0 rgba(19,33,43,.07);color:var(--ink)}
.clay-t{background:linear-gradient(180deg,#3B9AAE 0%,#1F6E80 100%);box-shadow:inset 0 -12px 18px rgba(19,33,43,.22),inset 0 9px 14px rgba(255,255,255,.25),0 6px 0 rgba(19,33,43,.07);color:#fff}
.blk .ring{position:absolute;inset:5px;border:3px solid var(--yellow);border-radius:14px;pointer-events:none;display:none}
.blk.is-open .ring{display:block}
.blk.is-open{transform:translateY(-7px)}
.blk.is-open::after{content:'SELECTED';position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.05em;line-height:1.3}
.blk.hop{animation:hop .6s cubic-bezier(.34,1.56,.64,1)}
.blk .match{position:absolute;left:10px;bottom:9px;padding:2px 7px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:9px;font-weight:800;letter-spacing:.06em;display:none}
.is-match .match{display:inline-block}

/* ============ HIRING ============ */
.hiring{background:var(--teal-band);color:#fff;padding:8px var(--gutter) 56px}
.hiring .wrap{display:flex;flex-direction:column;gap:18px}
.hiring h2{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em}
.rolegrid{display:flex;flex-wrap:wrap;gap:10px}
.rolebtn{min-height:46px;padding:0 20px;border-radius:999px;border:2px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.rolebtn[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.role-line{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);max-width:860px}

/* ============ WORK (layout around the container component) ============ */
.work{padding:clamp(56px,7vw,104px) var(--gutter)}
.hold-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.manifest{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding:16px 20px;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;background:#E3EEF1;scroll-margin-top:290px}
.manifest-main{display:flex;flex-direction:column;gap:3px}
.manifest-eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--teal-dark)}
.manifest-title{font-size:20px;font-weight:800;letter-spacing:-.01em}
.manifest-count{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--muted)}
.manifest.is-updated{animation:selectionFlash 1.2s ease-out}
@keyframes selectionFlash{0%{box-shadow:0 0 0 0 var(--yellow);background:#FFF2BB}35%{box-shadow:0 0 0 6px rgba(246,197,49,.32)}100%{box-shadow:0 0 0 0 rgba(246,197,49,0);background:#E3EEF1}}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.case-group{display:contents}
.case-group[hidden]{display:none}
.case-card{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(19,33,43,.06),0 12px 30px rgba(19,33,43,.06)}
.case-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.5;color:var(--muted)}
.metric{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--teal-dark)}
.metric-label{font-size:15px;font-weight:700;color:var(--ink)}
.case-card h3{margin:6px 0 0;font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.case-card p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-3)}
.case-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--teal-dark);text-decoration:none}

/* ============ JOURNEY ============ */
.journey{background:var(--deep);color:#fff;padding:clamp(56px,7vw,104px) var(--gutter)}
.journey .eyebrow{color:var(--yellow)}
.journey .lead{color:rgba(255,255,255,.84)}
.storyrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 64px}
.storyrow .h2{flex:1 1 380px;min-width:0}
.story{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86)}
.story p{margin:0}
.route-hint{margin:36px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;line-height:1.5;color:var(--yellow)}
.route{position:relative;height:150px;margin:48px 0 32px}
.route-track{position:absolute;left:4%;right:4%;top:70px;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 10px,transparent 10px 20px)}
.route-progress{position:absolute;left:4%;top:70px;height:3px;width:59%;background:var(--yellow);transition:width 1.4s var(--ease-io)}
.route-ship{position:absolute;top:14px;left:calc(63% - 30px);width:60px;height:46px;transition:left 1.4s var(--ease-io)}
.mini{position:relative;width:60px;height:46px;animation:miniBob 2.6s ease-in-out infinite}
.mini span{position:absolute;display:block}
.port{--pos:50%;--pos-n:50%;position:absolute;top:56px;left:var(--pos);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px;min-height:56px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
.port-dot{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:var(--deep);transition:background .4s ease,border-color .4s ease}
.port.is-past .port-dot{background:#fff;border-color:#fff}
.port[aria-pressed="true"] .port-dot{background:var(--yellow);border-color:var(--yellow)}
.port-city{font-size:16px;font-weight:700;white-space:nowrap}
.port-sub{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.72);white-space:nowrap}
.sub-short{display:none}
.releases{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.release{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px}
.release[hidden]{display:none}
.release.is-next{border-color:var(--yellow)}
.rel-head{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.rel-v{font-family:var(--mono);font-weight:700;font-size:13px;background:var(--yellow);color:var(--ink);padding:5px 10px;border-radius:999px}
.release h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
.rel-role{font-size:16px;color:rgba(255,255,255,.82)}
.rel-meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:rgba(255,255,255,.72)}
.rel-note{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--yellow)}
.rel-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.66)}
.release ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.92)}
.release .btn{align-self:flex-start;min-height:46px;padding:0 22px}

/* ============ SKILLS ============ */
.skills{padding:clamp(56px,7vw,104px) var(--gutter)}
.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.skillcard{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 0 rgba(19,33,43,.06),0 12px 30px rgba(19,33,43,.06)}
.skill-n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--teal-dark)}
.skillcard h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.skillcard p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-3)}
.tags{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:7px 12px;border-radius:999px;background:#EAF3F5;color:var(--ink);font-size:14px;font-weight:600;line-height:1.3}

/* ============ HOW I WORK ============ */
.how{background:#fff;padding:clamp(56px,7vw,104px) var(--gutter)}
.howwrap{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.howcopy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.howtitle{margin:0;font-size:clamp(38px,5vw,72px);line-height:1;font-weight:800;letter-spacing:-.04em}
.howtitle span{display:block;-webkit-text-stroke-width:2px;transition:color .7s ease,-webkit-text-stroke-color .7s ease}
.t-mess{color:var(--ink);-webkit-text-stroke-color:var(--ink);transition-delay:.25s !important}
.t-focus{color:transparent;-webkit-text-stroke-color:var(--stroke-grey);transition-delay:.45s !important}
.how.is-sorted .t-mess{color:transparent;-webkit-text-stroke-color:var(--stroke-grey)}
.how.is-sorted .t-focus{color:var(--teal);-webkit-text-stroke-color:var(--teal)}
@supports not (-webkit-text-stroke:1px black){
  .howtitle span{transition:color .7s ease}
  .t-focus{color:#C5D1D6}
  .how.is-sorted .t-mess{color:#C5D1D6}
}
.steps{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.steps li{display:flex;gap:14px}
.steps .n{font-family:var(--mono);font-weight:700;color:var(--teal-dark)}
.steps .t{font-size:17px;line-height:1.55}
.boardouter{flex:1 1 560px;min-width:0;max-width:560px}
.board{position:relative;width:560px;height:340px;background:var(--bg);border-radius:22px;overflow:hidden}
.ghead{position:absolute;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--teal-dark);opacity:0;transition:opacity .5s ease .5s}
.how.is-sorted .ghead{opacity:1}
.ghead .hn{display:none}
.chip{position:absolute;left:0;top:0;width:168px;padding:11px 14px;border-radius:12px;background-color:var(--chip-bg,#fff);box-shadow:0 6px 14px rgba(19,33,43,.10);display:flex;flex-direction:column;gap:4px;transition:left .9s var(--ease-io),top .9s var(--ease-io),width .9s var(--ease-io),transform .9s var(--ease-io),background-color .6s ease}
.how.is-sorted .chip{background-color:#fff}
.chip-k{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.chip-t{font-size:14px;line-height:1.25;font-weight:700;color:var(--ink)}
.board-state{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);transition:color .5s ease}
.how.is-sorted .board-state{color:var(--teal-dark)}
/* no-JS fallback: chips as a simple grid */
.no-js .board{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px}
.no-js .chip,.no-js .ghead{position:static;width:auto;opacity:1}

/* ============ MOBILE (<=760px) ============ */
@media (max-width:760px){
  .hero{padding-top:22px}
  .hero-eyebrow{font-size:11px;margin-bottom:14px}
  .h1{font-size:clamp(40px,11.3vw,48px)}
  .hero-row{margin-top:20px;gap:18px}
  .hero-lead{font-size:15px}
  .scene{height:270px;margin-top:12px}
  .shipbox{transform:translateX(-50%) scale(.56);bottom:8px}
  .rolegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rolebtn{min-height:52px;padding:6px 12px;border-radius:14px;font-size:14px;line-height:1.25}
  .role-line{font-size:15px}
  .hold-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
  .manifest{margin-top:22px;scroll-margin-top:108px;padding:14px 16px}
  .manifest-title{font-size:18px}
  .cases{grid-template-columns:minmax(0,1fr);gap:12px}
  .case-card{padding:20px;gap:8px}
  .metric{font-size:44px}
  .case-card h3{font-size:19px}
  .case-card p{font-size:15px}
  .story{font-size:15px;gap:12px}
  .route-hint{margin-top:26px;font-size:12px}
  .skills-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .skillcard{padding:20px;gap:10px}
  .skillcard h3{font-size:20px}
  .skillcard p{font-size:15px}
  .tags li{font-size:13px}
  .route{height:130px;margin:32px 0 20px}
  .port{left:var(--pos-n)}
  .port-city{font-size:14px}
  .port-sub{font-size:10px}
  .sub-long{display:none}.sub-short{display:inline}
  .release{padding:20px;gap:10px}
  .release h3{font-size:21px}
  .release ul{font-size:15px}
  .release .btn{align-self:stretch}
  .howwrap{gap:22px}
  .howtitle{font-size:46px}
  .howtitle span{-webkit-text-stroke-width:1.5px}
  .boardouter{flex:none;width:100%;max-width:none;order:1}
  .steps{order:2}
  .board{width:100%;height:540px;border-radius:20px}
  .ghead .hn{display:inline}
  .chip{padding:10px 12px}
  .chip-t{font-size:13px}
  .how.is-sorted .chip{flex-direction:row;align-items:center;gap:10px}
  .how.is-sorted .chip-k{width:78px}
  .no-js .board{grid-template-columns:minmax(0,1fr)}
}
/* On mobile, steps sit below the board: flatten the copy column */
@media (max-width:760px){
  .howwrap{flex-direction:column;align-items:stretch}
  .howcopy{display:contents}
  .howcopy .eyebrow{order:-2;margin:0}
  .howtitle{order:-1}
}