/* Be Attractive: type, pen, hero, equation, cursor. Loaded after style.css. */

:root{--hand:'Caveat',cursive;--pen:#FF5A3C}
/* ---------- Ariel's pen: hand-drawn marks that appear as you read ---------- */
.pen{position:relative;display:inline-block;white-space:nowrap}
.pen svg{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.pen svg path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lime .pen svg path,.sec.lime .pen svg path{stroke:var(--ink)}
.pen .pn-note{position:absolute;font-family:var(--hand);font-weight:700;font-size:22px;line-height:1;letter-spacing:0;color:var(--pen);white-space:nowrap;opacity:0;transform:translateY(6px) rotate(-3deg);transition:opacity .5s .9s,transform .5s .9s;pointer-events:none;font-style:normal}
.pen.drawn .pn-note{opacity:1;transform:translateY(0) rotate(-3deg)}
.pen .pn-note.right{left:calc(100% + 26px);top:.15em}
.pen .pn-note.below{left:50%;top:calc(100% + 14px);transform:translate(-30%,6px) rotate(-3deg)}
.pen.drawn .pn-note.below{transform:translate(-30%,0) rotate(-3deg)}
.pen-note{position:absolute;top:-34px;right:18px;font-family:var(--hand);font-weight:700;font-size:23px;color:var(--pen);transform:rotate(-4deg);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .6s .3s}
.pen-note::after{content:"";position:absolute;right:-22px;top:14px;width:26px;height:30px;border-right:2.5px solid var(--pen);border-bottom:2.5px solid var(--pen);border-radius:0 0 22px 0;transform:rotate(18deg)}
.pen-note.on{opacity:1}
@media (max-width:900px){.pen .pn-note.right{left:0;top:calc(100% + 8px);font-size:19px}.pen-note{right:auto;left:16px;top:-30px;font-size:20px}.pen-note::after{display:none}}

/* ---------- a living hero: the asterisk breathes, sparks rise, the scene follows you ---------- */
.hero{isolation:isolate}
.hero .art-in{position:relative;width:min(1300px,110%);margin-left:auto;margin-right:-8%}
.hero .art-in img{width:100%;margin:0;translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -10px);scale:1.04;transition:translate .9s cubic-bezier(.22,1,.36,1)}
.hero .glow{position:absolute;left:73.5%;top:47%;width:34%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(191,255,0,.42),rgba(191,255,0,.12) 38%,transparent 66%);mix-blend-mode:screen;animation:breathe 4.2s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.55;scale:.92}50%{opacity:1;scale:1.08}}
.hero .sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:900px){.hero .art-in{width:150%;margin-right:-40%}}

/* ---------- the equation assembles itself as you scroll ---------- */
.eqfx{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 .32em;position:relative}
.eqfx span{display:inline-block;will-change:transform,opacity}
.eqfx .o{opacity:.9}
.eqfx.snap{animation:snap .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes snap{0%{scale:1}40%{scale:1.06}100%{scale:1}}

/* ---------- the asterisk cursor and magnetic pull (mouse only) ---------- */
.cur{position:fixed;left:0;top:0;z-index:999;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;opacity:0;transition:opacity .25s,scale .3s cubic-bezier(.34,1.56,.64,1)}
.cur svg{width:100%;height:100%;display:block;transition:rotate .5s cubic-bezier(.34,1.56,.64,1)}
.cur.on{opacity:1}
.cur.big{scale:1.9}
.cur.big svg{rotate:60deg}
.cur.text{opacity:0}
html.fx-cur,html.fx-cur a,html.fx-cur button,html.fx-cur label,html.fx-cur summary{cursor:none}
html.fx-cur input[type=text],html.fx-cur input[type=email],html.fx-cur textarea,html.fx-cur select{cursor:auto}
.mag{transition:translate .5s cubic-bezier(.22,1,.36,1)}
.mag.mag-on{transition:translate .12s linear}

@media (prefers-reduced-motion: reduce){
  .hero .glow{animation:none}
  .hero .art-in img{translate:none}
  .pen .pn-note{transition:none}
}
.war{overflow:clip}.tier.feat{position:relative}
.cur .cur-a{transition:stroke .2s}
.cur.ink .cur-a{stroke:#0A0A0A}
.pen-note{top:20px;right:22px;font-size:26px;transform:rotate(-6deg)}
.pen-note::after{right:auto;left:-34px;top:2px;width:26px;height:18px;border-right:0;border-bottom:2.5px solid var(--pen);border-left:0;border-radius:0 0 0 18px;transform:rotate(-12deg)}
@media (max-width:900px){.pen-note{left:auto;right:18px;top:20px}}
@media (max-width:900px){.pen .pn-note.right{left:calc(100% + 10px);top:.45em;font-size:17px}}

/* ---------- 3. the war, as a scene you scroll through ---------- */
.clash{height:260vh;margin:30px 0 10px;position:relative}
.clash-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.clash-stage{position:relative;width:100%;height:46vh;display:grid;place-items:center}
.cw{position:absolute;font-family:var(--head);font-weight:900;letter-spacing:-.06em;line-height:.85;font-size:clamp(54px,10.5vw,156px);will-change:transform,opacity;white-space:nowrap}
.cw.a{color:var(--onDark)}
.cw.d{color:transparent;-webkit-text-stroke:2px var(--lime)}
.cw.m{color:var(--lime);opacity:0}
.clash-spark{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 40px 18px rgba(191,255,0,.45);opacity:0}
.clash-cap{position:relative;height:1.4em;margin:28px 0 0;font-family:var(--head);font-weight:800;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;max-width:none;text-align:center;width:100%}
.clash-cap span{position:absolute;left:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.clash-cap span.on{opacity:1;transform:none}
.clash-cap span:last-child{color:var(--lime)}

/* ---------- 5. a brand being put together ---------- */
.dater{height:300vh;position:relative;margin:56px 0 40px}
.dater-stick{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.figure{width:100%;max-height:78vh}
.figure path,.figure circle,.figure rect{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.figure .dot{fill:var(--ink);stroke:none}
.figure .lm{stroke:#9ACC00}
.figure .lmf{fill:var(--lime);stroke:var(--ink);stroke-width:6}
.figure .ground{stroke:var(--line);stroke-width:4}
.fp{opacity:0;transition:opacity .45s,transform .7s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}
.fp.in{opacity:1;transform:none!important}
.fp.now path,.fp.now circle:not(.dot),.fp.now rect{stroke-width:9}
.dater-k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.dater-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.dater-list li{display:grid;grid-template-columns:40px 1fr;gap:0 10px;padding:10px 0;border-bottom:1.5px solid var(--line);opacity:.28;transition:opacity .3s,padding .3s}
.dater-list li b{font-family:var(--head);font-size:13px;color:var(--muted);padding-top:4px}
.dater-list li span{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.02em}
.dater-list li em{grid-column:2;font-style:normal;font-size:14px;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .35s}
.dater-list li.in{opacity:1}
.dater-list li.now{padding:14px 0}
.dater-list li.now em{max-height:3em}
.dater-list li.now span{background:var(--lime);padding:0 .15em}
.dater-end{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.02em;margin-top:20px;opacity:0;transition:opacity .5s}
.dater-end.on{opacity:1}
@media (max-width:820px){.dater{height:280vh}.dater-stick{grid-template-columns:1fr;gap:10px;align-content:center}.figure{max-height:38vh}.dater-list li{padding:6px 0}.dater-list li span{font-size:16px}.dater-list li em{font-size:13px}.dater-k{display:none}}

/* ---------- 6. the path draws itself ---------- */
@media (min-width:1021px){
  .fx-on .steps.tl{position:relative}
  .fx-on .sec.lime .tl .step,.fx-on .tl .step{border-top-color:transparent}
  .fx-on .sec.lime .tl .step:last-child{border-image:none}
  .tl-line{position:absolute;left:0;right:0;top:0;height:2.5px;background:var(--ink);transform-origin:left;transform:scaleX(0)}
}
.fx-on .tl .step::before{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.8,.64,1)}
.fx-on .tl .step.lit::before{transform:scale(1);animation:tlbeat 1.2s .45s ease-in-out 1}
@keyframes tlbeat{0%,100%{scale:1}15%{scale:1.25}30%{scale:1}45%{scale:1.15}}
.fx-on .tl .step b,.fx-on .tl .step p{opacity:.15;transition:opacity .5s}
.fx-on .tl .step.lit b,.fx-on .tl .step.lit p{opacity:1}

/* ---------- 7. texture and a lime wipe between sections ---------- */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-on .wipe{position:relative}
.fx-on .wipe::before{content:"";position:absolute;inset:0;z-index:5;background:var(--lime);transform-origin:right;transform:scaleX(1);transition:transform 1s cubic-bezier(.77,0,.18,1);pointer-events:none}
.fx-on .wipe.wiped::before{transform:scaleX(0)}

@media (prefers-reduced-motion: reduce){
  .clash{height:auto}.clash-stick{position:static;height:auto;padding:40px 0}
  .dater{height:auto}.dater-stick{position:static;height:auto}
  .fp{opacity:1}.dater-list li{opacity:1}
  .fx-on .wipe::before{display:none}
}
.cw,.clash-spark{left:50%;top:50%}
.cw.a{transform-origin:right center}.cw.d{transform-origin:left center}
.dater-list li span{justify-self:start}
.clash.vert .cw{font-size:clamp(48px,17vw,90px)}
.clash.vert .cw.a{transform-origin:center bottom}.clash.vert .cw.d{transform-origin:center top}
.clash.vert .clash-stage{height:56vh}

/* feedback round 1 */
.lime .pen svg path,.sec.lime .pen svg path{stroke:#fff}
.figure .mist{fill:#9ACC00;stroke:none}
/* the path: each step answers when you point at it */
.tl .step{cursor:default}
.tl .step b{transition:background .25s,color .25s,padding .25s}
.fx-on .sec.lime .tl .step.lit:hover::before,.sec.lime .tl .step:hover::before{background:var(--cream);color:var(--ink);box-shadow:0 0 0 3px var(--ink);transform:scale(1.18)}
.sec.lime .tl .step:hover b{background:#fff;padding:0 .2em;margin-left:-.2em}
.sec.lime .tl .step:hover p{color:var(--ink)}
.tl-hl{position:absolute;left:0;top:-1px;height:4.5px;width:0;background:#fff;transition:width .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.tl-hl{z-index:1}
.sec.lime .tl .step b{display:inline-block}
.tl .step::before{z-index:2}

/* the statue: nine layers on one canvas */
.statue{position:relative;height:min(80vh,820px);aspect-ratio:1086/1448;max-width:100%;margin:0 auto;overflow:hidden}
.statue .fp{position:absolute;display:block;max-width:none;opacity:1;transition:transform .9s cubic-bezier(.34,1.4,.64,1),filter .4s;will-change:transform}
.statue .fp[data-k="0"]{opacity:0;transition:opacity .6s,transform .9s cubic-bezier(.22,1,.36,1)}
.statue .fp.in{opacity:1}
.statue .fp.now{filter:drop-shadow(0 0 14px rgba(191,255,0,.9))}
.statue .fp[data-k="0"].now{filter:none}
@media (max-width:820px){.statue{height:40vh}}
@media (prefers-reduced-motion: reduce){.statue .fp{transform:none!important;opacity:1}}
.dater-stick{top:68px;height:calc(100vh - 68px)}
.statue{height:min(calc(100vh - 120px),820px)}
@media (max-width:820px){.dater-stick{top:64px;height:calc(100vh - 64px)}.statue{height:38vh}}

/* round 2 */
/* the path: hovered dot is plain white, no ring */
.fx-on .sec.lime .tl .step.lit:hover::before,.sec.lime .tl .step:hover::before{background:#fff;color:var(--ink);box-shadow:none}
/* And then: the Brand Dating Framework */
.dater-title{font-family:var(--head);font-weight:900;letter-spacing:-.035em;line-height:1.02;font-size:clamp(26px,3vw,40px);margin:0 0 22px}
.dater-title .hl{padding:0 .1em}
@media (max-width:820px){.dater-title{font-size:22px;margin:0 0 8px}}
/* In the wild: a small arrow says you can slide */
.wl-view{position:relative}
.wl-hint{position:absolute;right:14px;top:50%;translate:0 -50%;z-index:4;width:44px;height:64px;padding:0;border:0;background:none;cursor:pointer;color:#fff;mix-blend-mode:difference;transition:opacity .3s}
.wl-hint svg{width:30px;height:30px;display:block;margin:auto;animation:hintnudge 1.8s ease-in-out infinite}
.wl-hint[hidden]{display:block;opacity:0;pointer-events:none}
@keyframes hintnudge{0%,100%{translate:0 0}50%{translate:7px 0}}
@media (prefers-reduced-motion: reduce){.wl-hint svg{animation:none}}
/* about: Ariel's scribbles on his photo */
.about .img{position:relative}
.scrib{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scrib path,.scrib circle{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.scrib .lens{fill:#0A0A0A;fill-opacity:0;transition:fill-opacity .5s .9s}
.scrib.drawn .lens{fill-opacity:1}
.scrib .glint{stroke:#fff;stroke-width:6;opacity:0;transition:opacity .4s 1.4s}
.scrib.drawn .glint{opacity:.85}
.scrib .gem{fill:var(--lime);stroke-width:6}
/* the pen keeps moving: a hand-drawn line boil */
.boil{filter:url(#pen-boil)}
.tl .step{transform-style:flat;z-index:1}
.tl-hl{z-index:0}
.wl-hint{mix-blend-mode:normal;width:52px;height:72px;right:10px}
.wl-hint svg{width:38px;height:38px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.scrib path{stroke:var(--pen);stroke-width:10}

/* round 3 */
.boil{filter:none}
.scrib .ink{stroke:var(--pen);stroke-width:10}
/* price cards: a whisper of a heartbeat */
@keyframes beat{0%{transform:scale(1)}30%{transform:scale(1.008)}60%{transform:scale(.999)}100%{transform:scale(1)}}
@keyframes beatf{0%{transform:translateY(-14px) scale(1)}30%{transform:translateY(-14px) scale(1.008)}60%{transform:translateY(-14px) scale(.999)}100%{transform:translateY(-14px) scale(1)}}
.tier:hover{box-shadow:0 10px 26px rgba(0,0,0,.06)}

/* the free tools' icons, alive while on screen */
.tool .i svg *,.lv-i svg *{transform-box:fill-box}
.ic-on .ic-b{transform-origin:center bottom;animation:icbar 2.6s ease-in-out infinite}
.ic-on .ic-b2{animation-delay:.35s}.ic-on .ic-b3{animation-delay:.7s}
@keyframes icbar{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.45)}60%{transform:scaleY(1.12)}}
.ic-on .ic-aim{animation:icaim 3.2s ease-in-out infinite}
@keyframes icaim{0%{transform:translate(-3px,2px)}18%{transform:translate(2.5px,-2px)}34%{transform:translate(-1.5px,-3px)}50%{transform:translate(2px,1.5px)}64%,100%{transform:translate(0,0)}}
.ic-lock{opacity:0}
.ic-on .ic-lock{animation:iclock 3.2s ease-in-out infinite}
@keyframes iclock{0%,62%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
.ic-on .ic-scope{transform-origin:center;animation:icscope 3.2s ease-in-out infinite}
@keyframes icscope{0%,62%{transform:scale(1)}68%{transform:scale(.88)}76%,100%{transform:scale(1)}}
.ic-on .ic-q{transform-origin:50% 0;animation:icq 2.4s ease-in-out infinite}
@keyframes icq{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}55%{transform:rotate(12deg)}80%{transform:rotate(-4deg)}}
.ic-on .ic-qd{transform-origin:center;animation:icqd 2.4s ease-in-out infinite}
@keyframes icqd{0%,40%,100%{transform:scale(1)}55%{transform:scale(1.9)}70%{transform:scale(1)}}
/* the love letter giggles when it shows up, then every few seconds */
.lv-i.ic-on svg{animation:giggle 4.5s .2s ease-in-out infinite;transform-origin:50% 60%}
@keyframes giggle{0%{transform:rotate(0)}4%{transform:rotate(-14deg) scale(1.08)}8%{transform:rotate(12deg) scale(1.08)}12%{transform:rotate(-9deg)}16%{transform:rotate(6deg)}20%{transform:rotate(-3deg)}24%,100%{transform:rotate(0) scale(1)}}
.lv-i.ic-on .ic-flap{transform-origin:50% 0;animation:flap 4.5s .2s ease-in-out infinite}
@keyframes flap{0%,26%,100%{transform:scaleY(1)}10%{transform:scaleY(-.6)}18%{transform:scaleY(1)}}
.love:hover .lv-i svg{animation:giggle 1.2s ease-in-out}
@media (prefers-reduced-motion: reduce){.ic-on *, .lv-i.ic-on svg{animation:none!important}.ic-lock{opacity:1}}

/* round 5 */
/* every scribble is Ariel's red, lime sections too */
.lime .pen svg path,.sec.lime .pen svg path{stroke:var(--pen)}
/* the Brand Dating list: each meaning appears beside its part and stays */
@media (min-width:821px){
  .dater-stick{grid-template-columns:.85fr 1.15fr;gap:48px}
  .dater-list li{grid-template-columns:34px 130px 1fr;gap:0 18px;align-items:baseline;padding:11px 0}
  .dater-list li em{grid-column:3;max-height:none;overflow:visible;opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .45s;font-size:14.5px;line-height:1.4;color:var(--fg)}
  .dater-list li.in em{opacity:1;transform:none}
  .dater-list li.now{padding:11px 0}
  .dater-list li.now em{max-height:none}
}
@media (min-width:821px){
  .dater-k{display:none}
  .dater-title{font-size:clamp(24px,2.4vw,32px);margin:0 0 16px}
  .dater-list li,.dater-list li.now{padding:8px 0}
  .dater-list li span{font-size:18px}
  .dater-list li em{font-size:14px;line-height:1.35}
  .dater-end{font-size:18px;margin-top:14px}
}
@media (min-width:821px) and (max-height:760px){.dater-list li em{font-size:13px}.dater-list li,.dater-list li.now{padding:6px 0}.dater-title{font-size:24px}}
/* the statue keeps its real proportions: size it by width, never squeeze it */
.statue{height:auto!important;width:min(100%,calc((100vh - 120px) * 1086 / 1448),615px);aspect-ratio:1086/1448}
@media (max-width:820px){.statue{width:min(100%,calc(38vh * 1086 / 1448))}}
.tip em{display:inline-block;background:var(--lime);color:var(--ink);padding:2px 8px;border-radius:4px;font-size:13px}
@media (max-width:520px){.pen .pn-note.right{white-space:normal;width:6em;line-height:1.05;font-size:15px;top:.1em}}

/* the statue scene sits close to the cards above and the tabs below */
.dater{margin:36px 0 8px}.dater-stick{align-items:center}
@media (max-width:820px){.statue{width:min(100%,calc(clamp(150px,100vh - 540px,38vh) * 1086 / 1448))}}
/* the war: text stacked on the left, the stone head on the right, its base level with the equation */
.war-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:stretch}
.war-l blockquote{margin:0}
.war-l .muted{margin:22px 0 0;max-width:54ch}
.war-l .eq{margin-top:36px;white-space:nowrap;flex-wrap:nowrap;font-size:clamp(18px,1.9vw,27px)}
.war-head{margin:0;position:relative;pointer-events:none}
.war-head img{position:absolute;right:0;left:0;bottom:0;margin:0 auto;height:calc(100% + 36px);width:100%;object-fit:contain;object-position:center bottom}
.war .forces{margin-top:48px}
.war-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1020px){.war-hero{grid-template-columns:minmax(0,1fr);gap:20px}.war-l .eq{white-space:normal;flex-wrap:wrap;font-size:clamp(18px,5vw,24px)}.war-head{display:none}}