/* Studio "What we do": one sentence, each act set the way that discipline would set it. */
.cultesc-idea{
  --idea-dim:rgba(255,255,255,.34);
  --idea-rest:rgba(255,255,255,.42);
  --idea-ease:cubic-bezier(.7,0,.2,1);
  --idea-heat:#0000aa;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  color:#fff;
}
.cultesc-idea__body{grid-column:5/12;min-width:0}
@media(max-width:991px){.cultesc-idea__body{grid-column:1/-1}}

.cultesc-idea__line{
  margin:0;max-width:21em;
  font-family:Ppneuemontreal,Arial,sans-serif;font-weight:500;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.34;letter-spacing:-.01em;
  text-wrap:pretty;
}
.cultesc-idea__line a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;
  text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .3s ease;
}
.cultesc-idea__line a:hover,.cultesc-idea__line a:focus-visible{text-decoration-color:#fff}
.cultesc-idea__line a:focus-visible,.cultesc-idea__toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.cultesc-idea__arrow{display:inline-block;font-size:.55em;vertical-align:.55em;margin-left:.08em;text-decoration:none;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.cultesc-idea__line a:hover .cultesc-idea__arrow{transform:translate(.12em,-.12em)}

.cultesc-idea__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Acts: decorations exist only once the script has built them. */
.cultesc-idea__act{position:relative;white-space:nowrap}
.cultesc-idea[data-ready] .cultesc-idea__act{cursor:default}
.cultesc-idea[data-ready][data-pointer="fine"] .cultesc-idea__act,
.cultesc-idea[data-ready][data-pointer="touch"] .cultesc-idea__act{cursor:pointer;-webkit-tap-highlight-color:transparent}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="brand"],
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="web"],
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="channel"]{display:inline-block;line-height:1.1}

/* 1. Hold together: the phrase is drawn up like a guideline page. */
.cultesc-idea__guides{position:absolute;inset:0 -.42em;pointer-events:none}
.cultesc-idea__guides i{position:absolute;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;opacity:0}
.cultesc-idea__guides i:nth-child(1){top:.19em}
.cultesc-idea__guides i:nth-child(2){top:.39em}
.cultesc-idea__guides i:nth-child(3){top:.91em}
.cultesc-idea__guides i:nth-child(4),.cultesc-idea__guides i:nth-child(5){top:-.16em;bottom:-.16em;left:.42em;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0}
.cultesc-idea__guides i:nth-child(5){left:auto;right:.42em}
.cultesc-idea__guides b{position:absolute;top:.91em;width:.24em;height:.24em;margin:-.12em 0 0 -.12em;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.4)}
.cultesc-idea__guides b:nth-of-type(1){left:.42em}
.cultesc-idea__guides b:nth-of-type(2){left:calc(100% - .42em)}
.is-on>.cultesc-idea__guides i,.is-on>.cultesc-idea__guides b{opacity:.85;transform:none;transition:transform .9s var(--idea-ease),opacity .3s ease}
.is-on>.cultesc-idea__guides i:nth-child(2){transition-delay:.12s}
.is-on>.cultesc-idea__guides i:nth-child(3){transition-delay:.24s}
.is-on>.cultesc-idea__guides i:nth-child(4),.is-on>.cultesc-idea__guides i:nth-child(5){transition-delay:.45s}
.is-on>.cultesc-idea__guides b{transition-delay:.8s}
.is-done>.cultesc-idea__guides i,.is-done>.cultesc-idea__guides b{opacity:.26;transform:none;transition:opacity .6s ease}

/* 2. From a first sketch to a working site: a wireframe becomes a pressed button. */
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="web"]{padding:0 .36em;margin:0 .2em 0 .04em;isolation:isolate}
.cultesc-idea[data-ready] .cultesc-idea__tail{position:absolute;left:100%;bottom:0;margin-left:-.02em;line-height:inherit;color:#fff}
.cultesc-idea__act[data-act="web"]::before,.cultesc-idea__act[data-act="web"]::after{content:"";position:absolute;inset:-.1em 0 -.12em;border-radius:99em;z-index:-1;opacity:0;pointer-events:none}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="web"]::before{border:1.5px dashed currentColor}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="web"]::after{background:#fff;border:1px solid #fff}
.cultesc-idea__act[data-act="web"].is-on{animation:cultesc-idea-web-text 3.4s var(--idea-ease) both}
.cultesc-idea__act[data-act="web"].is-on::before{animation:cultesc-idea-web-sketch 3.4s var(--idea-ease) both}
.cultesc-idea__act[data-act="web"].is-on::after{animation:cultesc-idea-web-fill 3.4s var(--idea-ease) both}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="web"].is-done::after{opacity:1;background:transparent;border-color:var(--idea-rest);transition:background-color .6s ease,border-color .6s ease}
.cultesc-idea__cursor{position:absolute;left:62%;top:58%;width:.62em;height:.62em;opacity:0;pointer-events:none;color:#000}
.cultesc-idea__cursor svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.cultesc-idea__cursor::before{content:"";position:absolute;left:-.5em;top:-.5em;width:1em;height:1em;border-radius:50%;background:radial-gradient(closest-side,var(--idea-heat),rgba(0,0,170,0));opacity:0}
.is-on>.cultesc-idea__cursor{animation:cultesc-idea-cursor 3.4s var(--idea-ease) both}
.is-on>.cultesc-idea__cursor::before{animation:cultesc-idea-heat 3.4s ease both}
@keyframes cultesc-idea-web-sketch{0%{opacity:0;transform:scale(.97)}14%,36%{opacity:.8;transform:none}46%,100%{opacity:0;transform:none}}
@keyframes cultesc-idea-web-fill{0%,34%{opacity:0;transform:scaleX(.9)}46%{opacity:1;transform:none}62%{transform:none}68%{transform:scale(.95)}76%,100%{opacity:1;transform:none}}
@keyframes cultesc-idea-web-text{0%,38%{color:#fff}46%,100%{color:#000}}
@keyframes cultesc-idea-cursor{0%,40%{opacity:0;transform:translate(1.4em,1.1em)}48%{opacity:1}60%{transform:none}66%{transform:scale(.86)}74%,88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes cultesc-idea-heat{0%,60%{opacity:0;transform:scale(.4)}67%{opacity:.9;transform:scale(1.2)}84%,100%{opacity:0;transform:scale(1.9)}}

/* 3. Set it in motion: the letters ride an eased wave, then settle into one still frame of it. */
.cultesc-idea__letters{display:inline}
.cultesc-idea__letters span{display:inline-block;white-space:pre;transform:translateY(0)}
.is-on .cultesc-idea__letters span{animation:cultesc-idea-wave 1.5s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i) * -.085s)}
.is-done .cultesc-idea__letters span{transform:translateY(calc(var(--y) * 1em)) rotate(calc(var(--r) * 1deg))}
@keyframes cultesc-idea-wave{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-.17em) rotate(-5deg)}75%{transform:translateY(.07em) rotate(3deg)}}

/* 4. Every channel: one phrase, recropped for each format it has to run in. */
.cultesc-idea__crop-copy{position:absolute;inset:0;color:#fff;clip-path:inset(-.24em -.3em);pointer-events:none;opacity:0}
.cultesc-idea__frame{position:absolute;top:-.24em;bottom:-.24em;left:-.3em;right:-.3em;pointer-events:none;opacity:0;
  --c:currentColor;--l:.32em;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--l);
  background-repeat:no-repeat}
.cultesc-idea__act[data-act="channel"].is-on{color:var(--idea-dim);transition:color .4s ease}
.is-on>.cultesc-idea__crop-copy{opacity:1;animation:cultesc-idea-crop 3.6s var(--idea-ease) both}
.is-on>.cultesc-idea__frame{opacity:1;animation:cultesc-idea-frame 3.6s var(--idea-ease) both}
.is-done>.cultesc-idea__frame{opacity:.42;transition:opacity .6s ease}
@keyframes cultesc-idea-crop{
  0%,24%{clip-path:inset(-.24em -.3em)}
  34%,57%{clip-path:inset(-.2em calc(52% - 1.5em) -.2em 52%)}
  67%,100%{clip-path:inset(-.48em calc(84% - 1.12em) -.48em 16%)}}
@keyframes cultesc-idea-frame{
  0%,24%{top:-.24em;bottom:-.24em;left:-.3em;right:-.3em}
  34%,57%{top:-.2em;bottom:-.2em;left:52%;right:calc(48% - 1.5em)}
  67%,100%{top:-.48em;bottom:-.48em;left:16%;right:calc(84% - 1.12em)}}

/* 5. Keep studying: an annotation line, and the note below answers it. */
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="research"]{
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - .02em)/0 2px}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="research"].is-on{background-size:100% 2px;transition:background-size 1.2s var(--idea-ease) .1s}
.cultesc-idea[data-ready] .cultesc-idea__act[data-act="research"].is-done{background-image:linear-gradient(var(--idea-rest),var(--idea-rest));background-size:100% 1px}

/* Foot: the rest of the research practice, in a quieter voice, and the motion control. */
.cultesc-idea__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-top:2rem;font-family:Ppneuemontreal,Arial,sans-serif;font-weight:500;font-size:1.125rem;line-height:1.25;color:rgba(255,255,255,.5)}
.cultesc-idea__note{margin:0;max-width:24em;transition:color .5s ease}
.cultesc-idea[data-active="research"] .cultesc-idea__note{color:#fff}
.cultesc-idea__toggle{display:none;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;transition:color .3s ease}
.cultesc-idea__toggle:hover{color:#fff}
.cultesc-idea[data-ready] .cultesc-idea__toggle{display:inline-block}

/* Offscreen, hidden tab or paused: every running loop holds its frame. */
.cultesc-idea[data-paused] *,.cultesc-idea[data-paused] *::before,.cultesc-idea[data-paused] *::after{animation-play-state:paused!important}

@media(max-width:767px){
  .cultesc-idea__line{line-height:1.4}
  .cultesc-idea__foot{margin-top:1.5rem;font-size:1rem}
}