.thumbnail-hero{padding:58px 0 48px;background:radial-gradient(ellipse at 95% 20%,#fdeff380,transparent 65%);border-bottom:1px solid var(--line)}
.thumbnail-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}.thumbnail-hero h1{font-size:clamp(30px,3.6vw,48px);font-weight:500;line-height:1.4;letter-spacing:-.04em;margin:26px 0 20px}.thumbnail-hero h1>span{display:block;white-space:nowrap}.thumbnail-hero h1>span+span{color:var(--purple)}.thumbnail-tagline{font-size:19px;line-height:1.65;margin:0 0 16px}.thumbnail-description{font-size:12px;line-height:2;color:var(--muted);margin:0 0 22px}.thumbnail-stage{min-width:0}.thumbnail-art{position:relative;height:390px;background:#fdeff3;border-radius:24px;overflow:hidden;isolation:isolate}.thumb-orbit{position:absolute;width:300px;height:300px;left:22%;top:30px;border:1px solid #f8cdda;border-radius:50%;box-shadow:0 0 0 35px #fbe4eb70,0 0 0 70px #fbe4eb40}.sample-thumb{position:absolute;width:76%;aspect-ratio:16/9;border-radius:12px;box-shadow:0 18px 30px #39262c20;overflow:hidden;animation:thumb-float 7s ease-in-out infinite;transform:rotate(var(--tilt));font-family:Arial,'Noto Sans JP',sans-serif}.sample-kind{position:absolute;left:6%;top:8%;font-size:9px;letter-spacing:1.1px;z-index:5}.sample-oripa{--tilt:-6deg;left:5%;top:28px;background:radial-gradient(ellipse at 50% 90%,#cf2a5c,transparent 75%),linear-gradient(125deg,#3a282d,#5e444c 60%,#38282d);color:#f6e6bb}.sample-oripa:before{content:'';position:absolute;inset:-70%;background:repeating-conic-gradient(from 0deg at 50% 50%,#ebca8130 0deg 2deg,transparent 2deg 18deg);opacity:.5}.sample-card{position:absolute;top:24%;width:19%;height:56%;border-radius:7px;border:2px solid #d7bb81;background:linear-gradient(135deg,#e685a2,#5b484e 50%,#c4a981);display:grid;place-content:center;text-align:center;box-shadow:0 7px 15px #0004}.sample-card i{font-size:34px;font-style:normal}.sample-card small{font-size:6px;letter-spacing:2px}.card-left{left:10%;transform:rotate(-12deg)}.card-right{right:10%;transform:rotate(12deg)}.sample-oripa-title{position:absolute;inset:40% 0 auto;text-align:center;z-index:3;filter:drop-shadow(0 3px 3px #211518)}.sample-oripa-title small{font-size:10px;display:block;letter-spacing:2px;margin-bottom:5px}.sample-oripa-title strong{font-size:clamp(20px,2.4vw,33px);letter-spacing:-1px;color:#f5ddb0}.sample-oripa-foot{position:absolute;bottom:8%;width:100%;text-align:center;font-size:8px;letter-spacing:.4px}.sample-shine{position:absolute;right:8%;top:12%;font-size:28px}.sample-youtube{--tilt:5deg;right:5%;top:172px;background:#f9d4df;color:#392a2e;animation-delay:-3s}.sample-youtube:before{content:'';position:absolute;width:65%;height:130%;right:-15%;top:-15%;border-radius:50%;background:#ea99b2}.sample-youtube-title{position:absolute;left:7%;top:30%;z-index:2}.sample-youtube-title small{font-size:9px;letter-spacing:1px}.sample-youtube-title strong{display:block;font-size:clamp(20px,2.3vw,30px);line-height:1.35;letter-spacing:-.5px;margin-top:7px}.sample-play{position:absolute;right:12%;top:40%;width:54px;height:40px;display:grid;place-items:center;border-radius:12px;background:#d63666;color:white;font-size:20px;box-shadow:0 7px 15px #5d404920}.sample-timeline{position:absolute;left:7%;right:7%;bottom:12%;height:2px;background:#e47c9b80}.sample-timeline span{display:block;width:42%;height:100%;background:#d63666}.sample-time{position:absolute;right:7%;bottom:16%;font-size:8px;background:#342a2d;color:white;padding:3px 5px;border-radius:3px}.thumb-spark{position:absolute;color:#dd5981;z-index:5;animation:thumb-turn 12s linear infinite}.spark-one{right:5%;top:23%;font-size:40px}.spark-two{left:5%;bottom:13%;font-size:28px}.thumbnail-stage-footer{display:flex;justify-content:space-between;align-items:center;margin:13px 3px 0;color:#dc537c;font-size:9px;letter-spacing:1px}.thumbnail-motion-toggle{border:0;background:transparent;color:#d22b5d;font:inherit;cursor:pointer;min-height:32px;padding:4px 0 4px 14px;letter-spacing:0}.thumbnail-stage.is-paused *{animation-play-state:paused!important}#oripa-prices{scroll-margin-top:110px}
@keyframes thumb-float{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-9px) rotate(var(--tilt))}}
@keyframes thumb-turn{to{transform:rotate(360deg)}}
@media(max-width:760px){.thumbnail-hero{padding:32px 0 28px}.thumbnail-hero-grid{grid-template-columns:1fr;gap:24px}.thumbnail-hero .eyebrow{font-size:8px;letter-spacing:1.6px}.thumbnail-hero h1{font-size:clamp(25px,7.7vw,35px);margin:19px 0 15px;line-height:1.4}.thumbnail-tagline{font-size:15px;line-height:1.6;margin-bottom:12px}.thumbnail-description{font-size:11px;line-height:1.9;margin-bottom:16px}.thumbnail-art{height:290px;border-radius:18px}.sample-thumb{width:78%;border-radius:9px}.sample-oripa{top:20px}.sample-youtube{top:123px}.sample-oripa-title strong{font-size:clamp(19px,5.9vw,27px)}.sample-youtube-title strong{font-size:clamp(18px,5.5vw,25px)}.sample-kind{font-size:7px}.sample-oripa-title small,.sample-youtube-title small{font-size:8px}.sample-oripa-foot{font-size:6px}.sample-card i{font-size:27px}.sample-play{width:42px;height:31px;font-size:16px}.spark-one{font-size:29px}.spark-two{font-size:23px}.thumbnail-stage-footer{margin-top:7px;font-size:8px}#oripa-prices{scroll-margin-top:88px}}
@media(prefers-reduced-motion:reduce){.thumbnail-art *{animation:none!important}.thumbnail-motion-toggle{display:none}}

.thumbnail-art{animation:thumb-arrive .75s ease-out both}@keyframes thumb-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.thumbnail-art{animation:none!important}}

/* Recognizable thumbnail examples, with independently moving design elements. */
.thumbnail-art{height:560px;background:#fdeff3;animation:thumb-arrive .7s ease-out both}
.sample-thumb{width:85%;border:3px solid #fff;animation:thumb-sway 4.6s ease-in-out infinite;box-shadow:0 14px 25px #342a2d28}
.sample-oripa{left:5%;top:30px;--tilt:-3deg;background:radial-gradient(ellipse at 50% 80%,#cf2a5c,#583640 60%,#281a1e)}
.sample-youtube{right:5%;top:298px;--tilt:3deg;background:linear-gradient(125deg,#fff7e6,#edcf9b);animation-delay:-2.3s}
.sample-kind{left:5%;top:6%;font-size:11px;font-weight:700;letter-spacing:0;padding:5px 9px;border-radius:5px;background:#311f24d9;color:#fff;z-index:7}
.sample-youtube .sample-kind{background:#fff;color:#342a2d}.sample-kind b{color:#e8423b;margin-right:4px}
.sample-oripa:before{animation:thumb-rays 20s linear infinite;opacity:.8}
.sample-card{top:23%;height:64%;width:24%;z-index:1;animation:card-bob 3s ease-in-out infinite;--card-rotate:-12deg;background:linear-gradient(155deg,#f7c7d6,#cf2a5c 50%,#d7b97c)}
.card-left{left:5%}.card-right{right:5%;--card-rotate:12deg;animation-delay:-1.5s}.card-creature{width:100%;height:100px;filter:drop-shadow(0 0 7px #fdeff380)}
.sample-card small{font-size:4px;letter-spacing:.5px}.sample-oripa-title{inset:25% 0 auto;animation:title-pop 4.6s ease-in-out infinite}.sample-oripa-title small{font-size:11px;margin:0 0 4px;letter-spacing:.4px;color:white;text-shadow:0 2px 3px #2b1c20}
.sample-oripa-title strong{font-size:48px;line-height:1;letter-spacing:-3px;font-weight:900;color:#ffe39b;-webkit-text-stroke:1px #5f3a45;text-shadow:0 3px 0 #3f2d32,0 5px 0 #22171a,0 7px 10px #180f12}
.sample-oripa-title em{font-style:normal;color:#fff5d1;font-size:.93em}.sample-oripa-foot{bottom:5%;font-size:10px;letter-spacing:0;background:#311f24dc;width:70%;left:15%;padding:4px 0;border-radius:3px;z-index:5}.sample-oripa-foot b{margin-left:12px;color:#ffe39b}
.sample-shine{z-index:6;right:8%;top:29%;animation:shine-pulse 2.6s ease-in-out infinite}.second-shine{left:10%;top:65%;animation-delay:-1.3s}
.sample-youtube-title{left:5%;top:31%;animation:title-pop 4.6s ease-in-out infinite;animation-delay:-2.3s}.sample-youtube-title small{font-size:11px;background:#d63666;color:#fff;padding:4px 7px;border-radius:4px;letter-spacing:0}.sample-youtube-title strong{font-size:40px;line-height:1.1;letter-spacing:-2px;margin-top:10px;color:#342a2d;font-weight:900;-webkit-text-stroke:3px #fff;paint-order:stroke fill;filter:drop-shadow(0 3px 0 #ea99b1)}.sample-youtube-title em{font-style:normal;color:#d63666}
.sample-youtube:before{background:#e8bc74;width:59%;right:-13%}
.video-presenter{position:absolute;height:95%;right:4%;bottom:0;filter:drop-shadow(-3px 0 0 white);animation:presenter-bob 3.7s ease-in-out infinite}
.sample-play{z-index:6;right:5%;top:11%;width:36px;height:25px;border-radius:7px;background:#eb4038;font-size:14px;animation:play-pulse 2.5s ease-in-out infinite}.sample-time{z-index:6;bottom:5%;right:4%}
.spark-one{right:2%;top:47%;font-size:25px}.spark-two{left:2%;bottom:3%;font-size:21px}
@keyframes thumb-sway{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-10px) rotate(calc(var(--tilt) * -0.5))}}
@keyframes card-bob{0%,100%{transform:translateY(0) rotate(var(--card-rotate))}50%{transform:translateY(-7px) rotate(calc(var(--card-rotate) * .6))}}
@keyframes title-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes shine-pulse{0%,100%{opacity:.5;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}
@keyframes thumb-rays{to{transform:rotate(360deg)}}
@keyframes presenter-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes play-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(max-width:760px){.thumbnail-hero-grid{gap:20px}.thumbnail-art{height:clamp(340px,106vw,430px)}.sample-oripa{top:20px}.sample-youtube{top:52%}.sample-thumb{width:87%;border-width:2px}.sample-kind{font-size:8px;padding:4px 6px}.sample-oripa-title small{font-size:8px}.sample-oripa-title strong{font-size:clamp(27px,8.5vw,39px);letter-spacing:-1.5px}.sample-oripa-foot{font-size:7px;padding:3px 0}.sample-oripa-foot b{margin-left:7px}.card-creature{height:clamp(55px,19vw,83px)}.sample-youtube-title small{font-size:8px;padding:3px 5px}.sample-youtube-title strong{font-size:clamp(24px,7.7vw,35px);letter-spacing:-1.5px;margin-top:7px;-webkit-text-stroke:2px #fff}.sample-play{width:28px;height:20px;font-size:11px}.sample-shine{font-size:22px}.sample-time{font-size:7px}}
@media(prefers-reduced-motion:reduce){.thumbnail-art,.thumbnail-art *{animation:none!important}}

/* Let the examples appear sooner, with a short introduction above them. */
.thumbnail-hero-grid{row-gap:18px;align-items:end}
.thumbnail-hero-copy{grid-column:1;grid-row:1}
.thumbnail-stage{grid-column:2;grid-row:1 / span 2;align-self:center}
.thumbnail-hero-action{grid-column:1;grid-row:2;align-self:start}
.thumbnail-tagline{font-size:16px;line-height:1.7;margin-bottom:9px}
.thumbnail-description{margin-bottom:0}
@media(max-width:760px){
.thumbnail-hero{padding-top:22px}
.thumbnail-hero-grid{gap:16px;align-items:start}
.thumbnail-hero-copy,.thumbnail-stage,.thumbnail-hero-action{grid-column:1;grid-row:auto}
.thumbnail-hero h1{margin:13px 0 11px;line-height:1.3}
.thumbnail-tagline{font-size:clamp(11px,3.35vw,14px);line-height:1.6;white-space:nowrap;margin:0 0 6px}
.thumbnail-description{font-size:11px;line-height:1.7;margin:0}
.thumbnail-hero-action{margin-top:-5px}
}

/* Metallic gold, bright bevels and a thick warm extrusion for the sample title. */
.oripa-gold-title{display:block;width:58%;height:auto;margin:-2px auto 0;overflow:visible;filter:drop-shadow(0 5px 4px #1a1013aa)}
.oripa-gold-glint{animation:gold-sweep 4s ease-in-out infinite}
@keyframes gold-sweep{0%,18%{transform:translateX(0)}65%,100%{transform:translateX(350px)}}
@media(max-width:760px){.oripa-gold-title{width:60%;margin-top:-1px}}
@media(prefers-reduced-motion:reduce){.oripa-gold-glint{animation:none!important;opacity:0}}


/* Three clear tiers: supporting copy, centered gold title, specifications. */
.sample-oripa-title{inset:0;animation:none;filter:none}
.sample-oripa-title small{position:absolute;top:21%;left:0;width:100%;line-height:1.3;margin:0;letter-spacing:.3px}
.oripa-gold-title{position:absolute;left:50%;top:53%;width:40%;height:auto;margin:0;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px #1a101390);animation:center-gold-breathe 4.6s ease-in-out infinite}
.sample-oripa-foot{left:15%;width:70%;bottom:6%;z-index:5}
@keyframes center-gold-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.025)}}
@media(max-width:760px){.sample-oripa-title{inset:0}.sample-oripa-title small{top:21%;line-height:1.3;margin:0}.oripa-gold-title{width:40%;margin:0}}
@media(prefers-reduced-motion:reduce){.oripa-gold-title{animation:none!important}}
