/* Drift Gallery — WebGL hero (Three.js). Full-bleed inside the padded main. Fonts (Instrument Sans / IBM Plex Sans) loaded via Google Fonts in . */ .dg_section { --dg-bg: #57B1A8; --dg-fg: #7856C6; --dg-fg-faint: rgba(120, 86, 198, 0.6); --dg-accent: #7856C6; --dg-line: rgba(120, 86, 198, 0.28); --dg-margin: 56px; --dg-sans: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif; --dg-body: "IBM Plex Sans", "Helvetica Neue", sans-serif; position: relative; width: 100vw; margin-left: calc(50% - 50vw); /* full-bleed */ height: 100vh; box-sizing: border-box; background: var(--dg-bg); color: var(--dg-fg); font-family: var(--dg-sans); -webkit-font-smoothing: antialiased; overflow: hidden; } .dg_stage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; } .dg_ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 44vw; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: rgba(120, 86, 198, 0.16); white-space: nowrap; pointer-events: none; z-index: 0; user-select: none; } .dg_head { position: absolute; top: 96px; left: var(--dg-margin); z-index: 500; max-width: 32ch; pointer-events: auto; } .dg_head_title { font-size: clamp(40px, 5.4vw, 82px); line-height: 0.92; letter-spacing: -0.045em; font-weight: 600; margin: 0; white-space: nowrap; } .dg_head_sub { font-family: var(--dg-body); font-size: 15px; line-height: 1.5; color: rgba(120, 86, 198, 0.9); margin: 22px 0 0; max-width: 30ch; } .dg_head_btn { display: inline-block; margin-top: 30px; pointer-events: auto; font-family: var(--dg-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dg-fg); background: var(--dg-accent); border: none; border-radius: 999px; padding: 14px 26px; text-decoration: none; transition: background 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1); } .dg_head_btn:hover { background: #cfe600; transform: translateY(-2px); } .dg_scene { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; } .dg_scene canvas { display: block; width: 100%; height: 100%; } .dg_panel { position: absolute; right: var(--dg-margin); top: 96px; z-index: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: auto; } .dg_panel_media { width: 200px; height: 240px; overflow: hidden; border: 1px solid var(--dg-line); border-radius: 10px; flex: none; } .dg_panel_img { display: block; width: 100%; height: 100%; object-fit: cover; } .dg_panel_text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 5px; padding-bottom: 4px; } .dg_panel_idx { font-family: var(--dg-body); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); } .dg_panel_title { font-family: var(--dg-sans); font-size: clamp(22px, 2.4vw, 38px); font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; line-height: 0.95; color: #ffffff; } .dg_panel_meta { font-family: var(--dg-body); font-size: 12px; letter-spacing: 0.06em; color: #ffffff; margin-top: 2px; } .dg_panel_code { font-family: var(--dg-body); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); } @media (max-width: 767px) { .dg_section { --dg-margin: 20px; } .dg_ghost { top: 80%; } .dg_head { top: 76px; left: var(--dg-margin); right: var(--dg-margin); max-width: none; text-align: center; align-items: center; } .dg_head_title { font-size: clamp(30px, 9vw, 44px); } .dg_head_sub { font-size: 13px; margin: 10px auto 0; max-width: 30ch; } .dg_head_btn { margin-top: 14px; } .dg_scene { top: 32%; bottom: auto; height: 40%; } .dg_panel { flex-direction: column; top: 74%; bottom: auto; left: var(--dg-margin); right: var(--dg-margin); align-items: center; text-align: center; gap: 4px; pointer-events: none; } .dg_panel_media { display: none; } .dg_panel_text { align-items: center; text-align: center; padding-bottom: 0; gap: 3px; } .dg_panel_title { font-size: clamp(26px, 9vw, 42px); } }