/* Home hero: the headline's "you." / "your business." and the Instagram phone beside it (hero-ig.js; the phone itself
   is assets/iphone.css). data-for on the h1 and on .hig says whose profile is on the phone: "you" or "biz". */

/* the headline's last words: both sit in one grid cell, so the line breaks never move; the one in use is underlined */
.hero-for{display:inline-grid;vertical-align:top}
.hero-for>span{grid-area:1/1;justify-self:start;white-space:nowrap;
  background:linear-gradient(transparent 82%,color-mix(in oklab,var(--accent) 65%,transparent) 82% 94%,transparent 94%) no-repeat;
  transition:opacity .45s var(--ease),transform .55s var(--ease),filter .45s var(--ease)}
.hero-for .hf-you{color:var(--accent-text)}
.hero-for .hf-biz,#hero-title[data-for="biz"] .hf-you{opacity:0;transform:translateY(.4em);filter:blur(6px)}
#hero-title[data-for="biz"] .hf-biz{opacity:1;transform:none;filter:none}

/* the stage: a glow, two designed posts tilted behind the phone, the phone, two notes */
.hig{--w:clamp(250px,21vw,318px);position:relative;display:grid;place-items:center;min-height:calc(var(--w) * 2.05 + 70px);isolation:isolate}
.hig-glow{position:absolute;inset:4% 8%;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.75;transition:background 1.2s var(--ease);
  background:radial-gradient(40% 46% at 38% 40%,oklch(.7 .19 350/.55),transparent 70%),radial-gradient(36% 40% at 66% 62%,oklch(.78 .16 60/.45),transparent 70%),
    radial-gradient(30% 34% at 52% 20%,oklch(.6 .2 295/.4),transparent 70%)}
.hig[data-for="biz"] .hig-glow{background:radial-gradient(40% 46% at 40% 42%,color-mix(in oklab,var(--accent) 55%,transparent),transparent 70%),
    radial-gradient(36% 40% at 64% 62%,oklch(.72 .12 200/.4),transparent 70%),radial-gradient(30% 34% at 50% 20%,oklch(.8 .14 90/.35),transparent 70%)}
.hig-phone{position:relative;z-index:3;margin:0;border-radius:calc(var(--w) * .16);outline-offset:10px}
.hig-phone:focus-visible{outline:3px solid var(--accent)}
.hig-phone .iphone{--iphone-w:var(--w)}

.hig-cards{position:absolute;inset:0;z-index:1;pointer-events:none}
.hig-card{position:absolute;margin:0;width:calc(var(--w) * .66);aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--surface-2);
  box-shadow:var(--shadow-post);transition:transform .9s var(--ease),opacity .3s ease}
.hig-card img{display:block;width:100%;height:100%;object-fit:cover}
.hig-card-l{left:calc(50% - var(--w) * 1.12);top:14%;transform:rotate(-9deg)}
.hig-card-r{right:calc(50% - var(--w) * 1.12);top:38%;transform:rotate(8deg)}
.hig-card.is-swap{opacity:0}
.hig:hover .hig-card-l{transform:rotate(-12deg) translate(-4%,-2%)}
.hig:hover .hig-card-r{transform:rotate(11deg) translate(4%,2%)}

.hig-note{position:absolute;z-index:4;margin:0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;box-shadow:var(--shadow-2);
  font-size:.8rem;line-height:1.25;color:var(--ink-2);white-space:nowrap}
.hig-note b{color:var(--ink);font:700 .92rem/1.2 var(--f-display)}
.hig-note-a{flex-direction:column;align-items:flex-start;gap:2px;left:calc(50% - var(--w) * 1.02);top:4%}
.hig-note-b{right:calc(50% - var(--w) * 1.04);bottom:13%}
.hig-note-b i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.hig-cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-size:.7rem;color:var(--muted)}

@media (prefers-reduced-motion:no-preference){
  .hig-card-l{animation:hig-float 7s ease-in-out infinite}
  .hig-card-r{animation:hig-float 8s ease-in-out -3s infinite}
  .hig-note-a{animation:hig-float 6s ease-in-out -1s infinite}
  .hig-note-b{animation:hig-float 7.5s ease-in-out -4s infinite}
}
@keyframes hig-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

@media (max-width:1020px){
  .hig{margin-top:30px}
}
@media (max-width:620px){
  .hig{--w:min(270px,66vw);min-height:calc(var(--w) * 2.05 + 120px);padding:58px 0 40px}
  .hig-card{width:calc(var(--w) * .5)}
  .hig-card-l{left:-2%;top:10%}
  .hig-card-r{right:-2%;top:44%}
  .hig-note-a{left:0;top:0;flex-direction:row;gap:6px}
  .hig-note-b{right:0;bottom:9%}
}
@media (prefers-reduced-motion:reduce){.hero-for>span{transition:none}}