/* TribeAwaken home v5 (preview) — sits on top of home-v2.css.
   1. the opening film: fine grain over the re-graded real clips
   2. the Japanese thread: ink mountains in mist, vertical type */

/* ---------- 1. film grain on the opening frame ---------- */
.v5-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:v5grain 1.1s steps(6) infinite}
@keyframes v5grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:55px -20px}60%{background-position:-25px -60px}80%{background-position:70px 45px}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.v5-grain{animation:none}}
html.render .v5-grain,html.flat .v5-grain{animation:none}

/* ---------- 2. the Japanese thread ---------- */
.japan{position:relative;min-height:min(100svh,920px);display:grid;align-items:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0d1820 0%,#22323c 46%,#5d727d 100%);color:#eef2f1}
.japan .ink{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.japan::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,17,23,.78) 0%,rgba(9,17,23,.5) 34%,rgba(9,17,23,.08) 62%,rgba(9,17,23,0) 100%),
             linear-gradient(180deg,rgba(9,17,23,.35) 0%,rgba(9,17,23,0) 22%,rgba(9,17,23,0) 78%,rgba(9,17,23,.55) 100%)}
.japan .jp-lantern{position:absolute;z-index:1;right:clamp(330px,35vw,520px);bottom:clamp(64px,11vh,120px);width:clamp(86px,10vw,150px);aspect-ratio:1;
  background:linear-gradient(180deg,#e9d7a6,#c9a25a);opacity:.82;
  -webkit-mask:url(/assets/art/japan-stone-lantern.svg) center/contain no-repeat;mask:url(/assets/art/japan-stone-lantern.svg) center/contain no-repeat}
.japan .jp-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,38rem) 1fr;gap:clamp(20px,4vw,72px);align-items:center;
  padding:clamp(72px,11vh,130px) calc(var(--gutter) + 214px) clamp(72px,11vh,130px) var(--gutter)}
.japan .label{color:#e6c46a;letter-spacing:.16em}
.japan h2{color:#fff;font-size:clamp(1.9rem,1.2rem + 2.3vw,3.2rem);line-height:1.06;margin-top:.5rem;max-width:16ch;text-wrap:balance}
.japan p{color:#dfe7e6;margin-top:.95rem;max-width:36rem;font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.62}
.japan blockquote{margin:1.5rem 0 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid #d9a25f;font-family:var(--display);font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.3;color:#fff;max-width:30rem}
.japan blockquote cite{display:block;margin-top:.55rem;font-family:var(--text);font-style:normal;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#b9c6c8}
.japan .acts{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-top:1.6rem}
.japan .more{color:#f1e3bd;border-color:rgba(241,227,189,.5);font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:1.02rem}
.japan .more:hover{color:#fff}
.japan .jp-v{justify-self:end;display:flex;flex-direction:row-reverse;gap:1.1rem;align-items:flex-start;writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;color:#f4f1e8;text-shadow:0 2px 26px rgba(8,16,22,.55)}
.japan .jp-v .big{font-weight:700;font-size:clamp(3rem,2rem + 4.6vw,6.4rem);letter-spacing:.12em;line-height:1}
.japan .jp-v .small{font-weight:500;font-size:clamp(1rem,.8rem + .8vw,1.5rem);letter-spacing:.34em;color:#e6c46a;padding-top:.4em}
.japan .jp-gloss{position:absolute;right:calc(var(--gutter) + 214px);bottom:clamp(14px,3vh,30px);margin:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#c4d0d2}
.japan .jp-gloss span{font-family:"Shippori Mincho",serif;letter-spacing:.2em;text-transform:none;color:#e6c46a;margin-right:.5em}
@media (max-width:980px){
  .japan{min-height:0}
  .japan::after{background:linear-gradient(180deg,rgba(9,17,23,.3) 0%,rgba(9,17,23,.72) 38%,rgba(9,17,23,.8) 100%)}
  .japan .jp-in{grid-template-columns:1fr;padding:calc(clamp(150px,34vh,300px) + 24px) var(--gutter) 84px}
  .japan .jp-v{position:absolute;top:26px;right:var(--gutter)}
  .japan .jp-v .big{font-size:clamp(2.4rem,11vw,3.6rem)}
  .japan .jp-lantern{right:auto;left:var(--gutter);top:clamp(70px,16vh,150px);bottom:auto;width:84px}
  .japan .jp-gloss{position:static;margin-top:1.4rem;padding:0}
  .japan h2{max-width:none}
}
html.flat .japan{min-height:860px}

/* ---------- 3. the woven band: Diné weaving, the Lithuanian sash, the Japanese wave, from Tony's own line drawings ---------- */
.v5-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;height:44px;background:#f3efe5;border-block:1px solid rgba(20,40,30,.1)}
.v5-band i{display:block;height:100%;-webkit-mask-size:auto 190%;mask-size:auto 190%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0 34%;mask-position:0 34%;opacity:.8}
.v5-band .dine{background:#b4582f;-webkit-mask-image:url(/assets/art/dine-weaving.svg);mask-image:url(/assets/art/dine-weaving.svg)}
.v5-band .lt{background:#2e8540;-webkit-mask-image:url(/assets/art/baltic-juosta.svg);mask-image:url(/assets/art/baltic-juosta.svg)}
.v5-band .jp{background:#124279;-webkit-mask-image:url(/assets/art/japan-seigaiha.svg);mask-image:url(/assets/art/japan-seigaiha.svg)}
@media (max-width:980px){.v5-band{height:34px}}

/* ---------- 4. the Japanese edition sets this section in Mincho ---------- */
.japan.ja h2,.japan.ja blockquote{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:700;letter-spacing:.02em;line-height:1.35}
.japan.ja h2{font-size:clamp(1.6rem,1.1rem + 1.7vw,2.5rem);max-width:none}
.japan.ja p{line-height:1.9}
.japan.ja .label{letter-spacing:.3em}
.japan.ja h2,.japan.ja blockquote{word-break:auto-phrase;text-wrap:balance}

/* real Japan footage behind the Japanese thread: three loops crossfade on wide screens, one on phones */
.japan .jp-film{position:absolute;inset:0;z-index:0;overflow:hidden}
.japan .jp-film .ap-loop{position:absolute;inset:0;opacity:0;animation:jpfade 27s linear infinite}
.japan .jp-film .ap-loop:nth-child(2){animation-delay:9s}
.japan .jp-film .ap-loop:nth-child(3){animation-delay:18s}
@keyframes jpfade{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
.japan .ink{opacity:.42;mix-blend-mode:screen}
.japan .jp-note{position:absolute;left:var(--gutter);bottom:clamp(10px,2vh,18px);z-index:2;margin:0;font-size:.7rem;letter-spacing:.06em;color:rgba(220,230,232,.62)}
@media (max-width:760px){.japan .jp-film .ap-loop:not(:first-child){display:none}.japan .jp-film .ap-loop:first-child{animation:none;opacity:1}.japan .jp-note{position:static;padding:0 var(--gutter) 18px}}
@media (prefers-reduced-motion:reduce){.japan .jp-film .ap-loop{animation:none}.japan .jp-film .ap-loop:first-child{opacity:1}}

/* ---------- phones and tablets: nothing blended over moving video ----------
   The animated grain (blended over the opening films) and the ink canvas (blended over the Japan film)
   crashed Safari on iPhone on 11/10. On touch screens and narrow windows both are off. */
@media (hover:none),(max-width:980px){.v5-grain{display:none!important;animation:none!important}.japan .ink{display:none!important}}