/* ============================================================ つむぐ Marketing — Motion Editorial pacing — slow, confident, never showy. Companion to colors_and_type.css. ============================================================ */ /* ---------- 1. Scroll fade-up ---------- */ .tsumugu .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo); } .tsumugu .reveal.is-in { opacity: 1; transform: translateY(0); } /* Stagger children */ .tsumugu .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; } .tsumugu .reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; } .tsumugu .reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; } .tsumugu .reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; } .tsumugu .reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; } .tsumugu .reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; } .tsumugu .reveal-stagger > .reveal:nth-child(7) { transition-delay: 600ms; } .tsumugu .reveal-stagger > .reveal:nth-child(8) { transition-delay: 700ms; } /* ---------- 2. Image zoom-in on reveal ---------- */ .tsumugu .img-reveal { overflow: hidden; position: relative; } .tsumugu .img-reveal > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: blur(2px) brightness(0.92); transition: transform var(--dur-image) var(--ease-out-expo), filter var(--dur-image) var(--ease-out-expo); } .tsumugu .img-reveal.is-in > img, .tsumugu .reveal.is-in .img-reveal > img { transform: scale(1); filter: blur(0) brightness(1); } /* ---------- 3. Hover zoom on photo cards ---------- */ .tsumugu .photo-zoom { overflow: hidden; } .tsumugu .photo-zoom > img { transition: transform 600ms var(--ease-out-expo); } .tsumugu .photo-zoom:hover > img, .tsumugu .card-hover:hover .photo-zoom > img { transform: scale(1.04); } /* ---------- 4. Underline grow on inline links — already in core CSS via background-size ---------- */ /* ---------- 5. CTA arrow nudge — already in core CSS ---------- */ /* ---------- 6. Hero entry — word-by-word ---------- */ @keyframes tsumugu-word-in { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: translateY(0); } } .tsumugu .word-in > span { display: inline-block; opacity: 0; animation: tsumugu-word-in 900ms var(--ease-out-expo) forwards; } .tsumugu .word-in > span:nth-child(1) { animation-delay: 100ms; } .tsumugu .word-in > span:nth-child(2) { animation-delay: 250ms; } .tsumugu .word-in > span:nth-child(3) { animation-delay: 400ms; } .tsumugu .word-in > span:nth-child(4) { animation-delay: 550ms; } .tsumugu .word-in > span:nth-child(5) { animation-delay: 700ms; } /* ---------- 7. Drop cap fade-in (for editorial paragraphs) ---------- */ .tsumugu .drop-cap::first-letter { font-family: var(--font-display); font-size: 3.2em; line-height: 0.9; float: left; margin: 0.1em 0.12em 0 0; color: var(--terracotta); } /* ---------- 8. Reduced motion ---------- */ /* ============================================================ GIG-style motion add-ons Activated by on the top page. ============================================================ */ /* ---------- A. Custom cursor (dot + lagging ring) ---------- */ .motion-gig { cursor: none; } .motion-gig a, .motion-gig button { cursor: none; } .gig-cursor-dot, .gig-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 999px; mix-blend-mode: difference; will-change: transform; } .gig-cursor-dot { width: 8px; height: 8px; background: #FFFFFF; transform: translate(-50%, -50%); } .gig-cursor-ring { width: 36px; height: 36px; border: 1.5px solid #FFFFFF; transform: translate(-50%, -50%); transition: width 220ms var(--ease-out-expo), height 220ms var(--ease-out-expo), background 220ms var(--ease-out-expo); } .gig-cursor-ring.is-hot { width: 64px; height: 64px; background: rgba(255,255,255,0.06); } @media (max-width: 980px) { .motion-gig { cursor: auto; } .gig-cursor-dot, .gig-cursor-ring { display: none; } } /* ---------- B. Hero char reveal ---------- */ @keyframes gig-char-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .motion-gig .hero-h .char { display: inline-block; opacity: 0; transform: translateY(28px); white-space: pre; } /* ---------- C. Mouse-follow gradient blob behind hero ---------- */ .motion-gig .kit-hero { position: relative; } .gig-blob { position: absolute; width: 600px; height: 600px; border-radius: 999px; background: radial-gradient(circle, rgba(23,59,110,0.22) 0%, rgba(23,59,110,0) 70%); pointer-events: none; filter: blur(40px); transform: translate(-50%, -50%); z-index: 0; transition: transform 800ms var(--ease-out-expo); } .motion-gig .kit-hero-inner { position: relative; z-index: 1; } /* ---------- D. Marquee for client strip (replaces static grid) ---------- */ .motion-gig .kit-logostrip-grid { display: flex !important; width: max-content; gap: 12px; animation: gig-marquee 38s linear infinite; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .motion-gig .kit-logostrip-grid .kit-logostrip-cell { flex: none; min-width: 200px; } @keyframes gig-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .motion-gig .kit-logostrip-grid:hover { animation-play-state: paused; } /* ---------- E. Section section-enter mask wipe ---------- */ @keyframes gig-mask-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .motion-gig .kit-section h2, .motion-gig .kit-manifesto-h { animation: gig-mask-wipe 1000ms var(--ease-out-expo) both; animation-play-state: paused; } .motion-gig .reveal.is-in h2, .motion-gig .reveal.is-in .kit-manifesto-h { animation-play-state: running; } /* ---------- F. Manifesto big-number scroll parallax cue ---------- */ .motion-gig .kit-manifesto-h .kit-manifesto-reason { background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gig-shimmer 4s linear infinite; } @keyframes gig-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ---------- G. Hover hot states for "is-hot" cursor handles ---------- */ .motion-gig .btn:hover ~ .gig-cursor-ring, .motion-gig a:hover ~ .gig-cursor-ring { width: 64px; height: 64px; } /* ---------- Reduced motion respects ---------- */ @media (prefers-reduced-motion: reduce) { .motion-gig .hero-h .char, .motion-gig .kit-logostrip-grid, .motion-gig .kit-manifesto-h .kit-manifesto-reason, .motion-gig .kit-section h2, .motion-gig .kit-manifesto-h { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } }