/* Field-sketch edition / traits dessinés comme sur des vêtements de pêche techniques.
   Les tracés sont des SVG légers, superposés à l'environnement existant. */
.hero::before{opacity:.25;background-size:min(74vw,1100px) auto}
.hero-ink{position:absolute;z-index:2;inset:-2%;pointer-events:none;
  background-image:url('assets/current-sketch-v10.svg'),url('assets/pike-blueprint-v10.svg');
  background-repeat:no-repeat,no-repeat;
  background-size:max(115vw,1560px) auto,min(67vw,970px) auto;
  background-position:51% 54%,right 8% bottom 13%;
  opacity:.46;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.23) 0%,rgba(0,0,0,.6) 40%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.23) 0%,rgba(0,0,0,.6) 40%,#000 100%);
  animation:fish-sketch-drift 21s ease-in-out infinite alternate;will-change:transform}
.hero-target{border-color:rgba(216,255,53,.3);box-shadow:0 0 0 50px rgba(216,255,53,.012),0 0 0 103px rgba(216,255,53,.012)}
.hero-target span{border-color:rgba(216,255,53,.25)}
.hero-title{position:relative}
.hero-title::after{content:'';position:absolute;width:clamp(52px,7vw,120px);height:9px;right:16%;top:46%;
  background:repeating-linear-gradient(115deg,#d8ff35 0 5px,transparent 5px 11px);opacity:.8;transform:rotate(-9deg)}

/* Le brochet se dessine derrière les étapes, traversé de lignes de courant. */
.method::after{background-image:url('assets/current-sketch-v10.svg'),url('assets/topography-v9.svg');
  background-size:max(116vw,1500px) auto,75% auto;
  background-position:50% 54%,right center;opacity:.36}
.method-ink{position:absolute;z-index:0;inset:0;pointer-events:none;
  background:url('assets/pike-blueprint-v10.svg') right -10% center/min(73vw,1120px) auto no-repeat;
  opacity:.34;mix-blend-mode:screen}
.method-topline,.method-lead,.method-steps,.method-tail{position:relative;z-index:1}
.method-topline{border-color:rgba(216,255,53,.38)}
.method-steps{border-color:rgba(216,255,53,.31);box-shadow:0 15px 75px rgba(0,0,0,.15)}
.method-steps li{overflow:hidden;background-image:repeating-linear-gradient(125deg,transparent 0 24px,rgba(216,255,53,.026) 25px,transparent 26px 34px);border-color:rgba(216,255,53,.25)}
.method-steps li::before{content:'';position:absolute;left:0;top:0;width:62px;height:38px;
  background:repeating-linear-gradient(135deg,rgba(216,255,53,.18) 0 2px,transparent 2px 9px);
  clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}
.method-steps li:nth-child(2)::before{background:repeating-linear-gradient(135deg,rgba(70,236,226,.24) 0 2px,transparent 2px 9px)}
.method-steps li:nth-child(3)::before{background:repeating-linear-gradient(135deg,rgba(255,79,148,.24) 0 2px,transparent 2px 9px)}

/* Dans la présentation, les fonds gagnent le mouvement d'une encre d'illustrateur. */
.experience-slide::before{background-image:url('assets/current-sketch-v10.svg'),url('assets/topography-v9.svg');
  background-repeat:no-repeat,no-repeat;
  background-size:max(105vw,1500px) auto,73vw auto;
  background-position:55% 57%,right center;opacity:.32}
.slide-record::before{opacity:.42}
.slide-save::before{opacity:.33;filter:hue-rotate(78deg) saturate(.9) brightness(.52)}
.slide-memory::before{opacity:.45;filter:hue-rotate(18deg)}
.scene-orbit{box-shadow:inset 0 0 100px rgba(52,167,161,.11),0 0 130px rgba(18,162,159,.14),0 0 0 48px rgba(216,255,53,.015),0 0 0 102px rgba(216,255,53,.009)}
.scene-orbit::before{inset:9%;border-color:rgba(216,255,53,.19)}
.scene-orbit::after{inset:29%;border-style:dashed;border-color:rgba(216,255,53,.23)}
.scene-copy::after{content:'';display:block;width:min(78%,370px);height:2px;margin-top:32px;
  background:linear-gradient(90deg,#d8ff35 0 28%,transparent 28% 32%,rgba(216,255,53,.28) 32% 100%)}
.slide-save .scene-copy::after{background:linear-gradient(90deg,#176a61 0 28%,transparent 28% 32%,rgba(23,106,97,.3) 32% 100%)}
.slide-memory .scene-copy::after{background:linear-gradient(90deg,#ff4f94 0 28%,transparent 28% 32%,rgba(255,79,148,.28) 32% 100%)}

/* La League conserve sa photo et son classement ; le trait accompagne l'action. */
.league-ink{position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:url('assets/current-sketch-v10.svg'),url('assets/pike-blueprint-v10.svg');
  background-repeat:no-repeat,no-repeat;
  background-position:50% 65%,left -18vw top 33%;
  background-size:max(112vw,1510px) auto,min(73vw,1040px) auto;
  mix-blend-mode:screen;opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 45%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 45%)}
.league-top,.league-body,.league-bottom{z-index:1;position:relative}
.league-top{border-bottom-color:rgba(216,255,53,.4)}
.rank-frame{box-shadow:0 45px 90px rgba(0,0,0,.68),0 0 0 1px rgba(216,255,53,.22),0 0 100px rgba(216,255,53,.06)}

/* Le dernier écran retrouve les mêmes lignes, sans ajouter de blocs artificiels. */
.closing-ink{position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:url('assets/current-sketch-v10.svg'),url('assets/pike-blueprint-v10.svg');
  background-position:center 63%,right -24vw center;
  background-size:max(112vw,1520px) auto,min(70vw,1000px) auto;
  background-repeat:no-repeat,no-repeat;opacity:.4;mix-blend-mode:screen}
.closing-inner{z-index:1}
.footer{background-image:repeating-linear-gradient(135deg,transparent 0 61px,rgba(216,255,53,.018) 62px,transparent 63px)}

@keyframes fish-sketch-drift{
  from{transform:translate3d(-.7%,0,0)}
  to{transform:translate3d(1.2%,-1.5%,0)}
}
@media(max-width:880px){
  .hero::before{opacity:.2}
  .hero-ink{inset:0;background-size:235vw auto,170vw auto;
    background-position:52% 47%,70% 68%;opacity:.42;
    -webkit-mask-image:linear-gradient(180deg,transparent 1%,rgba(0,0,0,.45) 20%,#000 59%,rgba(0,0,0,.55) 95%);
    mask-image:linear-gradient(180deg,transparent 1%,rgba(0,0,0,.45) 20%,#000 59%,rgba(0,0,0,.55) 95%);animation:none}
  .hero-title::after{width:43px;height:5px;right:2%;top:48%;opacity:.45}
  .method::after{background-size:210vw auto,150vw auto;background-position:50% 70%,center;opacity:.27}
  .method-ink{background-size:145vw auto;background-position:67% 40%;opacity:.3}
  .method-steps li::before{width:47px;height:30px}
  .experience-slide::before{background-size:245vw auto,160vw auto;background-position:57% 70%,right center;opacity:.29}
  .slide-save::before{opacity:.27}.slide-memory::before{opacity:.35}
  .scene-copy::after{margin-top:20px;width:70%}
  .league-ink{background-size:225vw auto,160vw auto;background-position:44% 59%,75% 32%;opacity:.31}
  .closing-ink{background-size:240vw auto,170vw auto;background-position:50% 62%,40% center;opacity:.38}
}
@media(max-width:390px){.hero-ink{opacity:.37}.method-ink{opacity:.24}.league-ink{opacity:.27}}
@media(prefers-reduced-motion:reduce){.hero-ink{animation:none;will-change:auto}}